编辑“︁服务端渲染（SSR）”︁

{{DISPLAYTITLE:服务端渲染（SSR）}}

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

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

== 工作原理 ==
<mermaid>
sequenceDiagram
    participant 用户
    participant 服务器
    participant 数据库
    用户->>服务器: 发起页面请求
    服务器->>数据库: 获取数据
    数据库-->>服务器: 返回数据
    服务器->>服务器: 执行渲染逻辑
    服务器->>用户: 返回完整HTML
    用户->>用户: 客户端注水激活交互
</mermaid>

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

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

=== 服务端代码 ===
<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

=== 客户端注水 ===
<syntaxhighlight lang="javascript">
import React from 'react';
import { hydrateRoot } from 'react-dom/client';

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

== 关键技术 ==
=== 数据预取 ===
服务端需在渲染前完成数据获取，常见模式：
* '''静态方法预取'''：组件定义`getInitialProps`等静态方法
* '''路由级数据依赖'''：如[[Next.js]]的`getServerSideProps`

=== 状态管理 ===
需处理服务端与客户端的状态同步，典型方案：
* 将Redux/Nanostore等状态序列化到HTML
* 使用React Context的SSR兼容实现

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

== 应用场景 ==
=== SEO敏感型应用 ===
* 电商产品页
* 新闻/博客平台
* 营销落地页

=== 性能关键场景 ===
* 移动端网页（3G/4G网络）
* 低端设备用户
* 首屏交互要求高的后台系统

== 数学建模 ==
SSR的响应时间可表示为：
<math>
T_{SSR} = T_{network} + T_{render} + \frac{D_{html}}{B}
</math>
其中：
* <math>T_{network}</math>：网络往返延迟
* <math>T_{render}</math>：服务端渲染耗时
* <math>D_{html}</math>：HTML文档大小
* <math>B</math>：带宽

== 进阶主题 ==
=== 静态站点生成（SSG） ===
SSR的特殊形式，在构建时预生成HTML，适合内容稳定的场景。

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

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

== 常见问题 ==
=== 如何避免服务端-客户端校验不一致？ ===
* 使用`suppressHydrationWarning`标记动态内容
* 确保Node.js与浏览器环境差异处理

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

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

== 参见 ==
* [[单页应用]]
* [[渐进式Web应用]]
* [[同构JavaScript]]

[[Category:前端框架]]
[[Category:网页渲染技术]]

[[Category:计算机科学]]
[[Category:面试技巧]]