The Perils of Rehydration | Josh W. Comeau

A great explanation of why two-pass rendering is a useful mental model to consider when working with server-side rendering/SSGs like Gatsby and JavaScript frameworks. The main point? Rehydration ≠ rendering, so don't load dynamic content until rehydration is finished if you want to avoid weird layout bugs and jankiness; use hooks or "Client-only" component abstractions instead.

Critically, rehydration is not the same thing as a render. In a typical render, when props or state change, React is prepared to reconcile any differences and update the DOM. In a rehydration, React assumes that the DOM won't change. It's just trying to adopt the existing DOM.

Explore Other Notes

Newer

The CSS Cascade

I don't think I've come across a clearer explanation of the full cascade before, nor one so beautifully crafted. An excellent resource and …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>A great explanation of why <strong>two-pass rendering</strong> is a useful mental model to consider when working with server-side rendering/SSGs like Gatsby and JavaScript frameworks. The main point? …</p> </body> </html>
  • Murray Adcock.
Journal permalink