Using Vuestorefront's SSR with Nuxt 3 useAsyncData to Fetch Product Data

Useful answer

\n

Vuestorefront projects are Nuxt 3 applications, so enabling server‑side rendering (SSR) is automatic when you start the app with nuxt start or npm run dev. The page HTML is generated on the server, then hydrated on the client.

\n\n

Mechanism: fetching product data with useAsyncData

\n

To get product information during the initial render, create a composable that calls the VSF API inside useAsyncData. The composable ensures the request runs only on the server for the first request and is reused on the client after hydration.

\n\n

Example composable

\n

// composables/useProduct.ts\nimport { useAsyncData } from '#app'\nexport function useProduct(productId: string) {\n  return useAsyncData(\n    `product-${productId}`,\n    () => $vsf.api.getProduct(productId),\n    { server: true }\n  )\n}\n

\n\n

Minimal page usage

\n

When the page is requested, Nuxt executes the composable on the server, fetches the product via $vsf.api.getProduct, injects the result into the rendered HTML, and sends the HTML to the browser. After hydration, the same composable returns the cached data, preventing a second request.

\n\n

Limits and common mistakes

\n

\n
1. Placing useAsyncData inside a component that only renders on the browser means the server will not run the fetch, leading to a request after hydration and a possible mismatch.
\n
2. Fetching after navigation without resetting the key causes Nuxt to reuse stale data for different product IDs. Always include the ID in the key.
\n
3. Relying on default caching without headers can lead to stale product data when the backend updates inventory frequently. Add a custom default or getCachedData strategy, or set appropriate Cache-Control headers on the API responses.
\n

\n\n

Verification

\n

\n
1. Create a fresh project: npm create @vuestorefront/ui my-shop.
\n
2. Run npm run dev and open the network tab; the initial HTML response should contain the product name.
\n
3. Disable JavaScript in the browser and reload; the product name remains visible, confirming SSR.
\n
4. Check the server console: you should see a single line like getProduct called for id=XYZ per page load.
\n