Nuxt 的 “SSR渲染”

布莱克2026-05-08 18:53

Tip:文章封面与内容无关，作者旅游时拍摄，因为没什么值得把四季都错过！🌊 🌵 🌴 ✈️

什么是 SSR？

传统 SPA 的两大痛点

传统的单页应用（如纯 Vue/React）采用客户端渲染（CSR），浏览器下载空的 HTML 骨架，然后用 JavaScript 动态填充内容。这导致了两个核心问题：

问题一：首屏白屏时间过长

<!-- 传统 SPA 的初始 HTML -->
<!DOCTYPE html>
<html>
<head><title>Loading...</title></head>
<body>
  <div id="app"></div>  <!-- 空空如也！ -->
  <script src="/js/chunk-vendors.js"></script>
  <script src="/js/app.js"></script>
</body>
</html>

用户需要等待 JS 下载、解析、执行完成后才能看到内容，在弱网环境下体验极差。

问题二：SEO 不友好
搜索引擎爬虫抓取页面时，看到的是空白的 HTML，无法获取页面的真实内容，导致排名低下。

SSR 如何解决这些问题？

服务端渲染（Server-Side Rendering）在服务器上直接生成完整的 HTML 字符串返回给浏览器：

带来的好处：

✅ 用户立即看到内容（无需等待 JS）
✅ 搜索引擎能抓取到完整内容
✅ 社交媒体分享时能正确显示标题、描述和图片

Nuxt SSR 的核心原理

Nuxt 实现了一种 "同构渲染"（混合渲染）（Universal Rendering） 策略：同一份 Vue 组件代码，既能在服务端运行生成 HTML，又能在客户端运行实现交互。

首次加载：完整的 SSR 流程

服务器接收请求后，执行页面的所有异步操作（useFetch、useAsyncData）
数据获取完成后，将 Vue 组件渲染成 HTML 字符串
将初始状态序列化后嵌入 window.__NUXT__
返回完整 HTML 给浏览器

后续导航：纯客户端渲染

哪些场景会触发 SSR？

操作方式	渲染模式	是否执行 SSR	Network 中能看到 API 请求？
直接在地址栏输入 URL	SSR	✅ 是	❌ 看不到
刷新页面（F5 / Cmd+R）	SSR	✅ 是	❌ 看不到
从外部链接跳转（Google 搜索）	SSR	✅ 是	❌ 看不到
新标签页打开链接	SSR	✅ 是	❌ 看不到
点击 `<NuxtLink>`	CSR	❌ 否	✅ 看得到
调用 `navigateTo()`	CSR	❌ 否	✅ 看得到
调用 `router.push()`	CSR	❌ 否	✅ 看得到

每次直接访问（刷新、新标签页、外部链接）都是 SSR，只有客户端路由跳转才是 CSR

Nuxt SSR 的适用场景

场景	为什么适合 SSR
内容型网站（博客、文档、新闻）	SEO 要求高，首屏加载速度重要
电商网站	产品页面需要被搜索引擎索引
营销落地页	需要快速展示内容，社交媒体分享需要正确预览
企业官网	品牌形象需要好的 SEO 表现