Skip to content

Dehydrate & Hydrate

StateMesh supports full state serialization and restoration. Use this for SSR, testing, cache transfer, and app restore.

Full Mesh Dehydrate/Hydrate

ts
// Snapshot everything
const snapshot = mesh.dehydrate({
  forms: true,
  resources: true,
  queuedMutations: true
});

// Restore everything
mesh.hydrate(snapshot, {
  mergeState: true,
  resources: true,
  queuedMutations: true
});

Resource Cache Only

ts
// Snapshot resource cache
const snapshot = mesh.dehydrateResources({ tags: [{ type: "products" }] });

// Restore on client
mesh.hydrateResources(window.__STATEMESH_RESOURCES__);

SSR Pattern

ts
// Server
const mesh = createMesh({ state: { /* ... */ } });
const snapshot = mesh.dehydrate();
res.send(`
  <div id="root">${renderToString(<App mesh={mesh} />)}</div>
  <script>window.__STATEMESH__ = ${JSON.stringify(snapshot)}</script>
`);

// Client
const mesh = createMesh({ state: { /* ... */ } });
mesh.hydrate(window.__STATEMESH__);
hydrateRoot(document.getElementById("root"), <App mesh={mesh} />);

Important Notes

TIP

Dehydrate returns a plain JSON-serializable object. It can be stored in localStorage, sent over the network, or embedded in HTML.

WARNING

Always validate and sanitize deserialized data before hydrating. Use the same version/migration checks as persistence.

Next Steps

Released under the MIT License.