Next.js中的服务端渲染（SSR）工作原理是什么？

你的猜想基本正确，Next.js 的 SSR 运行逻辑和传统 Express 全页返回的 SSR 确实存在本质差异，核心区别在于路由跳转的实现方式：

传统 Express SSR 状态丢失的原因 #

传统实现中点击链接走的是浏览器原生跳转，服务端返回全新的完整 HTML 文档，浏览器会直接销毁当前页面的所有 DOM、JS 上下文，所以原有客户端状态必然会丢失。

Next.js 状态保留的核心逻辑 #

Next.js 应用内默认通过 next/link 或 next/router 做跳转，本质是前端路由拦截，根本不会触发浏览器全页刷新，整个应用的全局上下文、其他非页面组件的状态都会完整保留，和你用 Create React App 做单页应用的路由跳转逻辑是一致的。

你的猜想验证与细节澄清 #

分两种场景对应你说的流程：

• 首次直接访问 SSR 页面场景
  1. 用户输入 URL 直接访问页面
  2. 服务端执行对应页面的 getServerSideProps 拉取数据，将数据注入页面组件后渲染为完整的 HTML 字符串返回给浏览器
  3. 浏览器先渲染静态 HTML（此时页面可见但不可交互），随后加载对应 JS 包完成水合：把静态 DOM 和 React 逻辑绑定，让页面变成可交互状态。
• 应用内前端路由跳转 SSR 页面场景
  这个场景完全符合你的猜想：
  1. 前端路由拦截跳转请求，不会触发全页刷新
  2. Next.js 后台异步请求对应页面的 getServerSideProps 接口，服务端执行后仅返回 JSON 格式的 props 数据
  3. 前端拿到新 props 后传给目标页面组件，触发组件重渲染完成更新，这个过程不属于水合，就是普通的 React 组件更新。

对应你的示例代码说明 #

你提供的 paged.js 是标准的 Next.js SSR 页面：

• 首次直接访问时，服务端会先调用 sendGetRequest 拿到狗狗图片链接，把带 dogstring 的页面渲染成 HTML 返回，水合后可交互
• 如果是从其他页面跳转进来，Next.js 只会在后台拉取 getServerSideProps 返回的 {"dogstring": "xxx"} 数据，传入组件重新渲染即可，之前页面的输入值、滚动位置等状态都不会丢失。

如果要复刻传统 Express SSR 的全页刷新效果，你可以把跳转用的 next/link 换成原生 <a> 标签，此时跳转就会走浏览器原生刷新，状态也会全部丢失。

内容的提问来源于stack exchange，提问作者Bob