Senior LevelVue JS
How does Pinia handle server-side rendering state serialization and client-side rehydration in Nuxt 3?
❓ Interview Prompt: Explain Pinia SSR hydration pipeline, state serialization into window.__NUXT__.state, and avoiding cross-request state pollution.
In SSR applications (Nuxt 3), Pinia stores must handle state serialization across the server-client boundary cleanly.
The Hydration Pipeline:
1
Server Phase: Pinia executes actions during SSR data fetching. At the end of request rendering, Pinia serializes all active store states into a JSON string embedded in the HTML payload ('window.__NUXT__.state').
2
Client Hydration Phase: When the browser loads the page, Pinia reads the embedded JSON payload and rehydrates client-side store instances automatically before mounting components!
•
Preventing Cross-Request Pollution: Always instantiate Pinia per-request inside the SSR request context; never store Pinia instances in global Node.js module variables!
Code Implementation Example
typescript
// Conceptual representation of Pinia SSR State Hydration in Nuxt 3
// Server phase: Serializes store state into HTML payload script tag
// Client phase: Rehydrates store instance:
if (process.client && window.__NUXT__?.pinia) {
pinia.state.value = window.__NUXT__.pinia;
}💡Pinia state serialization and client-side rehydration in Nuxt 3 SSR.
🎯 Interview Key Takeaway
Pinia serializes store state during SSR into the HTML payload, rehydrating client stores before component mounting.
#Pinia#SSR#Hydration#Nuxt 3#Senior
Back to all Vue JS Questions→