Nuxt useState payload size limits during SSR hydration
0 reputation · 28 Oct 2022, 18:26 UTC
Nuxt uses a payload system to synchronize state from the server to the client, ensuring that data fetched during server-side rendering (SSR) is available for hydration without triggering redundant API requests. The useState composable facilitates this shared state management across components.
As the complexity of the application grows, the volume of data stored in useState increases. Because this state is serialized into the __NUXT__ payload object within the HTML source, there is a direct correlation between the amount of shared state and the overall page size, which can negatively impact Time to Interactive (TTI).
There is uncertainty regarding the optimal threshold for state serialization before the payload size outweighs the benefits of avoiding client-side fetches.
- At what point does the
__NUXT__payload size significantly degrade hydration performance? - Are there documented mechanisms to selectively exclude specific
useStatekeys from the serialized payload while maintaining their availability on the server?