fastify-vite lets you define Fastify route-level hooks directly in your view files, as long as you use the
loadRoutes() method provided by your chosen renderer adapter.
Below is a quick rundown of all Fastify route-level hooks available:
The following examples for Vue and React demonstrate how to leverage automatic client hydration for
req.$data —— that is made available on the client as
useHydration() —— from Fastify's
onRequest route hook. To make it absolutely crystal clear:
onRequest data client hydration example
3. Hydration takes place on client entry point with
4. Hydrated data available via
Bear in mind
ctx.$data would no longer be populated following client-side navigation (History API) in these examples. For this you need to ensure data can be retrieved from the client as well. Route Hooks work best to power first render specific tasks before Route Payloads and Isomorphic Data.