Hydration cost

Hydrating server HTML does not clone templates: it claims the elements the server sent, by key. The client attaches bindings and handlers to existing DOM. A normal client render creates template instances; hydration reuses the server’s elements when their keys match:

import { For } from "@shadow-js/web";

export function Names(props: { names: string[] }) {
  return (
    <ul>
      <For each={props.names}>{(name) => <li>{name}</li>}</For>
    </ul>
  );
}

export function Page() {
  return <Names names={["Ada", "Grace", "Linus"]} />;
}

Costs that remain on the client after hydration: running every component once (to create bindings), creating the effects, and downloading the code. Reduce them with route-level lazy components and by keeping interactive islands small. HTML that the client does not need to attach behavior to still costs nothing but its bytes. Streaming (SSR, hydration and streaming) sends the shell and each Suspense boundary as soon as it is ready, which improves first paint without changing the hydration cost.