news 2026/5/5 6:17:31

进阶篇一 Nuxt4 SSR 原理：服务端渲染到底做了什么

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
进阶篇一 Nuxt4 SSR 原理：服务端渲染到底做了什么

文章目录

    • 一、什么是 SSR
    • 二、Nuxt SSR 流程
    • 三、服务端渲染过程
      • 1. 路由匹配
      • 2. 执行 asyncData
      • 3. 渲染组件
      • 4. 生成完整页面
    • 四、Hydration 是什么
      • Hydration 过程：
      • Hydration 不匹配错误
    • 五、数据传递机制
    • 六、只在客户端执行
    • 七、只在服务端执行
    • 八、服务端上下文
    • 九、SSR 的代价
    • 十、调试 SSR
    • 总结

面试经常被问：“说说 SSR 的原理”。很多人只能答出"在服务端渲染页面"，但具体怎么渲染、数据怎么传递、hydration 是什么……一问三不知。今天我们来彻底搞懂 SSR。

一、什么是 SSR

SSR（Server-Side Rendering），服务端渲染。简单说：页面在服务器生成 HTML，浏览器直接显示。

对比 CSR（Client-Side Rendering）：

CSR 流程： 1. 浏览器请求页面 2. 服务器返回空 HTML + JS 3. 浏览器下载执行 JS 4. JS 请求数据 5. JS 渲染页面 SSR 流程： 1. 浏览器请求页面 2. 服务器执行 JS 获取数据 3. 服务器渲染 HTML 4. 返回完整 HTML 5. 浏览器直接显示

SSR 的好处：

  • 首屏快：不需要等 JS 执行
  • SEO 友好：爬虫能直接看到内容
  • 社交分享：能正确抓取 meta 信息

二、Nuxt SSR 流程

Nuxt 的 SSR 流程更复杂一些：

┌─────────────┐ │ Browser │ └──────┬──────┘ │ 1. 请求页面 ▼ ┌─────────────┐ │ Nuxt Server │ ──> 2. 匹配路由 │ (Nitro) │ ──> 3. 执行中间件 └──────┬──────┘ ──> 4. 执行 asyncData │ 5. 渲染 Vue 组件 │ 6. 返回 HTML ▼ ┌─────────────┐ │ Browser │ ──> 7. 显示 HTML └──────┬──────┘ ──> 8. 加载 JS │ 9. Hydration ▼ ┌─────────────┐ │ Interactive │ ──> 10. 页面可交互 └─────────────┘

三、服务端渲染过程

当用户访问/article/123时：

1. 路由匹配

Nuxt 根据请求路径匹配对应的页面组件：

// 请求 /article/123// 匹配 pages/article/[id].vue

2. 执行 asyncData

在服务端执行数据获取：

<script setup lang="ts"> const route = useRoute() const { data: article } = await useFetch(`/api/articles/${route.params.id}`) </script>

useFetch在服务端会真实发起请求，获取数据。

3. 渲染组件

Vue 将组件渲染成 HTML 字符串：

<article><h1>文章标题</h1><p>文章内容...</p></article>

4. 生成完整页面

Nuxt 将组件 HTML 和数据打包成完整页面：

<!DOCTYPEhtml><html><head><title>文章详情</title><!-- 样式、脚本 --></head><body><divid="__nuxt"><article><h1>文章标题</h1><p>文章内容...</p></article></div><!-- 关键：数据注入 --><script>window.__NUXT__={data:{article:{id:123,title:'文章标题',...}}}</script></body></html>

四、Hydration 是什么

Hydration（水合）是 SSR 的关键步骤：

服务端返回的是：静态 HTML（没有事件绑定） Hydration 做的是：给静态 HTML "注水"，让它变成可交互的 Vue 应用

Hydration 过程：

  1. 浏览器加载 Vue 运行时
  2. Vue 根据window.__NUXT__恢复状态
  3. Vue 将事件绑定到已有 DOM 上
  4. 页面变得可交互
<template> <!-- 服务端渲染时：生成静态 HTML --> <button @click="count++">{{ count }}</button> <!-- Hydration 后：点击事件生效 --> </template>

Hydration 不匹配错误

如果服务端渲染的 HTML 和客户端预期的不一样，会报错：

[Vue warn]: Hydration node mismatch

常见原因：

<script setup lang="ts"> // ❌ 服务端和客户端时间不同 const time = new Date().toLocaleString() // ❌ 服务端没有 localStorage const theme = localStorage.getItem('theme') // ❌ 随机值每次不同 const random = Math.random() </script>

解决方法：

<script setup lang="ts"> // ✅ 用 onMounted 处理客户端特有逻辑 const time = ref('') onMounted(() => { time.value = new Date().toLocaleString() }) // ✅ 判断环境 const theme = ref('light') if (import.meta.client) { theme.value = localStorage.getItem('theme') || 'light' } </script>

五、数据传递机制

服务端获取的数据如何传给客户端？

Nuxt 使用window.__NUXT__对象：

