Cannot fix SSR issue with editorKey prop
See original GitHub issueDo you want to request a feature or report a bug? Report a bug.
What is the current behavior?
Causes bag with data-offset-key
:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) " data-offset-key="egvuv-0-0" data-react
(server) " data-offset-key="enh8p-0-0" data-react
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/. Just draft-js with SSR. Cannot provide jsfiffle because of it doesn’t have SSR (or has?).
What is the expected behavior? SSR without reuse markup errors.
Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? 0.10.1
Issue Analytics
- State:
- Created 6 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
Server-Side Rendering (SSR) - Vue.js
In the server request handler, render the HTML with the correct client-side asset links and optimal resource hints. We may also need to...
Read more >Using Non-SSR Friendly Components with Next.js
You can use the ssr: false object to disable server-side rendering of your dynamically imported component, as shown below. import dynamic from 'next/dynamic'...
Read more >Inline Toolbar - DraftJS Plugins
In this editor a toolbar shows up once you select part of the text …
Read more >Next js app with SSR is not pre-rendering HTML, so web ...
I have a next.js app that uses server side rendering. When running the application both locally and in production (on vercel edge), the...
Read more >Best practices to increase the speed for Next.js apps
Server-side rendering (SSR) is a technique used to render the initial ... an object that will be passed to the page component as...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@mxstbr I was able to reproduce the issue, and I think the reason is that the empty EditorState is being created fresh on the server, and then created fresh again on the client.
There is an example of SSR in our github repo, and it carefully uses the same data for the empty
EditorState
on both server on client - https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/universalI think that if the block keys are different, Draft will think they are different content and re-render, even though you and I know they are both just a block with an empty string.
We could try to force Draft to avoid re-rendering and merge the block keys if their text and entity data is the same. I would rather not because it adds complexity, and because you have another solution: this seems solvable if you create a reusable
emptyContentState
like in the example.Hope that is helpful!
Ohh that makes total sense, sorry for the false alarm. Thank you so much for digging into this @flarnie, much much appreciated!