Rendering isomorphically

[jamesjjk]

Draft-js is great! But we are rendering our app isomorpically, draft-js creates a checksum error when doing so? Using react 14.8. Any way we can avoid this?

[sophiebits]

What in the HTML differs?

[jamesjjk]

 (client) true" data-editor="dulcp" data-offset-ke
 (server) true" data-editor="dj7ps" data-offset-ke

[sophiebits]

Interesting, okay. Maybe we can create and add that editor key after initial render or only when you copy…

[jamesjjk]

Yep, any work around for this?

[sophiebits]

You could… stub out Math.random while doing the initial render? Other than that, not really. You could also look at not rendering the Draft component at all on the server.

[jamesjjk]

@spicyj it would be cool to get a PR done to get the Math.random replaced as a key. Do you think FB will assign this as a bug? I will work with it as is for now, and consider not rendering isomorphically. Although thats the part I'm really keen on as I have 100% coverage at the moment.

Thanks!

[sophiebits]

It's mostly not clear what to replace it with. Certainly willing to accept good alternatives but this isn't very high priority for me.

[jamesjjk]

I understand this key is used to define editor instances? Can we provide a prop for the key, else use math.random?

[juhaelee]

@spicyj I'm also getting the following HTML differs in SSR:

(client) er" id="placeholder-87s16" data-reactid=
(server) er" id="placeholder-eur98" data-reactid=

on react v15 and latest (0.7.0) draft.js

[reyhansofian]

hey guys, have you try this method ?
Just wrap the react markup with div. I just tried, and it works.

[gabriel-miranda]

Any thoughts on this? That method that @reyhansofian mentioned doesnt work :/

[Keepcase]

@spicyj, are there any new updates (any discussions internally on how to tackle this)?
@reyhansofian, that method did not work.
@hellendag, do you have any ideas regarding a solution/workaround for this?

I'm getting the same checksum errors while using Draft.js with SSR (react 15.1.0 and draft-js 0.7.0):

(client) "true" data-editor="2ec27" data-offset-k
(server) "true" data-editor="3vera" data-offset-k

I'm loving Draft.js but I'm hoping SSR will be supported in the near future.
I'm currently developing with the above warnings for pages that use Draft.js.

Keep up the great work!

[khankuan]

@spicyj There is also a side effect bug using this on server side. The generateRandomKeys method would freeze the server once it is called 2^24 times. And in fact, gets extremely inefficient as it grows.

[sauravskumar]

+1 for fixing this issue

[Superoryco]

Try this method to avoid warning.

[gabriel-miranda]

@Superoryco yeah, but that's loosing SSR anyway because you don't have a SSRed component, you only have a div. The user won't see anything until all the js loads. I don't think it's a proper solution.

[jurgenzz]

I have an interesting way for resolving SSR, as for my app, on initial load, it requires only to display text, i am rendering only <DraftEditorContents />, not the whole editor, where afterwards, for example, on click, it becomes <Editor /> and on post it is the first one again. This way, i can render it without data-editor on the server side for now and no warnings so far.

Not a fan of the solution, but at the moment it works well for me.

[greyvugrin]

For anyone still wrestling with this I have another workaround. Simply disable the Draft js reliant portion of your component on initial render, then enable it in componentDidMount (which only fires on the client).

Example in component class:

constructor(props) {
  super(props)
  this.state = {
    editor: false,
  }
}

// Once component mounts, enable editor
componentDidMount() {
  this.setState({
    editor: true
  })
}

render() {
  const { editor } = this.state
  return (
    <div className="someComponent">
      { editor
        ? <DraftEditor />          
        : null
      }
    </div>
  )
}

[gabriel-miranda]

@greyvugrin it's the same workaround, and I don't think its a workaround, you simply dont use draft in ssr. I need to show the editor in a SSRed reactjs app.

[khankuan]

@spicyj In react 15, react-id is replaced by an index instead. Could we do something similar to replace random keys?

[greyvugrin]

@gabriel-miranda With the workaround I described, there is a brief flash if using SSR to display the page where the editor is initially missing, but it's pretty negligible. Also if the app is already rendered and you switch to a page there is no flash. The pro is that no user interaction is needed to make the component appear, which is why this is different than the other proposed workaround.

Also unless the editor contains data necessary for seo, you can probably not worry about having it missing from the markup as long as the component is usable on load.

Maybe give this a shot and see for yourself, it won't take more than a couple mins to rig up, but it's better than it looks! :)

[khankuan]

Would like to warn anyone hoping for SSR again: https://github.com/facebook/draft-js/blob/master/src/model/keys/generateRandomKey.js#L16

The generation method here would run out of keys after 2^24 keys are generated. It also suffers from birthday problem which will degrade server performance over time and freeze eventually closer to 2^24.

[diegohaz]

I think this should be high priority

[mikaelwaltersson]

A hack that seems to work is adding a step in your build process that replaces node_modules/draft-js/lib/generateRandomKey.js with your own version that generates keys based on a counter/seed value.

Reset that value before you call render/renderToString on client/server.

I can't see any need for the the keys to be unique outside the scope of a single render call on the server.

[Keepcase]

It'd be great if we can get a fix in the core library so we're all not building our own workaround that replaces node_modules/draft-js/lib/generateRandomKey.js

[thisbejim]

Any progress here?

[sauravskumar]

Can someone please let us know about status of the implementation of isomorphic rendering in draft js?

[camyyssa]

I found this section in the documentation for anyone browsing this issue. They seem to have added a editorKey param for <Editor /> to hard-code this key. It's on the developer to make sure this key is unique, once they define it.

Here's the documentation entry: https://draftjs.org/docs/api-reference-editor#editorkey

editorKey#
editorKey?: string
You probably won't set editorKey on an manually unless you're rendering a Draft component serverside. If you are, you must set this prop to avoid server/client mismatches.

If the key is not set, it is generated automatically when the component renders and assigned as a prop of the Editor's component.

If you do set this prop, the key should be unique per-editor, as it is used to determine if styles should be preserved when pasting text within an editor.