Adding Nuxt 3 SSR to Vue Storefront: What Actually Changes for SEO and LCP

The Problem: Client-Side Rendering Is Hurting Your Storefront

Vue Storefront (VSF) ships as a single-page application by default. The browser downloads a minimal HTML shell, then fetches product data via GraphQL and renders everything on the client. For shoppers on fast connections this feels snappy, but search crawlers and Lighthouse audits see a different story: empty initial HTML, delayed Largest Contentful Paint (LCP), and inconsistent Core Web Vitals scores.

Why Nuxt 3 SSR Changes the Equation

Nuxt 3 adds a server entry point that runs your Vue components on the host, executes the same GraphQL queries, and streams fully formed HTML to the browser. The shopper receives meaningful markup on the first TCP packet, so the browser can start painting before any JavaScript hydrates the page. Hydration then attaches event listeners without a visible flash.

VSF's component library and composables (like useProduct) are framework-agnostic; they already return reactive data from GraphQL. Nuxt 3 simply calls those composables during server render, so you reuse existing queries instead of duplicating data-fetching logic.

Worked Example: Minimal Nuxt 3 Integration

Assume a VSF 2.x codebase on Node 18. Create a nuxt.config.ts at the repo root and a server entry file. The steps below run on your development machine or CI agent with node >=18 and pnpm (or npm/yarn).

# 1. Add Nuxt 3 and the VSF Nuxt module\npnpm add -D nuxt@^3.8 @vue-storefront/nuxt@^2.0\n\n# 2. nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt/config'\nexport default defineNuxtConfig({\n  modules: ['@vue-storefront/nuxt'],\n  ssr: true,\n  vite: {\n    ssr: {\n      noExternal: ['@vue-storefront/*'] // ensure VSF code is bundled for server\n    }\n  },\n  runtimeConfig: {\n    public: {\n      vsfApiUrl: process.env.VSF_API_URL || 'http://localhost:8080/graphql'\n    }\n  }\n})\n\n# 3. server/entry.ts (Nuxt 3 server entry)\nimport { createNuxt } from 'nuxt'\nexport default async () => {\n  const nuxt = await createNuxt({ dev: false })\n  await nuxt.ready()\n  return nuxt.listen(3000)\n}\n\n# 4. Build and start\npnpm nuxt build\nnode .output/server/index.mjs

After the build, visit http://localhost:3000/p/product-slug. View page source: you should see the product name, price, and description inside the HTML—not in a __NUXT_DATA__ script tag alone. That markup is what crawlers index and what LCP measures.

Static Generation for Catalog Pages

Category and search-result pages change less frequently than product detail pages. Nuxt 3's nitro preset: 'static' or prerender: { routes: ['/c/men', '/c/women'] } generates static HTML at build time. Dynamic product pages stay server-rendered. This hybrid approach keeps build times reasonable while delivering instant First Contentful Paint for high-traffic entry points.

Trade-Offs You Will Feel

• Memory pressure: Each concurrent SSR request spins up a Vue component tree. Under load (hundreds of RPS) a single Node process can exceed 1 GB RSS. Plan for horizontal scaling or a caching layer (Varnish, Cloudflare Workers) in front of the Nuxt server.
• Client-only plugins break hydration: Libraries that touch window or document at import time (e.g., certain analytics snippets) throw during server render. Wrap them in if (import.meta.client) or move to a Nuxt plugin with mode: 'client'.
• CI pipeline complexity: You now run two builds—VSF's middleware (if separate) and Nuxt. Pin Node 18+ in .nvmrc and engines in package.json to avoid version drift.

Verify It Works Before Shipping

1. Run pnpm lighthouse --view against the staging URL. Target LCP < 2.5 s and CLS < 0.1.
2. curl the product page and grep for the product title in the raw HTML. If it's missing, SSR didn't execute the query.
3. Check CI logs: both nuxt build and any VSF middleware build must exit 0 with no peer-dependency warnings.

Next Step This Week

Spin up a feature branch, add the Nuxt config above, and deploy to a staging environment behind a feature flag. Measure LCP on real mobile devices (not just Lighthouse lab data). If the numbers hold, promote the branch; if memory spikes appear, add a CDN cache rule for Cache-Control: s-maxage=60, stale-while-revalidate=300 on product pages and re-test. The goal is a measurable Core Web Vitals improvement without rewriting your VSF components.