Nuxt.js：服务端渲染与SPA是否互斥？部署及混合场景疑问

1. Are Server Rendered (SSR) and SPA mutually exclusive in Nuxt.js? #

Absolutely not! This is a super common misconception. Nuxt.js is built to let you blend these two approaches seamlessly. Here’s what that looks like in practice:

• You can split your app: some pages render server-side (for better SEO and fast initial load) while others run as pure SPA pages (like a user dashboard that doesn’t need search indexing).
• Even individual SSR pages shift into SPA mode after the initial server-rendered load. Once the client-side Vue app hydrates, all subsequent navigation and interactions happen client-side—no full page reloads, just like a traditional SPA.

2. Does Nuxt.js's SPA mode mean no initial server-side rendering is possible? #

Let’s break down the three deployment modes from the Production Deployment docs first to clear this up:

• Server Rendered: The app runs on a server, rendering each page on demand before sending it to the client. After hydration, it acts like an SPA.
• SPA: The entire app is served as static files, with all rendering happening client-side. This mode does skip initial SSR entirely.
• Static Generated: Pre-renders all pages at build time into static HTML files, which are served directly. This gives you initial "server-rendered" content without needing a running server post-deployment.

So to answer your question: If you’re using the pure SPA deployment mode, yes, there’s no initial SSR. But that doesn’t mean Nuxt can’t deliver both initial SSR and SPA features—you just use the Server Rendered or Static Generated modes instead. The confusion often comes from mixing up "SPA features" (client-side interactivity) with the "SPA deployment mode" (pure client-side rendering).

3. Can Nuxt.js handle an app with multiple SSR pages, each needing SPA features (rich client-side behavior)? #

This is actually one of Nuxt’s core strengths! Here’s how it works:

• Every SSR-rendered page gets sent to the client as fully rendered HTML (perfect for SEO and fast perceived load times).
• Once the client-side Vue app hydrates, that page becomes a fully functional Vue component with all the SPA features you’d expect: reactive data, client-side routing (no full page reloads between Nuxt pages), dynamic component updates, and access to browser APIs.
• You can even add client-only parts to SSR pages using the <client-only> tag for things like interactive charts or third-party widgets that only work in the browser.
• If you need fine-grained control, you can set rendering modes per page (e.g., add ssr: false to specific pages if needed, while keeping others as SSR).

内容的提问来源于stack exchange，提问作者LongHike