3 ms·

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

by xmprt 4y ago

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?

tomstuart 4y ago
“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 https://twitter.com/dan_abramov/status/1200118229697486849 [1] https://github.com/reactwg/react-18/discussions/130 https://github.com/reactwg/react-18/discussions/130
- xmprt 4y ago
  Follow up: How does the HTML "remember" the events to replay without any help from Javascript?
  - tomstuart 4y ago
    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.
solardev 4y ago
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 https://news.ycombinator.com/item?id=31727249

3 ms·

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

by xmprt 4y ago

tomstuart 4y ago
“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 https://twitter.com/dan_abramov/status/1200118229697486849 [1] https://github.com/reactwg/react-18/discussions/130 https://github.com/reactwg/react-18/discussions/130
- xmprt 4y ago
  Follow up: How does the HTML "remember" the events to replay without any help from Javascript?
  - tomstuart 4y ago
    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.
solardev 4y ago
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 https://news.ycombinator.com/item?id=31727249