Fast, SEO‑Friendly Product Pages in Vue Storefront 2 with Incremental Static Regeneration

Why the Current Product Page Flow Feels Slow

In a typical Vue Storefront (VSF) 2.x setup, each product detail page is rendered on the fly by the Nuxt 3 server. The page fetches data from a headless commerce API, renders the Vue components, and streams the result back to the browser. While this Server‑Side Rendering (SSR) guarantees fresh data, it also introduces a noticeable latency: the first request to a new product can take 600–900 ms, and the generated HTML is often thin on SEO metadata.

For e‑commerce sites, this delay hurts Core Web Vitals and can cause search engines to penalise pages that appear “slow” or “incomplete.” The goal is to keep the data fresh but serve it from a pre‑rendered cache that browsers and crawlers can consume instantly.

Enter Incremental Static Regeneration (ISR)

ISR is Nuxt 3’s feature that lets you pre‑render pages at build time and then regenerate them on demand when the underlying data changes. Think of it as a hybrid between static site generation (SSG) and SSR:

• Static at first request: The page is generated and stored in a CDN or local cache.
• Background refresh: When a product is updated, a webhook or API call triggers a rebuild of only that page.
• Fast TTFB: Subsequent visitors receive the cached HTML in <200 ms.
• SEO ready: The pre‑rendered HTML contains all meta tags, schema.org markup, and no client‑side hydration needed for crawlers.

Enabling ISR in a VSF 2.x Project

Step 1 – Export getStaticProps

In a Nuxt 3 page component (e.g., pages/product/[id].vue), add the getStaticProps function. It receives the route parameters and should return the props that the page component will consume.

// pages/product/[id].vue