最近在做项目的时候，正式接触了 Next.js。
之前只用过Vue.js 和 React ，对“服务端渲染（SSR）”这个词虽然听过很多次，但一直停留在概念层面。

直到真正开始了解 Next.js，我才慢慢把：

• 客户端渲染（CSR）

• 服务端渲染（SSR）

分清楚。

这篇文章就想聊聊：

Next.js 的服务端渲染到底是什么？
它和 Vue / React 常见的客户端渲染到底有什么区别？

---

以前我们写的 Vue / React 项目，本质上是 CSR

如果你以前写过：

• Vue + Vite

• React + Vite

• React CRA

那你接触最多的其实是：

客户端渲染（CSR）

简单说：

页面是在浏览器里生成的。

比如我们访问一个 React 项目时，服务器返回的 HTML 很可能只有：

<div id="app"></div>
<script src="main.js"></script>

真正的页面内容：

• 商品列表

• 用户数据

• 按钮

• 页面结构

其实都是浏览器下载 JS 后，再动态生成的。

整个流程大概是：

用户访问页面
   ↓
服务器返回基础 HTML
   ↓
浏览器下载 JS
   ↓
React/Vue 开始运行
   ↓
请求接口
   ↓
渲染页面

所以很多传统 React 项目第一次打开时：

• 会白屏一下

• 会先看到 loading

• 首屏速度不够快

因为页面内容需要等 JS 执行完才真正出现。

---

Next.js 的 SSR，到底做了什么？

而 Next.js 最大的变化就在于：

页面可以在服务器提前生成

也就是：

用户请求页面时，不再是返回一个“空壳 HTML”。

而是服务器直接：

• 执行 React

• 请求数据

• 把 HTML 提前生成好

最后直接返回完整页面：

<h1>商品列表</h1>
<ul>
  <li>iPhone</li>
  <li>MacBook</li>
</ul>

这样浏览器一打开：

页面已经有内容了

这就是：

服务端渲染（SSR）

它和 CSR 最核心的区别其实就一句话：

CSR	SSR
浏览器生成页面	服务器生成页面
先下载 JS	先返回 HTML
首屏可能白屏	首屏直接有内容
SEO 较差	SEO 更友好

---

为什么 SSR 对 SEO 很重要？

这个是我以前一直理解不深的地方。

搜索引擎最喜欢的，其实是：

HTML 内容

传统 CSR 项目第一次返回：

<div id="app"></div>

搜索引擎可能根本看不到真实内容。

但 SSR 不一样。

服务器会直接返回：

<h1>苹果手机推荐</h1>

搜索引擎一抓就能看到完整页面。

所以：

• 博客

• 官网

• 电商

• 营销页

这类特别依赖 SEO 的网站，非常适合 SSR。

这也是为什么现在越来越多公司开始用 Next.js。

---

但 SSR 也不是“全面碾压”

刚接触 SSR 时，我第一反应也是：

“这不比 CSR 强太多了吗？”

后来发现并不是。

因为 SSR 也会带来新的问题。

首先：

服务器压力会更大

CSR：

页面渲染在用户浏览器。

SSR：

服务器每次都要提前生成 HTML。

用户一多，服务器压力自然更高。

另外：

开发复杂度也明显提升

以前前端更多是：

前端 ← API → 后端

但 Next.js 开始涉及：

• 服务端逻辑

• Node.js

• 缓存

• 渲染策略

• 数据获取时机

很多时候你已经不只是“写前端”了。

更像是在做：

全栈 Web 开发

---

我现在怎么理解 SSR？

现在我对 SSR 的理解已经非常简单了：

CSR

浏览器负责生成页面

SSR

服务器提前生成页面

剩下的：

• SEO

• 首屏速度

其实都是围绕这个核心展开的。

---

最后的感受

以前写 Vue / React 时，更像是在：

做一个前端应用。

而写 Next.js 后，更像是在：

做一个完整的网站系统。

因为你会开始真正思考：

• 页面什么时候渲染？

• 数据在哪里获取？

• 哪部分放服务端？

• 哪部分放客户端？

• SEO 怎么做？

• 缓存怎么设计？

这也是我觉得 Next.js 最有意思的地方。

它已经不只是 React 框架了。

更像是：

React 的全栈解决方案。