集成 SSR

SSR（Server-side rendering）是指在服务器端将动态生成的 HTML 直接输出到浏览器，以提高页面的首次加载速度和 SEO 优化。 antd-style 针对 SSR 场景提供了专门的方法，将 antd 组件与 antd-style 样式做静态抽取，从而提高页面的渲染速度和性能。以下是在 SSR 中使用 antd-style 的指南：

在 Next.js 中集成

Page Router

在 Next.js 的服务端渲染中，需要在组件的 getInitialProps 方法中使用 extractStaticStyle 提取静态样式，并将其添加到页面的 head 中。 具体使用示例如下：

1. 引入并包裹 StyleProvider 组件，并将其包裹在需要提取静态样式的组件外层：

将 enhanceApp 参数传入 renderPage 方法。enhanceApp 是一个函数，用于对 App 组件进行增强，这里我们将 App 组件包裹在 StyleProvider 组件中，以便提取静态样式。

其中，cache 字段挂载的是 @ant-design/cssinjs 的 cache 对象。

2. 使用 extractStaticStyle 方法提取静态样式

调用 renderPage 方法得到渲染后的页面内容，并使用 extractStaticStyle 方法提取出其中的静态样式。

extractStaticStyle 方法抽取后的样式是一个数组，包含了 antd 的样式对象与 antd-style 的样式对象。每项样式对象的结构如下：

3. 将提取出的样式添加到页面的 head 中

由于 Nextjs 中需要直接插入 <style> 样式元素，我们从 extractStaticStyle 获得的样式对象数组中，取出 style 样式元素，将其添加到页面的 head 中即可。

App Router

App Router 是 Next.js 在 13.4 版本中正式完备的应用模式。 antd-style 也支持了这种模式。 接入方式如下：

创建一个 StyleRegistry.tsx 组件，用于收集提取静态样式并插入到 html 中：

在 app/layout.tsx 中引入该组件：

与 dumi 集成

在本示例中，将抽取样式到 css 静态文件，然后在 html 中引入。

1. 全局 Layout 中包裹 StyledProvider

在 umi 的全局 Layout 中包裹 StyledProvider，并定义一个全局的 cache 变量，用于缓存 antd 的样式：

2. 使用 extractStaticStyle 方法提取样式到独立文件

在服务端渲染的相关文件中（例如 plugin.ts ）， 使用 extractStaticStyle 方法提取样式到独立文件：

相关 API

extractStaticStyle