@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/zh/guides/basic-features/render/ssg.mdx

@@ -0,0 +1,168 @@
+---
+title: 静态站点生成（SSG）
+---
+
+# 静态站点生成（SSG）
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。这意味着在生产环境中，页面默认就是有内容的，并且可以被 CDN 缓存。对于无需数据的页面，SSG 可以提供更好的性能和更高的安全性。
+
+## 启用 SSG
+
+import EnableSSG from '@site-docs/components/enable-ssg';
+
+<EnableSSG />
+
+## 开发环境调试
+
+SSG 也是在 Node.js 环境渲染页面，因此我们可以在**开发阶段开启 SSR**，提前暴露代码问题，验证 SSG 渲染效果：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  server: {
+    ssr: process.env.NODE_ENV === 'development',
+  }
+}
+```
+
+## 在约定式路由中使用
+
+**约定式路由**中，Modern.js 根据入口下的文件结构生成路由，因此框架能够收集完整的路由信息。
+
+### 基本用法
+
+例如，以下是一个使用约定式路由的项目目录结构：
+
+```bash
+.
+└── routes
+    ├── layout.tsx
+    ├── page.tsx
+    └── user
+        ├── layout.tsx
+        ├── page.tsx
+        └── profile
+            └── page.tsx
+```
+
+上述文件目录将会生成以下三条路由：
+
+- `/`
+- `/user`
+- `/user/profile`
+
+:::tip
+如果还不了解约定式路由的规则，可以先查看[路由方案](/guides/basic-features/routes/routes)。
+
+:::
+
+在 `src/routes/page.tsx` 中添加组件代码：
+
+```jsx title="src/routes/page.tsx"
+export default () => {
+  return <div>Index Page</div>;
+};
+```
+
+在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件 `main/index.html`。
+
+在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/user/index.html` 和 `main/user/profile/index.html` 三个 HTML 文件，内容分别对应上述三条路由。
+
+**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `Index Page` 的文本内容，这正是 SSG 的效果。
+
+执行 `pnpm run serve` 启动项目后，访问页面，在浏览器我们工具的 Network 窗口，查看请求返回的文档，文档包含组件渲染后的完整页面内容。
+
+## 在自控式路由中使用
+
+**自控式路由**是通过组件代码定义路由，需要应用运行起来才能获取准确的路由信息。因此，无法开箱即用的使用 SSG 功能。开发者需要通过配置告知 Modern.js 框架，哪些路由需要开启 SSG 功能。
+
+例如有以下代码，包含多条路由，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`：
+
+import SelfRouteExample from '@site-docs/components/self-route-example';
+
+<SelfRouteExample />
+
+如果我们希望同时开启 `/about` 的 SSG 功能，可以配置 `output.ssg`：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  output: {
+    ssg: {
+      routes: ['/', '/about'],
+    },
+  },
+});
+```
+
+执行 `pnpm run build` 后，可以看到 `dist/` 目录中，新增了一个 `main/about/index.html` 文件。
+
+执行 `pnpm run serve` 启动项目后，访问页面，在浏览器我们工具的 Network 窗口，查看请求返回的文档，文档包含组件渲染后的完整页面内容。
+
+:::info
+以上仅介绍了单入口的情况，更多相关内容可以查看 [API 文档](/configure/app/output/ssg)。
+:::
+
+## 添加动态路由
+
+在自控式路由或包含动态段的约定式路由（如 `/user/[id]`）中，直接在 `routes` 中写入具体路径。
+
+```js
+export default defineConfig({
+  output: {
+    ssg: {
+      routes: ['/', '/about', '/user/modernjs'],
+    },
+  },
+});
+```
+
+## 多入口
+
+多入口应用请通过 `output.ssgByEntries` 按入口分别配置：
+
+```js
+export default defineConfig({
+  output: {
+    ssgByEntries: {
+      home: {
+        routes: ['/', '/about', '/user/modernjs'],
+      },
+      admin: false,
+    },
+  },
+});
+```
+
+:::info
+详细配置请参考：[output.ssgByEntries](/configure/app/output/ssgByEntries)
+:::
+
+## 配置渲染请求头
+
+Modern.js 支持为具体入口或路由配置请求头，例如：
+
+```js
+export default defineConfig({
+  output: {
+    ssg: {
+      headers: {
+        'x-tt-env': 'ppe_modernjs',
+      },
+      routes: [
+        '/',
+        {
+          url: '/about',
+          headers: {
+            from: 'modern-website',
+          },
+        },
+      ],
+    },
+  },
+});
+```
+
+上述配置中，为所有路由设置了 `x-tt-env` 请求头，单独为 `/about` 路由设置了 `from` 请求头。
+
+:::tip
+路由中设置的 `headers` 会覆盖入口中设置的 `headers`。
+:::

