Nuxt SSR 与 Next.js SSR

#🧭 引言

在现代前端生态中，Nuxt（Vue） 与 Next.js（React） 是最成熟的两大全栈框架。
它们都具备 SSR（Server Side Rendering） 能力，但实现原理与运行机制差异巨大。

如果你在使用 Nuxt 构建 SSR 项目，却发现“路由跳转后不再 SSR”，
而在 Next.js 中同样操作却会重新发起服务端渲染——这不是 bug，而是理念差异。

本文将详细对比这两种框架的 SSR 行为，帮助你彻底理解它们的运行机制。

---

#一、Nuxt 的 SSR 模型：传统型 SSR + 客户端路由

#🧩 SSR 触发条件

访问方式	是否 SSR	说明
浏览器直接访问 / 刷新页面	✅ 是	请求打到服务器，Nuxt 服务端生成 HTML
<NuxtLink> / navigateTo() 跳转	❌ 否	客户端路由切换，仅在浏览器渲染
navigateTo('/path', { external: true })	✅ 是	强制整页刷新，重新发起 SSR
服务端重定向（sendRedirect）	✅ 是	浏览器收到 3xx，重新加载页面

🟩 结论：
Nuxt 只在“初次访问”或“整页刷新”时执行 SSR，
页面跳转默认走客户端渲染（CSR）。

---

#⚙️ SSR 渲染流程

复制浏览器请求 → Nitro 接收请求
→ 创建 Vue 实例
→ 执行 useAsyncData / useFetch 等逻辑
→ 渲染 HTML
→ 返回 HTML + payload
→ 浏览器执行 hydrate（水合）
→ 后续导航仅客户端执行

---

#🔁 若想跳转也 SSR

复制navigateTo('/about', { external: true })

这样相当于刷新页面，从而触发新的 SSR。

---

#二、Next.js 的 SSR 模型：现代型 SSR + 流式渲染

#🧱 React Server Components（RSC）

Next.js 13+ 引入 React Server Components (RSC)：

• 页面组件默认在服务器端渲染
• 客户端导航时，仍会从服务器拉取新的 RSC 片段
• 支持流式输出（Streaming）HTML

💡 意味着： 即使用 <Link> 跳转，也可能重新触发服务端渲染！

---

#🔍 SSR 行为对比

场景	Nuxt SSR 行为	Next.js SSR 行为
浏览器直接访问	✅ 服务端完整渲染	✅ 服务端完整渲染
前端导航 (<Link>)	❌ 客户端渲染（CSR）	✅ 可能重新 SSR（RSC 局部渲染）
服务端重定向	✅ SSR	✅ SSR
流式渲染 / 局部刷新	❌ 不支持	✅ 原生支持（Streaming + Suspense）

---

#三、数据获取机制差异

#🔹 Nuxt：useAsyncData() / useFetch()

复制const { data } = await useAsyncData('posts', () => $fetch('/api/posts'))

特性	说明
SSR 阶段执行一次	结果注入到 payload
客户端跳转重新请求	不重新 SSR，仅拉数据
SSR 与 CSR 共用逻辑	使用同样的 composable

---

#🔹 Next.js：fetch() + Server Components

复制async function Page() {
  const res = await fetch('/api/posts', { cache: 'no-store' });
  const data = await res.json();
  return <div>{data.title}</div>;
}

特性	说明
在服务端执行	默认使用 Server Components
可控制缓存	revalidate 实现 ISR
客户端导航时	仍会请求服务端重新渲染 RSC
粒度更细	可组件级 SSR 与流式更新

---

#四、理念上的根本区别

框架	SSR 定位	渲染方式	核心理念
Nuxt	首屏 SSR + 后续 SPA	页面级 SSR	SSR 是“增强功能”
Next.js	全局 Server-first	组件级 SSR + Streaming	SSR 是“核心架构”

---

#五、缓存与再生（ISR / SWR）

框架	实现方式	示例
Nuxt	通过 routeRules 配置页面级 SWR 缓存	'/blog/**': { swr: 300 }
Next.js	通过 fetch 或 revalidate 声明周期控制	export const revalidate = 300;

---

#六、导航行为对比总结

场景	Nuxt	Next.js
首次访问	SSR	SSR
跳转导航	CSR	RSC 局部 SSR
数据拉取	useAsyncData / useFetch	fetch (Server)
缓存机制	routeRules.swr	revalidate
SSR 范围	整页	组件级、流式
核心引擎	Nitro	Edge Runtime / Node

---

#七、开发体验对比

对比项	Nuxt	Next.js
上手难度	Vue 风格，简单直观	React + RSC，概念更多
灵活性	SSR / SSG / SPA 混合	局部 SSR、流式渲染
性能表现	首屏快、交互流畅	首屏极快、可边渲染边加载
适用场景	博客、后台、门户	SaaS、平台型、内容站点

---

#八、核心总结

🟩 Nuxt SSR：首屏 SSR + 客户端渲染（传统型）
🟦 Next.js SSR：组件级 SSR + 流式渲染（现代型）

• 在 Nuxt 中：只有刷新或首屏访问会 SSR；
• 在 Next.js 中：即使客户端跳转，也可能重新 SSR（RSC 支持）。

---

#✍️ 作者笔记

• Nuxt：前后端分离架构，SSR 用于首屏与 SEO。
• Next.js：全栈架构，服务端可持续参与渲染。
• 两者名字相同的“SSR”，本质却完全不同：
  • 🟩 Nuxt：一次性 SSR；
  • 🟦 Next：持续 SSR（RSC 驱动）。