Hacker News Reader

Comment by xmprt | Hacker News Reader

What happens when the user interacts with the page while it's being rehydrated? Is that click eaten, does the user see some error, or does the page remember the click and run it when it has pulled in the relevant js?

View on HN

“The page remembers the click” was the original intent [0], but the latest version of React includes a feature called selective hydration [1] which can hydrate a component synchronously in response to an event if possible (i.e. without replaying the event). Naturally React itself has to be loaded for any of that to work.

[0] https://twitter.com/dan_abramov/status/1200118229697486849

[1] https://github.com/reactwg/react-18/discussions/130

Follow up: How does the HTML "remember" the events to replay without any help from Javascript?

It doesn’t. This only works once React itself (i.e. the JavaScript code for the library) has loaded, which usually happens pretty quickly. The user-written React components might not finish loading until much later.

I am not sure how it works behind the scenes -- honestly, that's one of the drawbacks of Next, in that a lot of it just "black box magic" -- but it still seems to work fine when we throttle down to 3G. I am not sure how it decides which scripts to hydrate in what order... we were saving that optimization run for the end, but I changed jobs before that could occur (sadly).

There are some ways to work around that, if it actually turns out to be an issue (which it wasn't for us)... discussed it a bit more in my other response: https://news.ycombinator.com/item?id=31727249

Reply on news.ycombinator.com