Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Rendering isomorphically #385

Closed
jamesjjk opened this issue May 12, 2016 · 28 comments
Closed

Rendering isomorphically #385

jamesjjk opened this issue May 12, 2016 · 28 comments

Comments

@jamesjjk
Copy link

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
Copy link
Contributor

What in the HTML differs?

@jamesjjk
Copy link
Author

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

@sophiebits
Copy link
Contributor

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

@jamesjjk
Copy link
Author

Yep, any work around for this?

@sophiebits
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Contributor

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
Copy link
Author

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

@juhaelee
Copy link

@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
Copy link

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

@gabriel-miranda
Copy link

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

@Keepcase
Copy link

@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
Copy link

khankuan commented Aug 5, 2016

@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
Copy link

+1 for fixing this issue

@Superoryco
Copy link

Try this method to avoid warning.

@gabriel-miranda
Copy link

@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
Copy link

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
Copy link

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
Copy link

@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
Copy link

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

@greyvugrin
Copy link

@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
Copy link

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
Copy link

I think this should be high priority

@mikaelwaltersson
Copy link

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
Copy link

Keepcase commented Feb 5, 2017

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
Copy link

Any progress here?

@sauravskumar
Copy link

sauravskumar commented Mar 11, 2017

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

@camyyssa
Copy link

camyyssa commented Jul 16, 2020

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests