a: {pageProps.a}
\nb: {pageProps.b}
\nc: {pageProps.c.join(', ')}
\n{name} — {role}
\n}\n```\n\n```tsx\n// app/user-info.tsx (\"use client\")\n\"use client\"\n\nimport { clientStorage } from '@/storage.client'\n\nexport default function UserInfoClient() {\n const [name] = clientStorage.user.name.useState()\n const [role] = clientStorage.user.role.useState()\n\n return{name} — {role}
\n}\n```\n\n#### Multiple independent storage trees\n\nBecause each `serverify`/`clientify` pair is bound to its own React context, you can have multiple independent providers active at the same time — for example, a layout-level store and a page-level store — without them interfering with each other. Pass a `clientContext` to link the server and client sides of each tree:\n\n```ts\n// layout.storage.server.ts\nimport { createContext } from 'react'\nexport const LayoutClientContext = createContext({})\nexport const layoutServerStorage = serverify(layoutStorage, { clientContext: LayoutClientContext })\n\n// layout.storage.client.ts (\"use client\")\n\"use client\"\nexport const layoutClientStorage = clientify(layoutStorage, { clientContext: LayoutClientContext })\n\n// page.storage.server.ts\nimport { createContext } from 'react'\nexport const PageClientContext = createContext({})\nexport const pageServerStorage = serverify(pageStorage, { clientContext: PageClientContext })\n\n// page.storage.client.ts (\"use client\")\n\"use client\"\nexport const pageClientStorage = clientify(pageStorage, { clientContext: PageClientContext })\n```\n\nEach `StateVocabProvider` wraps its own subtree; a component that calls `pageClientStorage.user.name.useState()` reads only from the nearest `pageServerStorage.StateVocabProvider`, not from the layout provider.\n\n#### Next.js App Router: layout and page are isolated contexts\n\nIn Next.js App Router, **layouts do not re-render during client-side navigation between pages**. Layout and page run as independent React render passes — the layout renders once on entry and stays mounted; the page renders fresh on every navigation.\n\nBecause `React.cache()` (which backs the per-request server store) is scoped to a single render pass, layout and page never share the same cache scope:\n\n- A page server component **cannot** call `layoutServerStorage.someField.getState()` — the layout's `StateVocabProvider` ran in a separate pass, so its vocab is not in the page's cache scope.\n- A layout server component **cannot** call `pageServerStorage.someField.getState()` for the same reason.\n- **Each storage tree must be both seeded and consumed within the same route segment.**\n\n```tsx\n// ✅ Correct — layout seeds and reads from its own storage\n// app/(dashboard)/layout.tsx\nconst LayoutProvider = layoutServerStorage.StateVocabProvider\nexport default async function Layout({ children }) {\n return (\n