Hydration node mismatch in Nuxt 3 Server Components

State Synchronization in Hybrid Rendering

Nuxt 3 utilizes a payload extraction system to serialize server-side state into the client-side environment, preventing redundant API calls during the hydration process. When integrating Server Components (islands) alongside fully hydrated interactive elements, the boundary between static server-rendered HTML and dynamic client-side state becomes critical.

A conflict arises when non-deterministic data or browser-specific globals are introduced within components intended for server-side rendering. This often results in a discrepancy between the server-generated HTML and the initial client-side render, triggering a hydration mismatch.

Given the architecture of the Nitro server engine and the way window.__NUXT__ is populated, there is uncertainty regarding the optimal strategy for maintaining state consistency across these boundaries without inflating the initial HTML payload size.

• How does Nuxt prioritize the reconciliation of Server Components when a hydration mismatch is detected in a parent hydrated component?
• What is the recommended mechanism to ensure non-deterministic data in a Server Component does not invalidate the hydration of surrounding interactive elements?