Rendering & Architecture Hydration & Serialisation

15. Hydration Engines & Data Serialisation

Examine the client hydration lifecycle, partial/island hydration models, streaming SSR, and safe complex data serialisation with devalue.

hydration-serialization.ts
typescript 
// Complex Data Serialisation across the Network Boundary
import { stringify, parse } from 'devalue';
// Objects containing Dates, Sets, Maps, BigInts, and Circular References
const complexPayload = {
  sessionId: 9007199254740993n, // BigInt
  timestamp: new Date('2026-09-10T10:00:00Z'),
  activeTags: new Set(['web-standards', 'nitro', 'bun']),
  metricCache: new Map([['us-east', 14.2], ['eu-central', 8.6]])
};
// devalue encodes complex JS types safely without data loss
const serialised = stringify(complexPayload);
const reconstructed = parse(serialised);
console.log(reconstructed.sessionId === 9007199254740993n); // true
console.log(reconstructed.activeTags instanceof Set);       // true

Hydration Engines & Data Serialisation

Passing state across the server-to-client boundary requires specialised serialisers like devalue or SuperJSON that preserve complex JavaScript data structures.

  • Standard JSON Limitations: JSON.stringify converts Date objects to strings, loses Set / Map prototypes, and throws on BigInt.
  • devalue Engine: Powers SvelteKit and Nuxt payload transfers by serialising circular references, custom prototypes, and native ECMAScript data structures safely.
  • Hydration Mismatch Prevention: Guarantees identical client state recreation on the initial load without re-triggering network fetches.
SSR Serialisation Protocol Comparison devalue vs JSON
Serialised Wire Format: 
[{"timestamp":1,"bigInt":2,"tags":3},new Date(1789034400000),9007199254740993n,new Set([4,5]),"svelte5","nitro"]
Type Retention Fidelity:

Zero loss: Exact JavaScript type fidelity preserved, handles circular references and undefined

Assessment:

High fidelity (Standard SvelteKit & Nuxt SSR serialisation)

←
14. Rendering Strategies: SSG, SSR, Hybrid & CSR
16. Security: Strict CSP, Nonces & View Transitions
→