同构渲染

同构渲染（isomorphic rendering）也叫通用渲染，指同一套代码在服务器和浏览器两端各跑一次^[1]。服务器先产出 HTML，浏览器再接手交互。它常和服务端渲染一起出现，区别在代码的共用程度：服务端渲染只要求服务器能生成 HTML，同构渲染还要求两端跑的是同一套组件与路由。选它之前要想清楚两端环境的差异，以及浏览器接手的成本。

两端共用的代码

同构这个名字来自代码的复用。Vue 的文档说，服务器渲染的应用也可以叫作同构或通用，因为大部分代码同时在服务器和客户端运行^[1]。

MDN 把服务端渲染与客户端渲染并列为两种做法，并说明两者并不互斥，可以在同一个应用里结合使用^[2]。同构渲染就是这种结合的具体形态。

框架把组件、路由和状态管理抽成一份，两端各自引用。服务器用它拼出 HTML 字符串，浏览器用同一份代码恢复页面并绑定事件^[3]。

Nuxt 把默认模式叫通用渲染，并说明服务器先返回完整 HTML，浏览器随后再执行一遍同样的代码^[3]。

服务器与浏览器的分工

分工按两段来切，一段是首次展示，一段是之后的交互。

服务器负责首屏。它取数据、跑组件、把结果合成 HTML，把这份 HTML 连同页面状态一起返回^[3]。

浏览器负责接管。它下载脚本，再从 HTML 里恢复状态，把事件监听器绑到已有元素上，这一步叫水合^[3]。

水合完成之前，页面已经可见，但点击和输入没有回应。用户看到一个已经画好、却暂时不动的页面。

web.dev 把这种先服务器渲染、再浏览器接管的组合称为再水合，并说明它同时带来首次展示和后续交互^[4]。

对抓取与首屏的作用

爬虫在第一份响应里就能读到正文。内容已经写进 HTML，不必等脚本执行^[1]。

首屏也比纯客户端渲染快。浏览器不必先下载完整脚本包，再从头生成内容^[1]。

两种好处能同时拿到，这是同构渲染被广泛采用的原因。它把客户端渲染的交互体验和服务端渲染的首屏表现放在一套代码里。

Google 建议做服务器端渲染或预渲染，理由是并非所有漫游器都能执行 JavaScript^[5]。同构渲染的前半段正好满足这一条。

百度把收录概括为抓取网页、建立索引数据库，再把库里的数据展现给用户^[6]。服务器产出的那份 HTML，是前面两个环节的输入。

成本与维护代价

两端环境的差异是主要麻烦。Nuxt 的文档说明，服务器和浏览器提供的接口并不相同，写出两端都能跑的代码要花心思^[3]。

水合带来额外开销。页面在浏览器里要再算一遍，脚本体积和首次交互时间都会受影响。

代码里要区分两端的执行时机。直接访问 window 这类浏览器接口会让服务器渲染报错，这类代码必须放到只在浏览器执行的分支里^[3]。

调试也更麻烦。同一个问题在服务器上不出现、在浏览器里出现，是常见的现象。

适合的站点类型

既要抓取又要交互的站点最适合。电商站、内容平台、带筛选和收藏的列表页都属于这一类。

纯内容站不必上同构。页面没有多少交互时，预渲染或服务端渲染更简单。

纯后台系统也未必需要。页面不对外索引，首屏快慢不影响流量，直接客户端渲染即可。

常见误用

• 两端各写一套代码，只在名字上叫同构，实际维护两份逻辑。
• 服务器渲染的数据没进入页面状态，浏览器接手时水合失败。
• 把浏览器的全局对象直接写在组件顶层，服务器一执行就报错。
• 认为同构就等于收录无忧，忽略了水合失败和异步内容的问题。

附录

参见

• 服务端渲染（SSR）
• 客户端渲染（CSR）
• 预渲染

参考资料

官方（境外）

1. 《Server-Side Rendering (SSR)》，Vue.js。
2. 《服务器端渲染（SSR）》，MDN Web 文档，2025-10-10 更新。
3. 《Rendering Modes》，Nuxt。
4. 《Rendering on the Web》，web.dev，2026-01-05 更新。
5. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

官方（国内）

6. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。