服务端渲染

定义

服务端渲染(Server-Side Rendering,SSR)是指在用户发起请求时,由服务器执行应用代码、生成包含完整内容的 HTML 文档,再将其返回给浏览器的渲染方式。浏览器接收后即可直接展示有意义的内容,而无需等待客户端 JavaScript 下载并执行完毕。[1]

原理

在 SSR 流程中,服务器针对每个请求运行应用的渲染逻辑(如执行 React 组件树),结合所需数据生成对应的 HTML 字符串并响应。浏览器立即呈现这份 HTML,实现快速的首屏内容显示。随后,客户端加载配套的 JavaScript,对已有的静态 HTML 进行注水(hydration),为其绑定事件与状态,使页面恢复完整的交互能力。这一服务端出 HTML、客户端再激活的模式区别于纯客户端渲染与静态站点生成。

特点

优点在于:首屏内容呈现快,改善了用户感知性能与首字节后的可见时间;HTML 内容对搜索引擎友好,利于 SEO;在弱设备与慢网络下表现更稳。缺点包括:每次请求都需服务端计算,带来更高的服务器负载与运维复杂度;注水过程仍需下载 JavaScript,可能产生可见但暂不可交互的间隙;缓存策略设计较为复杂。

应用

SSR 适用于既重视首屏性能与 SEO、又需要丰富交互的应用,如电商、内容平台与门户。Next.js、Nuxt、SvelteKit 等元框架均内置 SSR 能力,并常与静态生成、增量再生及边缘渲染等策略组合,以在性能与成本间取得平衡。