Qwik useStore serialization boundaries for non-POJO state

Answer

In a production build Qwik’s serializer keeps only values that can be represented as plain JSON: string, number, boolean, null, plain objects, and arrays. Anything that is not a plain object/array or that contains a function is automatically omitted from the HTML snapshot used for resumability.

• Functions, arrow functions, and any property whose value is a function are dropped.
• Class instances (including Date, Map, Set, RegExp, Promise, etc.) are stripped because they cannot be represented in JSON.
• Objects that carry prototype chains other than Object.prototype are also omitted.

When a value is omitted, the store still remains reactive on the client; the property simply never appears in the serialized HTML. If you need a value to survive across the server‑client boundary, it must be a plain JSON‑serializable type or be reconstructed on the client after hydration.

Selective Exclusion with the $$ Flag

Qwik offers a lightweight convention to mark individual properties (or the entire store) as “non‑serializable” while preserving reactivity. Add a $$ property set to true on the value you want to keep out of the snapshot:

const store = useStore({
  count: 0,
  // a Date that should not be serialized
  createdAt: new Date(),
  createdAt.$$ = true,
  // a method that must stay on the client
  increment() { this.count++; }
});

During serialization Qwik checks for value.$$ === true and skips writing that property. The property remains part of the proxy, so reactive updates continue to work after hydration.

Marking the Entire Store

To exclude every property, set store.$$ = true. The store will be excluded from the HTML, but the proxy will still be available on the client.

Practical Verification Steps

1. Create a component that stores a Date, a function, and a class instance.
2. Build the project with npm run build (production).
3. Open the generated index.html and confirm that only the Date appears as an ISO string; the function and class instance are missing.
4. Add $$ = true to the non‑serializable properties and rebuild.
5. Verify that the properties remain accessible and reactive in the browser console after the page loads.

Things to Keep in Mind

• The $$ flag is a framework‑specific convention; misuse can break serialization or reactivity.
• Non‑serializable data required on the client must be recreated after hydration (e.g., re‑instantiating a class).
• The exact set of omitted types can evolve between Qwik releases; always check the current documentation for your target version.