Context: Context and the server

Context and the server

renderToString, renderToStringAsync and renderToStream use the same providers; the provider builds its subtree once.

For agentsUpdated 2026-10-20

renderToString, renderToStringAsync and renderToStream use the same providers; the provider builds its subtree once. Because each server render creates its own owner tree, per-request values belong in a provider, not in a module variable. See SSR, hydration and streaming.

src/context-ssr.tsxtsx

import { createContext, useContext } from "@shadow-js/core";
import { renderToString } from "@shadow-js/web/server";

const Theme = createContext<string>("light");

function Label() {
  return <p>{useContext(Theme)}</p>;
}

console.log(
  renderToString(() => (
    <Theme.Provider value="dark">
      <Label />
    </Theme.Provider>
  )),
);

Expected output

<p data-hk="0-0-0-0"><!--[-->dark<!--]--></p>