Nuxt 3 useFetch and Client-Side Hydration: Managing State Synchronization

Isomorphic Data Fetching and State Transfer

Nuxt 3 employs useFetch and useAsyncData to synchronize data between the server and client. During the initial request, the server fetches the data and serializes the result into the payload, allowing the client to hydrate the state without triggering a redundant network request.

Hydration Boundary Constraints

The stability of this process relies on the key property to uniquely identify requests. If the key is dynamically generated or inconsistent between the server-side render and the client-side hydration, the application may trigger a duplicate fetch, potentially leading to hydration mismatches or UI flickering.

When implementing manual data re-validation via the refresh function, there is uncertainty regarding how the internal state is updated relative to the serialized payload during the transition from server-rendered state to client-managed state.

• How does Nuxt 3 resolve conflicts if a refresh is triggered immediately upon hydration?
• What is the impact on the payload size when using unique keys for a large number of concurrent useAsyncData calls?