Signature

interface Hydration {
  rootError?: boolean;
  root: unknown;
  snapshot: Snapshot;
}

Shape

root contains the initial shared root loader data. snapshot is a Snapshot with the current absolute URL, route path, parameters, state, and optional loader/action data or error. Scripts writes this structure into #smolter-data; mountApplication reads it.

import type { Hydration } from "@kasperrt/smolter/preact";

const hydration: Hydration = {
  root: { displayName: "Ada" },
  snapshot: {
    url: "https://example.test/tasks",
    path: "/tasks",
    params: {},
    state: "idle",
    loaded: true,
    data: { tasks: [] },
  },
};

Serialization and loading state

Use the document Scripts component for the application bootstrap instead of manually interpolating JSON into a script element. It escapes script-breaking text and includes the initial snapshot only. An idle hydrated router does not repeat its initial load. A server snapshot that still needs a client loader retains its loading state so the browser can complete it.

Errors and updates

Scripts serializes an error name, message, and enumerable metadata. mountApplication restores an Error instance before constructing the router. Later navigation and revalidation update router state, not the original hydration script. Hydration contains browser-visible data, not executable handlers or components.

Fields

rootError?: boolean;

root: unknown;

snapshot: Snapshot;