package/docs/zh/guides/basic-features/render/ssr-cache.mdx

@@ -0,0 +1,205 @@
+---
+title: 渲染缓存
+---
+
+# 渲染缓存
+
+在开发应用时，有时我们会将计算结果进行缓存，例如使用 React `useMemo`、`useCallback` 等 Hook。通过缓存我们可以减少计算的次数来减少 CPU 资源占用，提高用户体验。
+
+Modern.js 支持将服务器端渲染（SSR）结果进行缓存，减少服务器每次请求时的计算和渲染时间，从而加速页面加载速度，提高用户体验。同时，缓存也能降低服务端负载，节省计算资源，提高用户访问速度。
+
+## 配置方式
+
+在应用中创建 `server/cache.[t|j]s` 文件，并导出 `cacheOption` 配置缓存即可开启 SSR 渲染缓存：
+
+```ts title="server/cache.ts"
+import type { CacheOption } from '@modern-js/server-runtime';
+
+export const cacheOption: CacheOption = {
+  maxAge: 500, // ms
+  staleWhileRevalidate: 1000, // ms
+};
+```
+
+## 配置说明
+
+### 缓存配置
+
+缓存策略参考 [stale-while-revalidate](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) 进行实现。
+
+在 `maxAge` 时间内会直接返回缓存内容，超过 `maxAge` 但在 `staleWhileRevalidate` 内也会直接返回缓存内容，但同时会异步做一次重新渲染。
+
+**Object 类型**
+
+```ts
+export interface CacheControl {
+  maxAge: number;
+  staleWhileRevalidate: number;
+  customKey?: string | ((pathname: string) => string);
+}
+```
+
+其中 `customKey` 为自定义缓存 key。默认情况下 Modern.js 将会把请求 `pathname` 作为 key 进行缓存，但在某些情况下这不能满足你的需求，开发者可以进行自定义。
+
+**Function 类型**
+
+```ts
+export type CacheOptionProvider = (
+  req: IncomingMessage,
+) => Promise<CacheControl | false> | CacheControl | false;
+```
+
+有时开发者需要通过 `req` 来自定义缓存 key，或者特定 URL 时缓存不生效，可以配置为函数的形式进行处理, 例如以下代码：
+
+```ts title="server/cache.ts"
+
+import type { CacheOption, CacheOptionProvider } from '@modern-js/server-runtime';
+
+const provider: CacheOptionProvider = (req) => {
+  const { url, headers, ... } = req;
+  if(url.includes('no-cache=1')) {
+    return false;
+  }
+
+  const key = computedKey(url, headers, ...);
+  return {
+    maxAge: 500, // ms
+    staleWhileRevalidate: 1000, // ms
+    customKey: key,
+  }
+}
+
+export const cacheOption: CacheOption = provider;
+```
+
+**Mapping 类型**
+
+```ts
+export type CacheOptions = Record<string, CacheControl | CacheOptionProvider>;
+```
+
+有时开发者面对不同的路由需要应用不同的缓存策略。我们也提供一种映射的方式进行配置, 以下列代码为例：
+
+```ts title="server/cache.ts"
+import type { CacheOption } from '@modern-js/server-runtime';
+
+export const cacheOption: CacheOption = {
+  '/home': {
+    maxAge: 50,
+    staleWhileRevalidate: 100,
+  },
+  '/about': {
+    maxAge: 1000 * 60 * 60 * 24, // one day
+    staleWhileRevalidate: 1000 * 60 * 60 * 24 * 2 // two day
+  },
+  '*': (req) => { // 若上述路由无法匹配，则会匹配到 '*'
+    const { url, headers, ... } = req;
+    const key = computedKey(url, headers, ...);
+
+    return {
+      maxAge: 500,
+      staleWhileRevalidate: 1000,
+      customKey: key,
+    }
+  }
+}
+```
+
+- 路由 `http://xxx/home` 将会应用第一条规则。
+- 路由 `http://xxx/about` 将会应用第二条规则。
+- 路由 `http://xxx/abc` 将会应用最后一条规则。
+
+上述 `/home` 和 `/about` 将会作为模式进行匹配，这意味着 `/home/abc` 也会匹配上该规则。同时，你也可以在其中编写正则语法：`/home/.+`
+
+### 缓存容器
+
+默认情况下，Server 将会使用内存进行缓存。但通常情况下服务将会部署在 Serverless 容器上。每一次的服务访问可能都是一个新的进程，这样每次访问都不能应用缓存。
+
+因此，Modern.js 支持开发者自定义缓存容器，容器需实现接口 `Container`：
+
+```ts
+export interface Container<K = string, V = string> {
+  /**
+   * Returns a specified element from the container. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Container.
+   * @returns Returns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.
+   */
+  get: (key: K) => Promise<V | undefined>;
+
+  /**
+   * Adds a new element with a specified key and value to the container. If an element with the same key already exists, the element will be updated.
+   *
+   * The ttl indicates cache expiration time.
+   */
+  set: (key: K, value: V, options?: { ttl?: number }) => Promise<this>;
+
+  /**
+   * @returns boolean indicating whether an element with the specified key exists or not.
+   */
+  has: (key: K) => Promise<boolean>;
+
+  /**
+   * @returns true if an element in the container existed and has been removed, or false if the element does not exist.
+   */
+  delete: (key: K) => Promise<boolean>;
+}
+```
+
+以下面代码为例，开发者可实现一个 redis 缓存容器。
+
+```ts
+import type { Container, CacheOption } from '@modern-js/server-runtime';
+
+class RedisContainer implements Container {
+  redis = new Redis();
+
+  async get(key: string) {
+    return this.redis.get(key);
+  }
+
+  async set(key: string, value: string): Promise<this> {
+    this.redis.set(key, value);
+    return this;
+  }
+
+  async has(key: string): Promise<boolean> {
+    return this.redis.has(key);
+  }
+
+  async delete(key: string): Promise<boolean> {
+    return this.redis.delete(key);
+  }
+}
+
+const container = new RedisContainer();
+
+export const customContainer: Container = container;
+
+export const cacheOption: CacheOption = {
+  maxAge: 500, // ms
+  staleWhileRevalidate: 1000, // ms
+};
+```
+
+## 缓存标识
+
+当开启渲染缓存后，Modern.js 将通过响应头 `x-render-cache` 来标识当前请求的缓存状态。下面是一个响应示例：
+
+```bash
+< HTTP/1.1 200 OK
+< Access-Control-Allow-Origin: *
+< content-type: text/html; charset=utf-8
+< x-render-cache: hit
+< Date: Thu, 29 Feb 2024 02:46:49 GMT
+< Connection: keep-alive
+< Keep-Alive: timeout=5
+< Content-Length: 2937
+```
+
+`x-render-cache` 可能会有以下几种值：
+
+| 名称    | 说明                                               |
+| ------- | -------------------------------------------------- |
+| hit     | 缓存命中，返回缓存内容                             |
+| stale   | 缓存命中，但数据陈旧，返回缓存内容的同时做重新渲染 |
+| expired | 缓存命中，重新渲染后返回渲染结果                   |
+| miss    | 缓存未命中                                         |

