💚 Vue.js Intermediate

What is Vue's server-side rendering (SSR) with Nuxt?

Why Interviewers Ask This

Candidates at the intermediate level are expected to not only know this concept but explain the trade-offs involved. Interviewers use this question to see if you can reason about design decisions, not just recall facts.

Answer

Nuxt.js is a meta-framework built on Vue that enables server-side rendering (SSR), static site generation (SSG), and other full-stack features with Vue. Rendering modes: (1) Universal (SSR): renders on server first, then hydrates on client. Best for SEO and initial load performance; (2) SPA: renders entirely on client (no SSR). Like plain Vue; (3) Static (SSG): pre-renders all pages at build time to static HTML files. Best performance, no server needed; (4) Hybrid rendering (Nuxt 3): configure per-route — some routes SSR, others static, others SPA. Nuxt 3 features: auto-imports (no explicit imports for components, composables), file-based routing (files in pages/ → routes), layouts, middleware, plugins, server API routes (server/api/ files), nuxt.config.ts for configuration. useAsyncData / useFetch: const { data, pending, error } = await useFetch("/api/posts") — fetches on server during SSR, uses cache on client navigation. Deduplicates between server and client. useState: const counter = useState("counter", () => 0) — SSR-friendly reactive state that persists from server to client during hydration. SSR considerations: no window/document in server context; use process.client guard; useHead() for meta tags; cookies accessible on both client and server; nuxt-auth, nuxt-content, nuxt-image ecosystem modules.

Pro Tip

Back up your answer with a specific project or situation. Saying 'In my last Vue.js project, I used this when...' immediately makes your answer more credible and memorable.