From 7e48614b7039b92ffd0fb8687b19004bf6b16efa Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 23 Oct 2017 16:43:55 +0100 Subject: [PATCH] Add extra info --- content/docs/reference-react-dom.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/reference-react-dom.md b/content/docs/reference-react-dom.md index 1f005c9d856..4fe37159576 100644 --- a/content/docs/reference-react-dom.md +++ b/content/docs/reference-react-dom.md @@ -76,6 +76,8 @@ React expects that the rendered content is identical between the server and the If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like `this.state.isClient`, which you can set to `true` in `componentDidMount()`. This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously during mounting. Note that this approach will make your components slower because they have to render twice, so use it with caution. +Remember to be mindful of user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so if you render something different in the client-only pass, the transition can be jarring. However, if executed well, it may be beneficial to render a "shell" of the application on the server, and only show some of the extra widgets on the client. To learn how to do this without getting the markup mismatch issues, refer to the explanation in the previous paragraph. + * * * ### `unmountComponentAtNode()`