<!-- 服务端注入的数据 --><script>window.__NUXT__={serverRendered:true,data:{// useFetch 获取的数据'/api/articles/123':{id:123,title:'...'}},state:{// useState 的状态user:{id:1,name:'...'}}}</script>

客户端初始化时直接使用这些数据，不再重复请求。

六、只在客户端执行

有些代码不需要在服务端执行：

<script setup lang="ts"> // 方式一：onMounted onMounted(() => { console.log('只在客户端执行') }) // 方式二：判断环境 if (import.meta.client) { console.log('只在客户端执行') } // 方式三：ClientOnly 组件（模板中） </script> <template> <ClientOnly> <div>这部分不会在服务端渲染</div> </ClientOnly> </template>

七、只在服务端执行

有些代码只需要在服务端执行：

<script setup lang="ts"> if (import.meta.server) { // 访问数据库、读取文件系统等 const event = useRequestEvent() const headers = getHeaders(event) console.log('请求头:', headers) } </script>

八、服务端上下文

在服务端可以访问请求信息：

<script setup lang="ts"> if (import.meta.server) { const event = useRequestEvent() // 请求 URL const url = getRequestURL(event) // 请求头 const headers = getHeaders(event) // Cookie const cookies = parseCookies(event) // 客户端 IP const ip = getRequestIP(event) // 请求方法 const method = getMethod(event) } </script>

九、SSR 的代价

SSR 不是银弹，有代价：

优点缺点
首屏快服务器压力大
SEO 友好开发复杂度高
社交分享需要处理 Hydration
不能用浏览器特有的 API

选择建议：

  • 内容网站、博客、电商 → SSR
  • 后台管理、工具应用 → CSR
  • 两者结合 → 部分页面 SSR

十、调试 SSR

查看服务端渲染结果：

// 在页面中console.log('服务端渲染:',import.meta.server)console.log('客户端渲染:',import.meta.client)

在终端看到的就是服务端输出，在浏览器控制台看到的是客户端输出。

总结

SSR 核心概念：

概念说明
服务端渲染在服务器生成 HTML
Hydration给静态 HTML 绑定事件
__NUXT__数据传递载体
import.meta.server判断服务端环境
import.meta.client判断客户端环境

理解 SSR 原理，才能写出正确的代码，避免 Hydration 错误。下一篇聊聊渲染模式选择。

相关文章

入门篇三：Nuxt4组件自动导入：写代码少敲一半字

入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子

延伸阅读

nuxt4完整系列，持续更新中。。，欢迎来逛逛

内容有帮助？点赞、收藏、关注三连！评论区等你 💪

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/15 23:02:20

Python实战：5分钟搞定PANN声音检测模型部署（附完整代码）

Python极速部署指南&#xff1a;5分钟玩转PANN声音检测模型 当你在深夜加班时&#xff0c;突然听到窗外传来奇怪的声响&#xff1b;当你在整理家庭录像时&#xff0c;需要快速标记出所有包含婴儿笑声的片段&#xff1b;当你开发智能家居系统时&#xff0c;希望设备能自动识别门…

作者头像 李华
网站建设 2026/4/15 23:02:14

【AirSim 实战指南】Python API 与无人机精准控制全攻略

1. 环境准备与基础连接 第一次接触AirSim时&#xff0c;最让人头疼的就是环境配置。我清楚地记得去年帮学弟调试时&#xff0c;光是解决一个Python包冲突就花了整整一下午。这里分享几个真正实用的避坑指南&#xff1a; 安装AirSim最稳妥的方式是直接使用预编译的Windows二进制…

作者头像 李华
网站建设 2026/5/4 14:25:43

告别Anchor：深入理解FCOS3D如何用‘特征点’搞定单目3D检测

FCOS3D&#xff1a;单目3D检测的锚点革命与特征点艺术 当自动驾驶汽车行驶在复杂城市道路时&#xff0c;系统需要在毫秒级时间内判断周围车辆、行人的精确三维位置——这背后是计算机视觉领域最具挑战性的任务之一&#xff1a;单目3D目标检测。传统方法依赖人工设计的锚框&…

作者头像 李华
网站建设 2026/4/17 13:47:52

手把手教你用微信云托管绕过域名备案，快速上线小程序后端服务

微信云托管实战&#xff1a;无需备案快速部署小程序后端服务的完整指南 当时间紧迫且域名尚未备案时&#xff0c;微信云托管为小程序开发者提供了一条合规高效的捷径。去年参与校园智慧食堂项目时&#xff0c;我们团队就遇到过类似困境——距离演示只剩72小时&#xff0c;而新…

作者头像 李华
网站建设 2026/4/15 22:53:17

信创环境踩坑记：在CTyunOS 2.0.1上离线部署Dify 1.10.1的完整避坑指南

信创环境实战&#xff1a;CTyunOS 2.0.1离线部署Dify 1.10.1全流程解析 在国产化操作系统浪潮下&#xff0c;信创环境的软件部署成为技术团队必须面对的挑战。不同于通用Linux发行版&#xff0c;CTyunOS这类专为国产芯片优化的系统&#xff0c;在依赖管理、架构兼容性方面存在独…

作者头像 李华
网站建设 2026/5/1 21:31:35

WPS公式编辑器高效操作指南：从基础到进阶

1. WPS公式编辑器入门&#xff1a;从零开始掌握基础操作 第一次打开WPS公式编辑器时&#xff0c;很多人会被满屏的数学符号搞得头晕。别担心&#xff0c;我刚开始用的时候也是这样&#xff0c;甚至花了半小时才找到分数符号在哪里。现在回想起来&#xff0c;其实掌握基础操作只…

作者头像 李华