{
  "id": 7997189,
  "title": "Isomorphic hydration in Fitz: first paint on the server, then WASM adopts the DOM",
  "url": "https://urgent.news/2026/09/17/isomorphic-hydration-in-fitz-first-paint-on-the-server-then-wasm",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-17T09:20:53.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/martin_palopoli/isomorphic-hydration-in-fitz-first-paint-on-the-server-then-wasm-adopts-the-dom-35he"
  },
  "original_language": "en",
  "account": "Fitz offers a method called isomorphic hydration, which combines server-side rendering and client-side adoption of the exact DOM. The server generates HTML for the first paint, which improves SEO and works without JavaScript. Following this, the client-side WASM runtime takes over the existing DOM, retaining the serialized state from the server and maintaining the node structure. This approach eliminates the need for a flash or lost DOM identity, addressing the common issue of hydration mismatch. Unlike traditional approaches, Fitz's client is a full-fledged application, not merely a framework runtime. The server-side rendering is achieved by compiling the component twice: once as server HTML and once as a standalone WASM app. The hydration process is initiated by calling the hydrate() function, which restores the serialized state from a script tag embedded in the server's HTML. It then walks the existing DOM, mapping each node to its corresponding keep-node handles used during the initial build process. Event listeners are wired to the adopted nodes, enabling seamless updates to state without requiring a full page rebuild. The end-to-end verification demonstrates that the node was adopted rather than recreated. The implementation details include the use of opt-in markers, support for composite state restoration, and handling of various component shapes. Overall, Fitz's approach to hydration combines the benefits of server-side rendering with the efficiency of client-side adoption, resulting in a seamless user experience without the drawbacks typically associated with such techniques.",
  "summary": "TL;DR — Mark a component hydrate and the same .fitzv does two jobs: the server renders it to HTML for a fast first paint (SEO, works-without-JS), and on boot the client-WASM runtime adopts that exact DOM — restoring the serialized state from an embedded <script> , walking the existing nodes, and wiring the event listeners — instead of wiping and rebuilding. No re-render flash, no lost DOM…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "Dev.to",
        "title": "Hidratación isomórfica en Fitz: first paint en el server, y después WASM adopta el DOM",
        "url": "https://urgent.news/2026/09/17/hidratacion-isomorfica-en-fitz-first-paint-en-el-server-y-despues",
        "published": "2026-09-17T09:19:49.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}