package/docs/zh/guides/basic-features/render/ssr.mdx

@@ -0,0 +1,334 @@
+---
+title: 服务端渲染（SSR）
+---
+
+# 服务端渲染（SSR）
+
+服务端渲染（Server-Side Rendering，简称 SSR）在服务器端生成完整的 HTML 页面，然后发送到浏览器端直接显示，无需客户端额外渲染。
+
+## 核心优势
+
+- **更快首屏**：服务端预渲染，浏览器直接显示，无需等待 JavaScript 执行
+- **更好 SEO**：搜索引擎可直接索引完整的 HTML 内容
+- **开箱即用**：无需编写复杂服务端逻辑，无需单独运维
+
+:::info 默认渲染模式
+Modern.js 的 SSR **默认使用流式渲染（Streaming SSR）**，页面会边渲染边返回，用户可以更快看到初始内容。
+
+详细用法请参考[流式服务端渲染（Streaming SSR）](/guides/basic-features/render/streaming-ssr)文档。
+
+如需切换到传统 SSR 模式（等待所有数据加载完成后一次性返回），可配置：
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    ssr: {
+      mode: 'string', // 传统 SSR 模式
+    },
+  },
+});
+```
+
+:::
+
+## 开启 SSR
+
+在 Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/configure/app/server/ssr) 为 `true` 即可：
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    ssr: true, // 默认启用流式渲染
+  },
+});
+```
+
+## 数据获取
+
+Modern.js 提供了 Data Loader，支持在 SSR 和 CSR 下同构地获取数据。每个路由模块（如 `layout.tsx` 和 `page.tsx`）都可以定义自己的 Data Loader：
+
+:::tip 了解更多
+以下方式不会有流式渲染效果，要想获得流式渲染效果请参考[流式服务端渲染（Streaming SSR）](/guides/basic-features/render/streaming-ssr)
+
+:::
+
+```ts title="src/routes/page.data.ts"
+export const loader = () => {
+  return {
+    message: 'Hello World',
+  };
+};
+```
+
+在组件中通过 Hooks API 获取数据：
+
+```tsx
+import { useLoaderData } from '@modern-js/runtime/router';
+export default () => {
+  const data = useLoaderData();
+  return <div>{data.message}</div>;
+};
+```
+
+
+### 使用 Client Loader
+
+
+默认情况下，在 SSR 应用中，`loader` 函数只会在服务端执行。但有些场景下，开发者可能期望在浏览器端发送的请求不经过 SSR 服务，直接请求数据源，例如：
+
+1. 在浏览器端希望减少网络消耗，直接请求数据源。
+2. 应用在浏览器端有数据缓存，不希望请求 SSR 服务获取数据。
+
+Modern.js 支持在 SSR 应用中额外添加 `.data.client` 文件，同样具名导出 `loader`。此时 SSR 应用在服务端执行 Data Loader 报错降级，或浏览器端切换路由时，会像 CSR 应用一样在浏览器端执行该 `loader` 函数，而不是再向 SSR 服务发送数据请求。
+
+```ts title="page.data.client.ts"
+import cache from 'my-cache';
+
+export async function loader({ params }) {
+  if (cache.has(params.id)) {
+    return cache.get(params.id);
+  }
+  const res = await fetch(`URL_ADDRESS?id=${params.id}`);
+  const data = await res.json();
+  return {
+    message: data.message,
+  }
+}
+```
+
+
+
+## SSR 降级
+
+在 Modern.js 中，如果应用在 SSR 过程中出现异常，Modern.js 会自动降级到 CSR 模式，并在 CSR 重新发起数据请求，保证页面能够正常展示。SSR 降级的原因主要分为两种：
+
+1. Data Loader 执行报错
+2. React 组件在服务端渲染报错
+
+### Data Loader 执行报错
+
+默认情况下，如果路由对应的 `loader` 函数执行报错，框架会在服务端直接渲染 `<ErrorBoundary>` 组件，并展示错误信息，这也是社区内大多数框架的默认行为。
+
+Modern.js 也支持通过 [`server.ssr`](/configure/app/server/ssr) 配置项中的 `loaderFailureMode` 字段，自定义降级策略。当该字段被配置为 `clientRender` 时，会直接降级到 CSR 模式，并重新发起数据请求。
+
+此时，如果路由中定义了 Client Loader，则会优先使用 Client Loader 发起数据请求。如果重新渲染仍然出错，再展示 `<ErrorBoundary>` 组件。
+
+{/* Todo 补个图 */}
+
+### 组件渲染报错
+
+如果 Data Loader 执行正常，但组件渲染报错时，SSR 渲染将会部分或完全失败，例如以下代码：
+
+```tsx
+import { Await, useLoaderData } from '@modern-js/runtime/router';
+import { Suspense } from 'react';
+
+const Page = () => {
+  const data = useLoaderData();
+  const isNode = typeof window === 'undefined';
+  const undefinedVars = data.unDefined;
+  const definedVars = data.defined;
+
+  return (
+    <div>
+      {isNode ? undefinedVars.msg : definedVars.msg}
+    </div>
+  );
+};
+
+export default Page;
+```
+
+此时，Modern.js 会将页面降级为 CSR，并利用 Data Loader 中已有的数据渲染。如果重新渲染仍然出错，则展示 `<ErrorBoundary>` 组件。
+
+:::tip
+组件渲染报错的行为，不会受到 `loaderFailureMode` 的影响，也不会在浏览器端执行 Client Loader。
+:::
+
+{/* Todo 补个图 */}
+
+## 日志与监控
+
+import Monitor from '@site-docs/components/ssr-monitor';
+
+<Monitor />
+
+## 页面缓存
+
+Modern.js 中内置了缓存的能力，详细请参考[渲染缓存](/guides/basic-features/render/ssr-cache)。
+
+## 运行环境差异
+
+SSR 应用会同时运行在服务端和浏览器端，两者在运行环境上不完全相同，存在 Web API 和 Node API 的差异。
+
+开启 SSR 时，Modern.js 会用相同的入口，构建出 SSR Bundle 和 CSR Bundle 两份产物。因此，在 SSR Bundle 中存在 Web API，或是在 CSR Bundle 中存在 Node API 时，都可能导致运行出错。出现这类问题的场景主要是两类：
+
+- 应用自身代码存在问题
+- 应用依赖的包中存在副作用
+
+### 自身代码问题
+
+这种场景通常出现在应用从 CSR 迁移到 SSR，CSR 应用通常会在代码中引入 Web API。例如应用希望做全局的事件监听：
+
+```tsx
+document.addEventListener('load', () => {
+  console.log('document load');
+});
+const App = () => {
+  return <div>Hello World</div>;
+};
+export default App;
+```
+
+对于这种场景，你可以直接使用 Modern.js 内置的环境变量 `MODERN_TARGET` 进行判断，在构建时删除无用代码：
+
+```ts
+if (process.env.MODERN_TARGET === 'browser') {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
+开发环境打包后，SSR 产物和 CSR 产物会被编译成以下内容。因此 SSR 环境中不会再因为 Web API 报错：
+
+```ts
+// SSR 产物
+if (false) {
+}
+
+// CSR 产物
+if (true) {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
+:::note
+更多内容可以查看[环境变量](/guides/basic-features/env-vars)。
+:::
+
+### 依赖中的副作用
+
+这类场景是在 SSR 应用中随时可能出现的，因为社区中的包并不都支持在两个运行环境中运行，有些包也无需在两个环境中运行。例如在代码中引入了包 A，它内部有使用了 Web API 的副作用：
+
+```ts title="packageA"
+document.addEventListener('load', () => {
+  console.log('document load');
+});
+
+export const doSomething = () => {}
+```
+
+如果直接引用到组件中，会造成 SSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
+
+```tsx title="routes/page.tsx"
+import { doSomething } from 'packageA';
+
+export const Page = () => {
+  if (process.env.MODERN_TARGET === 'browser') {
+    doSomething();
+  }
+  return <div>Hello World</div>
+}
+```
+
+Modern.js 也支持通过 `.server.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。可以创建同名的 `.ts` 和 `.server.ts` 文件做一层代理：
+
+```ts title="a.ts"
+export { doSomething } from 'packageA';
+```
+
+```ts title="a.server.ts"
+export const doSomething: any = () => {};
+```
+
+在文件中直接引入 `./a`，此时 SSR 打包下会优先使用 `.server.ts` 后缀的文件，CSR 打包下会使用 `.ts` 后缀的文件。
+
+```tsx title="routes/page.tsx"
+import { doSomething } from './a'
+
+export const Page = () => {
+  doSomething();
+  return <div>Hello World</div>
+}
+```
+
+## 常见问题
+
+### 保持渲染一致
+
+SSR 业务需要保证在服务端渲染时的结果和浏览器端 Hydrate 的结果一致，否则很有可能出现不符合预期的渲染结果。这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题，在组件中添加以下代码：
+
+```tsx
+{
+  typeof window !== 'undefined' ? <div>browser content</div> : null;
+}
+```
+
+启动应用后，访问页面，会发现浏览器控制台抛出警告信息：
+
+```sh
+Warning: Expected server HTML to contain a matching <div> in <div>.
+```
+
+这是 React hydrate 结果与 SSR 渲染结果不一致造成的。虽然当前页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
+
+:::info
+关于 React hydrate 逻辑请参考[这里](https://zh-hans.react.dev/reference/react-dom/hydrate)。
+
+:::
+
+应用需要保持 SSR 与 CSR 渲染结果的一致性，如果存在不一致的情况，说明这部分内容无需在 SSR 中进行渲染。Modern.js 为这类在 SSR 中不需要渲染的内容提供 [`<NoSSR>` 工具组件](/apis/app/runtime/ssr/no-ssr)：
+
+```ts
+import { NoSSR } from '@modern-js/runtime/ssr';
+```
+
+在不需要进行 SSR 的元素外部，用 `NoSSR` 组件包裹：
+
+```tsx
+<NoSSR>
+  <div>browser content</div>
+</NoSSR>
+```
+
+修改代码后，刷新页发现之前的 Waring 消失。打开浏览器开发者工具的 Network 窗口，查看返回的 HTML 文档是不包含 `NoSSR` 组件包裹的内容的。
+
+在实际场景中，有些应用的 UI 展示会和用户设备有关，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息。Modern.js 也提供了 `use(RuntimeContext)` 这类 API，可以在组件中获取完整的请求信息，利用它保证 SSR 与 CSR 的渲染结果一致。详细用法请参考[运行时上下文](/guides/basic-features/render/before-render#运行时上下文)。
+
+### 关注内存泄漏
+
+:::warning 警告
+在 SSR 场景下，开发者需要特别关注内存泄露问题，即使是微小的内存泄露，在大量的访问后也会对服务造成影响。
+
+:::
+
+SSR 时，浏览器的每次请求，都会触发服务端重新执行一次组件渲染逻辑。所以，需要避免在全局定义任何可能不断增长的数据结构，或在全局进行事件订阅，或创建不会被销毁的流。
+
+例如以下代码，使用 [redux-observable](https://redux-observable.js.org/) 时，习惯了 CSR 的开发者通常会在组件中这样编码：
+
+```tsx
+/* 代码仅作为示例，不可运行 */
+import { createEpicMiddleware, combineEpics } from 'redux-observable';
+
+const epicMiddleware = createEpicMiddleware();
+const rootEpic = combineEpics();
+
+export default function Test() {
+  epicMiddleware.run(rootEpic);
+  return <div>Hello Modern.js</div>;
+}
+```
+
+在组件外层创建 Middleware 实例 `epicMiddleware`，并在组件内部调用 `epicMiddleware.run`。
+
+在浏览器端，这段代码不会造成任何问题，但是在 SSR 时，Middleware 实例会一直无法被销毁。每次渲染组件，调用 `epicMiddleware.run(rootEpic)` 时，都会在内部添加新的事件绑定，导致整个对象不断变大，最终对应用性能造成影响。
+
+CSR 中这类问题不易被发觉，因此从 CSR 切换到 SSR 时，如果不确定应用是否存在这类隐患，可以对应用进行压测。
+