If data is retrieved on the server during SSR and is used to generate any fragment of the rendered markup, the same data needs to be made available on the client prior to initialization. Or the same data needs to be retrieved, on the client, prior to initialization. Of course this is non-ideal, if an API call already took place on the server, there's no reason to repeat it client-side for first-render.
A common technique for solving this problem is to append a
<script> snippet to the rendered markup containing serialized data, so it can be picked up (hydrated) during app initialization. Nuxt.js and Next.js use
__NEXT_DATA__ for this, respectively.
fastify-vite uses a similar approach, while allowing for a deep level of customization. For instance, below is the code used to generate the serialized hydration data for fastify-vite-vue and fastify-vite-react renderer adapters. The function used in both is identical, and can be overriden if you set the
render.getHydrationScript option with a function of your own.
The first parameter it receives is Fastify's Request object, followed by the SSR rendering
context and the
hydration key from the plugin options. Typically you won't want to change these.
On the client, you can use the
hydrate() function provided by fastify-vite-vue/client:
Both are practically the same, and like
getHydrationScript(), can also very easily be replaced with your own if you need to. In that case you'd provide it directly in your application's client entry point instead of importing from fastify-vite-vue/client or fastify-vite-react/client.