服务端渲染（SSR）

概述[编辑 | 编辑源代码]

服务端渲染（Server-Side Rendering，简称SSR）是一种网页渲染技术，指由服务器将网页内容生成完整的HTML文档后发送至客户端，而非依赖客户端JavaScript动态构建页面。与传统单页应用（SPA）的客户端渲染（CSR）相比，SSR能显著改善首屏加载性能、SEO友好性和低带宽环境下的用户体验。

核心特征[编辑 | 编辑源代码]

首屏直出：用户直接接收可交互的HTML内容，无需等待JavaScript加载完成。
同构渲染（Isomorphic Rendering）：同一套代码可在服务端和客户端复用，实现前后端一致的渲染结果。
动态脱水/注水（Dehydration/Hydration）：服务端将初始状态嵌入HTML（脱水），客户端接管后恢复状态（注水）。

工作原理[编辑 | 编辑源代码]

与传统CSR对比[编辑 | 编辑源代码]

SSR与CSR对比
特性	SSR	CSR
首屏时间	快（直接输出HTML）	慢（需加载JS后渲染）
SEO支持	友好（完整内容可爬取）	需额外处理（如预渲染）
服务器负载	较高（需实时渲染）	较低（仅提供静态文件）
技术复杂度	高（需同构设计）	低（纯前端实现）

实现示例[编辑 | 编辑源代码]

以下以React为例展示基础SSR实现：

服务端代码[编辑 | 编辑源代码]

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';

const app = express();

app.get('/', (req, res) => {
    const html = renderToString(
        <div>
            <h1>SSR示例</h1>
            <p>当前时间: {new Date().toLocaleString()}</p>
        </div>
    );
    res.send(`
        <!DOCTYPE html>
        <html>
            <head><title>SSR Demo</title></head>
            <body>${html}</body>
        </html>
    `);
});

app.listen(3000);

客户端注水[编辑 | 编辑源代码]

import React from 'react';
import { hydrateRoot } from 'react-dom/client';

hydrateRoot(
    document.getElementById('root'),
    <App />
);

关键技术[编辑 | 编辑源代码]

数据预取[编辑 | 编辑源代码]

服务端需在渲染前完成数据获取，常见模式：

静态方法预取：组件定义`getInitialProps`等静态方法
路由级数据依赖：如Next.js的`getServerSideProps`

状态管理[编辑 | 编辑源代码]

需处理服务端与客户端的状态同步，典型方案：

将Redux/Nanostore等状态序列化到HTML
使用React Context的SSR兼容实现

性能优化[编辑 | 编辑源代码]

流式渲染（Streaming SSR）：分块输出HTML
组件级缓存：对静态组件使用LRU缓存
CDN边缘计算：通过Edge SSR减少延迟

应用场景[编辑 | 编辑源代码]

SEO敏感型应用[编辑 | 编辑源代码]

电商产品页
新闻/博客平台
营销落地页

性能关键场景[编辑 | 编辑源代码]

移动端网页（3G/4G网络）
低端设备用户
首屏交互要求高的后台系统

数学建模[编辑 | 编辑源代码]

SSR的响应时间可表示为： $T_{S S R} = T_{n e t w o r k} + T_{r e n d e r} + \frac{D_{h t m l}}{B}$ 其中：

$T_{n e t w o r k}$ ：网络往返延迟
$T_{r e n d e r}$ ：服务端渲染耗时
$D_{h t m l}$ ：HTML文档大小
$B$ ：带宽

进阶主题[编辑 | 编辑源代码]

静态站点生成（SSG）[编辑 | 编辑源代码]

SSR的特殊形式，在构建时预生成HTML，适合内容稳定的场景。

边缘渲染[编辑 | 编辑源代码]

利用Cloudflare Workers等边缘网络执行SSR，实现地理级低延迟。

微前端SSR[编辑 | 编辑源代码]

多个子应用协同渲染时的状态隔离与资源分配策略。

常见问题[编辑 | 编辑源代码]

如何避免服务端-客户端校验不一致？[编辑 | 编辑源代码]

使用`suppressHydrationWarning`标记动态内容
确保Node.js与浏览器环境差异处理

处理第三方库的SSR兼容性？[编辑 | 编辑源代码]

检查库是否支持`window`等浏览器API的缺失处理
使用动态导入（dynamic import）延迟加载非SSR模块

调试SSR应用？[编辑 | 编辑源代码]

服务端日志输出虚拟DOM树
使用`@axe-core/react`进行SSR可访问性测试

参见[编辑 | 编辑源代码]