SSR rehydrate #1060

khanetor · 2018-04-10T22:19:45Z

This is a question.

In React 16, when using SSR, in the client-side code, we need to use hydrate instead of render so that React only registers event handler. I guess that React does this by comparing the checksum between server-side rendered html and supposed-to-be client-side rendered html.

While playing with Preact and attempting to perform SSR, I notice that at first my component was rendered twice.
The rendering code is

// Server code
app.get("/", (req, res) => {
  const html = renderToString(<App />)
  res.render('index', { html })
})


// Client code
const root = document.getElementById("root")
render(<App />, root)

and the resulting html is

...
<div id="root">
  <div>This is my app.</div>
  <div>This is my app.</div>
</div>
...

When I change the client code to be

// Client code
const root = document.getElementById("root")
render(<App />, document.body, root)

The rendered html appears to be correct

...
<div id="root">
  <div>This is my app.</div>
</div>
...

but I wonder if it was the original html with preact event all hooked up, or if the content was replaced with exactly the same content.

Please help me shed some light on this.

The text was updated successfully, but these errors were encountered:

developit · 2018-04-13T23:30:53Z

Where are you injecting the script tag?

Cinamonas · 2018-04-28T21:56:15Z

@nlhkh, I was running into the same issue. Found a solution in #24.

rattrayalex-stripe · 2018-05-02T19:01:14Z

Hmm, I think I'm also seeing this. With the equivalent of

const root = document.getElementById("root")
render(<App />, root.parentElement, root)

it seems to blow away the contents of root rather than merging in <App /> (the two trees start off the same in my app; I'm seeing a flash of white where I would expect the DOM not to be touched).

rattrayalex-stripe · 2018-05-02T20:07:06Z

React 16 has ReactDOM.hydrate for this purpose: https://reactjs.org/docs/react-dom.html#hydrate perhaps preact should support an equivalent?

developit · 2018-05-17T19:50:41Z

There is no meaningful difference between hydrate() and render() within Preact, since we don't use checksums.

If you're seeing a flash of white or similar, check that you're not rendering something that is initially different from your server-rendered HTML. Also make sure you're interpreting the meaning of "parent" and "root" correctly:

const App = () => <div id="app">foo</div>

// our "server-side render":
document.write('<html><body><div id="root">' + renderToString(<App />) + '</div></body></html>')

// how "hydrate" from that:
render(<App />, document.getElementById('#root'), document.getElementById('#app'))

If you'd like a hydrate method, here's a simple one:

function hydrate(vnode, parent) {
  return preact.render(vnode, parent, parent.firstElementChild);
}

rattrayalex-stripe · 2018-05-17T20:02:33Z

Sweet. This can be closed then, correct?

mfbx9da4 · 2018-09-25T15:59:03Z

@developit Very helpful. Could that go in the docs somewhere?

marconi1992 · 2019-11-15T14:13:09Z

There is no meaningful difference between hydrate() and render() within Preact, since we don't use checksums.

If you're seeing a flash of white or similar, check that you're not rendering something that is initially different from your server-rendered HTML. Also make sure you're interpreting the meaning of "parent" and "root" correctly:
const App = () => <div id="app">foo</div>

// our "server-side render":
document.write('<html><body><div id="root">' + renderToString(<App />) + '</div></body></html>')

// how "hydrate" from that:
render(<App />, document.getElementById('#root'), document.getElementById('#app'))
If you'd like a hydrate method, here's a simple one:
function hydrate(vnode, parent) {
  return preact.render(vnode, parent, parent.firstElementChild);
}

It works when the component has a root element but It doesn't work using Fragment.

For that case is better to use the normal render:

preact.render(vnode, parent);

marvinhagemeister · 2019-11-15T14:35:57Z

For completeness: We do ship with a hydrate function in Preact X. It bypasses all diffing and only attaches event listeners. For it to work you must make sure that the SSR result matches the virtual tree on the client.

st-schneider · 2020-02-17T13:05:50Z

I have the same html tree as on the SSR but I also get flaky hydration results with some intermediate version where HTML is missing.

marvinhagemeister · 2020-02-17T15:38:44Z

@bm-stschneider That sounds suspicious. Can you file a new issue for that?

st-schneider · 2020-02-17T16:05:22Z

I think that was a fault on my part, loading async data and loading that while initializing component elements, now I fetch all data before mounting that seems to work

marvinhagemeister closed this as completed May 18, 2018

stereobooster mentioned this issue Aug 20, 2018

Check if react-snap / headless is running stereobooster/react-snap#245

Closed

stereobooster mentioned this issue Nov 17, 2018

Update documentation stereobooster/react-snap#268

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR rehydrate #1060

SSR rehydrate #1060

khanetor commented Apr 10, 2018 •

edited

developit commented Apr 13, 2018

Cinamonas commented Apr 28, 2018

rattrayalex-stripe commented May 2, 2018

rattrayalex-stripe commented May 2, 2018

developit commented May 17, 2018 •

edited

rattrayalex-stripe commented May 17, 2018

mfbx9da4 commented Sep 25, 2018

marconi1992 commented Nov 15, 2019 •

edited

marvinhagemeister commented Nov 15, 2019

st-schneider commented Feb 17, 2020

marvinhagemeister commented Feb 17, 2020

st-schneider commented Feb 17, 2020

SSR rehydrate #1060

SSR rehydrate #1060

Comments

khanetor commented Apr 10, 2018 • edited

developit commented Apr 13, 2018

Cinamonas commented Apr 28, 2018

rattrayalex-stripe commented May 2, 2018

rattrayalex-stripe commented May 2, 2018

developit commented May 17, 2018 • edited

rattrayalex-stripe commented May 17, 2018

mfbx9da4 commented Sep 25, 2018

marconi1992 commented Nov 15, 2019 • edited

marvinhagemeister commented Nov 15, 2019

st-schneider commented Feb 17, 2020

marvinhagemeister commented Feb 17, 2020

st-schneider commented Feb 17, 2020

khanetor commented Apr 10, 2018 •

edited

developit commented May 17, 2018 •

edited

marconi1992 commented Nov 15, 2019 •

edited