您现在的位置是：首页 > 常识问答网站首页常识问答

SSR 也就是服务端渲染，核心就是把原本在浏览器里面执行的页面渲染工作，提前放到服务器端完成，服务器直接返回已经渲染好的完整 HTML 页面，浏览器拿到之后只需要做 hydration 水合激活，不用等前端 JS 全部下载解析执行之后再生成页面。这样做主要解决首屏加载慢，搜索引擎爬虫抓取页面内容困难，白屏时间长这些问题，主流框架比如 Next.js Nuxt.js 都是自带 SSR 能力，不需要从零手写底层渲染逻辑，只需要按照框架规范开启 SSR，配置路由 数据预取 缓存 接口代理这些相关参数，就能跑通完整 SSR 流程，同时还要注意区分 SSR 和 SSG 静态生成，SSR 是每次请求都在服务器实时渲染，适合内容动态变化的业务场景。

核心原理说明

传统客户端渲染 CSR，服务器只返回一个空的 HTML 壳子，所有页面 DOM 数据 文案全部依靠前端 JS 运行之后生成，爬虫很多时候不会等待 JS 执行，就抓不到真实页面内容，用户打开页面也会长时间白屏。

SSR 的执行链路是 用户发起请求 服务器接收请求 执行数据预取 请求接口拿到业务数据 调用框架渲染函数把组件和数据拼接成完整 HTML 把 HTML 响应返回浏览器 浏览器展示页面 前端继续加载 JS 完成水合，绑定交互事件。

这里最关键的点就是数据预取，SSR 阶段组件里面不能直接使用浏览器独有的 API，比如 window document localStorage，因为服务器环境没有这些对象，直接调用会直接报错，这是新手配置 SSR 最常见的坑。

Next.js SSR 设置步骤

Next.js 13 之后分 App Router 和 Pages Router 两套写法，两套开启 SSR 的方式不一样。

Pages Router 旧版路由

1 新建项目 npx create next app

2 页面文件里面添加 getServerSideProps 这个函数，这个函数就是 SSR 专属的数据预取函数，每次请求服务器都会执行这个函数，里面可以请求数据库 调用后端接口，把返回的数据通过 props 传给页面组件

3 页面组件正常编写，不需要额外开关，只要页面存在 getServerSideProps，这个页面就自动启用 SSR

4 可以在 next.config.js 里面配置相关参数，比如自定义服务器 压缩 代理 跨域请求头

App Router 新版路由

1 在 app 目录下的页面组件，默认就是服务端组件，本身就是 SSR 渲染模式

2 如果需要在服务端组件里面请求数据，直接在组件顶层写异步请求代码，不需要单独的预取函数

3 如果页面需要浏览器交互，单独拆分客户端组件，加上 use client 指令

4 可以在 next.config.js 里面配置 runtime，选择 nodejs 或者 edge 运行时，edge SSR 就是边缘服务渲染，响应速度更快

Nuxt.js SSR 设置步骤

Nuxt 是 Vue 生态的 SSR 框架，默认创建项目就已经开启 SSR。

1 新建项目 npx nuxi init

2 打开 nuxt.config.ts 配置文件，找到 ssr 选项，ssr true 就是开启 SSR，改成 false 就切换成纯客户端渲染

3 在页面里面使用 useAsyncData 或者 useFetch 做服务端数据获取，这两个 API 会自动在服务端执行数据拉取，把数据同步传递到客户端水合阶段

4 可以配置 nitro 服务端引擎，设置缓存策略，接口代理，自定义服务端路由

5 如果要做 SEO 优化，可以在页面里面配置 useHead，设置 title description 这些元标签，SSR 渲染的时候元标签会直接写入返回的 HTML 里面

关键配置项表格

配置项	Next.js	Nuxt.js	作用
SSR 总开关	App Router 默认开启 Pages Router 靠 getServerSideProps 触发	nuxt.config ssr 字段	控制是否启用服务端渲染
服务端数据获取	getServerSideProps 或者 async 组件请求	useAsyncData useFetch	请求动态业务数据
运行时选择	runtime nodejs edge	nitro runtime	选择 node 服务或者边缘运行环境
缓存配置	revalidate 增量缓存	nitro 缓存规则	减少服务器重复渲染压力
跨域代理	rewrites	nitro routeRules proxy	解决 SSR 阶段接口跨域

常见踩坑要点

1 服务端代码不能访问 window document 等浏览器对象，如果必须使用，要用条件判断，只在客户端水合之后执行

2 SSR 阶段接口请求要处理超时和异常，一旦预取请求失败，整个页面渲染就会报错，需要增加错误兜底页面

3 服务器渲染会增加服务器 CPU 压力，高并发场景下要搭配缓存，不要所有请求都实时渲染

4 水合不匹配 hydration mismatch，服务端渲染出来的 HTML 和客户端首次渲染结果不一致，一般是随机值 时间 浏览器独有状态导致，需要统一两端初始状态

5 路由跳转之后的页面，客户端导航默认不会再走完整 SSR，是前端路由切换，只有首次直接访问 URL 才触发服务器渲染

收尾总结

SSR 设置本质不是打开一个单独总开关这么简单，核心是配套完成服务端数据预取，隔离浏览器 API，处理水合匹配，配置服务端运行环境和缓存。如果是 React 项目优先选择 Next.js，Vue 项目优先选择 Nuxt.js，框架已经封装好底层渲染逻辑，只需要按照框架规范写数据获取代码，再按需调整配置文件，就可以完成 SSR 部署，部署的时候需要保证服务器支持 Node 运行环境，不能直接当成纯静态站点部署。

【常见问题】

问题 1 SSR 设置之后为什么还是出现水合报错

回答 1 SSR 设置完成之后出现水合报错，主要原因是服务端和客户端渲染出来的 DOM 内容不一致，常见是组件里面直接读取 window，或者渲染的时候使用随机数 当前时间，两端初始状态不一样，需要修改代码，保证 SSR 阶段和客户端首次渲染的初始状态保持统一，避免浏览器专属 API 在服务端执行。

问题 2 SSR 设置可以关闭吗

回答 2 SSR 设置是可以关闭的，Nuxt 可以在 nuxt.config 把 ssr 修改为 false，切换成纯客户端渲染，Next.js Pages Router 页面移除 getServerSideProps，页面就不再走 SSR，变成 CSR 客户端渲染，关闭之后就不再由服务器实时渲染页面。

问题 3 SSR 设置完成后首屏还是很慢是什么原因

回答 2 SSR 设置完成后首屏依旧很慢，一般是 SSR 的数据预取接口响应太慢，服务器渲染计算耗时高，或者没有配置缓存，每次请求都重复渲染，需要优化后端接口，增加 SSR 页面缓存，同时精简服务端组件体积，降低服务器渲染开销。

【免责申明】

本文内容基于主流 Next.js Nuxt 框架公开文档编写，不同版本框架 API 和配置规则会随版本更新发生变动，实际项目部署请以对应版本官方文档为准，本文不保证适配所有自定义改造和特殊业务场景，出现线上故障请自行排查或者参考官方 issue 方案。