跳转到内容

React SSR 服务端渲染与水合

React 适配器支持服务端渲染(SSR)与客户端水合(Hydration)。安装与样式导入请参阅 React 快速开始。服务端与构建工具依赖 Node ^20.19.0 || >=22.12.0

在服务端渲染与客户端首帧水合渲染中,请传入相同的初始 content、文档标识以及渲染配置。待应用程序在浏览器中确立其客户端生命周期之后,再开始应用来自传输层的流式更新。如果服务端已经渲染了特定字符串,切勿在首轮客户端渲染中通过仅限浏览器的变量派生不同的 Markdown 内容。

服务端渲染会运行完整的解析管线。增量解析属于客户端优化技术,且仅在开启 blockMemo 时生效。平滑流式组件会瞬间完整呈现初始内容(包括服务端输出的内容);后续到达的追加文本则正常播放动画。挂载已经完整生成完毕的回答不会重放打字机动画。

本包的 React 入口保留了 'use client' 指令。在 React Server Components(RSC)应用中,请将应用程序自身的 Hooks 以及包含函数属性的渲染器配置放置在客户端组件内部。仅跨服务端与客户端边界传递可序列化的文本源数据。

'use client';
import AIMarkdown from '@ai-markdown/react';
export function MarkdownAnswer({ content }: { content: string }) {
return <AIMarkdown content={content} />;
}

请在宿主应用框架允许的位置导入全局排版样式与 KaTeX 样式。客户端组件依然能够参与服务端生成初始 HTML;'use client' 指令仅标识组件代码边界,绝非关闭服务端渲染的指令。

请将回调函数、自定义组件映射表以及预处理器函数保留在该边界的客户端一侧。流式聊天示例展示了应用传输层与渲染器的分离,并提供了服务端路由示例。

对于协调分块,服务端与首轮水合渲染均遵循局部引用语义。仅由其他已挂载分块提供的定义,将在贡献 Effect 提交执行后方可生效。延迟水合的边界在首次渲染时必须与服务端的静态快照保持一致,即便其兄弟边界此前已经提交了贡献信息。

如果业务要求服务端输出的 HTML 必须解析所有引用,请将完整文档文本传给单一渲染器。仅在页面排版确实需要独立挂载的展示块时才使用文档协调,并为此渲染路径保持开启 React 的 blockMemo 属性。

请确保应用自身的会话信息与文档状态的作用域严格限定在拥有它们的请求或组件内部。自定义组件必须在服务端与客户端生成兼容一致的初始标记。浏览器测量应优先放在 Effect 中执行,避免在渲染阶段直接读取 DOM 布局。

适配器的注册表登记与贡献发布严格在已提交的 React Effect 中运行。其服务端快照在客户端水合期间有意隐藏跨分块的活跃注册表数据。自定义封装层应遵循该生命周期,切勿在渲染阶段直接发布注册表变更。

集成验证清单请参阅 React 参考,底层所有权规则请参阅核心契约。单独的 SSR 示例本身并不涵盖所有宿主框架的具体路由、打包与部署配置。