Optimizing Hydration Mismatch in Nuxt 3/Vue SSR

Hydration mismatch occurs when the server-rendered HTML doesn't match the client's initial render state.

Common causes include using non-deterministic data (like Math.random() or new Date()) during render, or modifying the DOM via direct JavaScript before Vue takes over. The architecture should ensure that the initialState (the 'window.__INITIAL_STATE__') provided by the server is exactly what the client uses to seed its reactive stores.