intermediate

SSR and SSG

Choose server rendering, static generation, hybrid rendering, caching, and hydration boundaries deliberately.

Nuxt can render on the server (SSR), pre-render at build (SSG/prerender), or hydrate a client-only SPA. `routeRules` and nitro prerender config tune per-path behavior.

| Mode | First byte | Freshness | Hosting | |------|------------|-----------|---------| | SSR | Server HTML each request | High | Needs Node/server | | SSG | Static HTML at build | Stale until rebuild | CDN-friendly | | SPA | Shell + client fetch | Client-driven | Simple static host |

Hydration attaches client Vue to server HTML — mismatches cause warnings and broken UI. Guard browser-only APIs with `import.meta.client` or `onMounted`.

On interviews: when hybrid rules beat global SSR, caching at CDN versus server, and hydration boundary for widgets that need `window`.

Common pitfalls: Date/random in SSR markup, third-party scripts altering DOM before hydrate, and disabling SSR without measuring SEO impact.

The trade-off is fresher server HTML and SEO versus hosting cost and hydration complexity.

Checklist:

Pick mode per route/product need.
Keep SSR markup deterministic.
Defer client-only widgets.
Measure TTFB and LCP per mode.