@modern-js/main-doc 0.0.0-next-20221116121040

package/zh/guides/advanced-features/compatibility.md

@@ -0,0 +1,89 @@
+---
+title: 客户端兼容性
+sidebar_position: 5
+---
+
+## Polyfill 模式
+
+### 编译时 Polyfill
+
+Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js) 引入对应的 Polyfill 代码。
+
+默认情况下会根据项目 [Browserslist](https://github.com/browserslist/browserslist) 的设置情况引入所需的 Polyfill 代码， 这样基本不用再担心项目源码和第三方依赖的 Polyfill 问题了，但是因为包含了一些没有用到的 Polyfill 代码，所以最终的包大小可能会有所增加。
+
+:::info 注
+对于明确第三方依赖不需要 Polyfill 的场景，可以设置 [`output.polyfill`](/docs/configure/app/output/polyfill) 为 `usage`, 这样 Babel 编译时只会根据代码中使用到的语法引入 Polyfill 代码。
+:::
+
+### 运行时按需 Polyfill
+
+Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
+
+* 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+* 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+
+可以通过微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作：启用可选功能
+? 启用可选功能：启用「基于 UA 的 Polyfill」功能
+```
+
+安装依赖后，配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run start` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
+
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+
+## 差异化分发
+
+Modern.js 提供了运行时基于浏览器 User Agent 的差异化分发方案, 设置 [`output.enableModernMode`](/docs/configure/app/output/enable-modern-mode) 后， 生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物和针对旧版本浏览器带有 Polyfill 的 JS 产物:
+
+```bash title="dist/static/js"
+├── 370.95db0e84-es6.js
+├── 370.95db0e84-es6.js.map
+├── 370.ace5d8a0.js
+├── 370.ace5d8a0.js.map
+├── main.64eb3bc7-es6.js
+├── main.64eb3bc7-es6.js.map
+├── main.c8aab430.js
+├── main.c8aab430.js.map
+├── runtime-main.9ad9a46b-es6.js
+├── runtime-main.9ad9a46b-es6.js.map
+├── runtime-main.dccca6e0.js
+└── runtime-main.dccca6e0.js.map
+```
+
+同时 HTML 也会构建出对应的 ES6 版本:
+
+```js title="dist/html/main/index-es6.html"
+<script defer="defer" src="/static/js/370.95db0e84-es6.js"></script>
+```
+
+```js title="dist/html/main/index.html"
+<script defer="defer" src="/static/js/370.ace5d8a0.js"></script>
+```
+
+通过 `pnpm run build && pnpm run start` 启动服务器, 访问页面时，会根据浏览器信息决定返回 `index-es6.html` 还是 `index.html`。
+
+:::info 注
+内部目前使用 [@babel/compat-data](https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/native-modules.json) 来判断具体浏览器是否支持 es6 语法。
+:::
+
+## Browserslist 配置
+
+Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+
+Modern.js 中默认值如下:
+
+```js
+['> 0.01%', 'not dead', 'not op_mini all']
+```
+
+可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。

package/zh/guides/advanced-features/custom-app.md

@@ -0,0 +1,4 @@
+---
+title: 自定义入口
+sidebar_position: 7
+---

package/zh/guides/advanced-features/eslint.md

@@ -0,0 +1,146 @@
+---
+title: ESLint 规则集
+sidebar_position: 8
+---
+
+<!-- 参考 [实战教程 - 确认编程环境](../handbook/c03-ide/3.1-setting-up) 确保本地 IDE 环境正常。 -->
+
+**Modern.js ESLint 规则集**是全量的 **ESLint** 规则集合，包含 `@modern-js` （对于 Node.js 项目的 Lint 规则）和 `@modern-js-app`（对于前端项目的 Lint 规则）。
+
+下面以具体问题介绍更多 ESLint 用法。
+
+## Q: 如何处理 Lint
+
+### 实时自动修复
+
+多数问题会被 ESLint 规则的自动修复功能或 [Prettier](https://prettier.io/) 的代码格式化功能（已被集成到 ESLint 里）自动解决，开发者不需要关心问题的细节和解决方式。
+
+:::info 注
+主要在 IDE 保存文件的环节执行这种自动修复，少数漏网之鱼会在提交代码环节被自动修复。
+:::info 注
+### 批量自动修复
+
+在少数情况下，比如旧项目迁移的时候，可以执行以下命令，批量修复和检查所有文件：
+
+```bash
+pnpm run lint:error
+```
+
+### 人工修复
+
+对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
+
+
+### 声明例外情况
+
+目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。
+
+这种情况下可以用 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 注释，对符合**少数情况**的代码块做标注，声明这里是一个例外，应该忽略。比如：
+
+```js
+/* eslint-disable filenames/match-exported */
+...
+/* eslint-enable filenames/match-exported */
+```
+
+:::info 注
+在 VS Code 编辑器里输入 eslint，会自动出现关于 "eslint-disable" 的提示框，选择提示选项生成对应注释对。
+:::
+
+【Modern.js ESLint 规则集】要求 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 必须成对使用，必须明确表达要影响的范围，以及在这个范围内明确表达要禁用什么规则，目的是让**例外**有明确的、最小化的范围，避免 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 被滥用，导致不属于例外的代码也被禁用了规则。
+
+### 添加自定义配置
+
+<!-- 见 [如何自定义 Lint 规则](/guide/more-guides/more-about-lint#q-如何自定义-lint-规则) -->
+
+## Q: 如何自定义 ESLint 规则
+
+### 仓库根目录下 `package.json` 里的 "eslintConfig" 字段
+
+这个地方是整个仓库的默认 ESLint 配置，是针对纯 Node.js 代码（只能在 Node.js 里运行）设计的。
+
+如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置。该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
+
+```json
+ "eslintConfig": {
+    "extends": [
+      "@modern-js"
+    ],
+    "rules": {
+      "filenames/match-exported": "off"
+    }
+  },
+
+```
+
+### `src/.eslintrc.json` 文件
+
+Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
+
+:::info 注
+Universal JS 代码是既能浏览器端也能在服务器端运行的代码。
+:::
+
+如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置，该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
+
+```json
+{
+  "extends": [
+    "@modern-js-app"
+  ],
+  "rules": {
+    "filenames/match-exported": "off"
+  }
+}
+```
+
+如果有需要，还可以继续在不同的子目录里增加 `.eslintrc.json` 文件，针对这个子目录里的代码做特殊配置：
+
+```json
+{
+  "rules": {
+    "filenames/match-exported": "off"
+  }
+}
+```
+
+:::tip 提示
+注意：没有必要使用 `extends` 字段，会自动继承父目录的配置。
+:::
+
+### package.json 里的 `eslintIgnore` 字段
+
+把包含 `.js`、`.jsx`、`.ts`、`.tsx` 文件、但不需要做代码检查和自动修复的目录，添加到 `eslintIgnore` 里，可以优化 ESLint 检查的速度，比如：
+
+```json
+ "eslintIgnore": [
+    "node_modules",
+    "dist",
+    "output"
+  ],
+```
+
+## Q: 如何升级 ESLint 插件的版本
+
+只要不是 Major 版本的变化（不符合 [Semver](https://semver.org/) 规则的 `^` 符号），就可以直接在业务项目的 `package.json` 里指定这个依赖，删除 Lock 文件（或尝试手动删除 Lock 文件中这个包名的内容），执行 `pnpm install` 重新安装依赖并且生成新的 Lock 文件。
+
+做完这些操作之后，在业务项目的 `./node_modules` 目录里，这个插件应该只存在一份，并且升级到了你指定的版本。
+
+:::tip 提示
+- Major 版本就是主版本号。更多信息，请阅读【[Semantic Versioning](https://semver.org/#summary)】。
+- 所有被 Modern.js 封装的上游项目（比如 ESLint、[ESLint 插件](https://eslint.org/docs/user-guide/configuring/plugins#plugins)、[React Router](https://reactrouter.com/) 等），也都可以这样升级。
+- Modern.js 也会在每次发版中尽量及时的升级这些上游依赖。
+- Major 版本的升级需要由 Modern.js 来发版。
+:::
+
+## Q: WebStorm 有时候会报 ESLint 错误
+
+由于 WebStorm 认为 ESLint 执行目录是根据 `.eslintrc` 文件来决定的。因此 `src/.eslintrc` 文件位置的放置会导致 `tsconfig.json` 文件指定的位置（项目根目录下）在 `src/` 目录下找不到。
+
+此时需要手动配置一下：
+
+```json
+--parser-options=project:../tsconfig.json
+```
+
+![webstorm-lint-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/webstorm-lint-error.png)

package/zh/guides/advanced-features/index.md

@@ -0,0 +1,12 @@
+---
+type: ref
+---
+
+# 进阶功能
+
+本节涵盖了使用应用工程的进阶功能。
+
+
+
+
+

package/zh/guides/advanced-features/low-level.md

@@ -0,0 +1,44 @@
+---
+title: 配置底层工具
+sidebar_position: 11
+---
+
+## 使用方式
+
+Modern.js 内部默认集成了 [Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Webpack](https://webpack.js.org/)、[PostCSS](https://postcss.org/)、[Tailwind CSS](https://tailwindcss.com/) 等工具。通常情况下，默认配置能够满足大多业务开发需求。当有特殊需求时，可以通过底层配置来实现。
+
+以配置 Webpack 为例，只需要在 `modern.config.js` 中添加 [`tools.webpack`](/docs/configure/app/tools/webpack) 即可：
+
+```js title="modern.config.js"
+export default defineConfig({
+  tools: {
+    webpack: config => {
+
+    }
+  }
+})
+```
+
+`tools` 命名空间下的配置都可以设置为 `Object` 或者 `Function`。
+
+值为 `Object` 时，会与内部默认配置进行合并，具体合并策略参考对应的配置选项文档（见下表）。
+
+值为 `Function` 时，第一个参数为内部的默认配置对象，可以直接修改这个对象不做返回，也可以返回一个新的对象或者合并后的对象作为最终结果。
+
+## 底层配置明细
+
+目前提供的底层配置如下表：
+
+| 底层工具 | 配置   |
+| -------- | --------- |
+| DevServer | [tools.devServer](/docs/configure/app/tools/dev-server) |
+| Babel | [tools.babel](/docs/configure/app/tools/babel)|
+| styled-components | [tools.styledComponents](/docs/configure/app/tools/styled-components)|
+| PostCSS | [tools.postcss](/docs/configure/app/tools/postcss)|
+| Less | [tools.less](/docs/configure/app/tools/less) |
+| Sass | [tools.sass](/docs/configure/app/tools/sass) |
+| webpack | [tools.webpack](/docs/configure/app/tools/webpack)|
+| Minify CSS | [tools.minifyCss](/docs/configure/app/tools/minify-css)|
+| terser | [tools.terser](/docs/configure/app/tools/terser)|
+| Tailwind CSS | [tools.tailwind](/docs/configure/app/tools/tailwindcss) |
+| Autoprefixer | [tools.autoprefixer](/docs/configure/app/tools/autoprefixer) |

package/zh/guides/advanced-features/ssg.md

@@ -0,0 +1,151 @@
+---
+title: 静态站点生成
+sidebar_position: 4
+---
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。
+
+:::info 注
+SSG 是构建阶段的解决方案，因此仅对生产环境有效。通过 `dev` 命令运行时，表现效果与 SSR 相同。
+:::
+
+我们首先需要执行`pnpm run new`启用 SSG 功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「SSG」功能
+```
+
+SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
+
+### 在约定式路由中使用
+
+**约定式路由**中， Modern.js 根据入口下的文件结构生成路由，因此框架能够收集完整的路由信息。
+
+例如，以下是一个使用约定式路由的项目目录结构：
+
+```
+├── src/
+│   ├── pages/
+│   │   ├── home.tsx
+│   │   ├── info.tsx
+│   │   └── index.tsx
+```
+
+在 `src/pages/index.tsx` 中添加组件代码：
+
+```jsx title="src/pages/index.tsx"
+export default () => {
+  return  <div>index page</div>
+}
+```
+
+SSG 和 SSR 一样，也是在 Node.js 环境中完成页面渲染，因此我们可以在开发阶段开启 SSR，提前在开发阶段验证 SSG 渲染效果：
+
+```js title="modern.config.js"
+export default defineConfig({
+  server: {
+    ssr: process.env.NODE_ENV === 'development',
+  }
+}
+```
+
+在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件：
+
+![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-dev.png)
+
+在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/home/index.html` 和 `main/info/index.html` 3 个 HTML 文件，分别对应 `/`、`/home`、`/info` 3 个约定式路由，可见**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `index page` 的文本内容，这正是 SSG 的效果。
+
+![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-build.png)
+
+执行 `pnpm run start` 启动项目后，访问页面，在浏览器我们工具的 Network 窗口，查看请求返回的文档，文档包含组件渲染后的完整页面内容。
+
+### 在自控式路由中使用
+
+**自控式路由**是通过组件代码自定义路由，需要应用运行起来才能获取准确的路由信息。因此，无法开箱即用的使用 SSG 功能。此时需要用户提前告知 Modern.js 框架，哪些路由需要开启 SSG 功能。
+
+例如有以下代码：
+
+```ts
+import { Switch, Route } from '@modern-js/runtime/router';
+
+export default () => (
+  <Switch>
+    <Route path="/" exact={true}>
+      <div>Home</div>
+    </Route>
+    <Route path="/foo" exact={true}>
+      <div>Foo</div>
+    </Route>
+  </Switch>
+);
+```
+
+希望为 `/foo` 路由开启 SSG 功能，同样利用 `output.ssg` 配置。该参数允许配置页面信息，告知 Modern.js 开启指定路由的 SSG 功能。
+
+例如上述入口中，包含两条客户端路由，分别是 `/` 和 `/foo`，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`。如果我们希望同时开启 `/foo` 的 SSG 功能，可以这样配置：
+
+```js title="modern.config.js"
+export default defineConfig({
+  output: {
+    ssg: {
+      routes: ['/', '/foo'],
+    },
+  },
+})
+```
+
+执行 `pnpm run build` 与 `pnpm run start` 后，访问 `http://localhost:8080/foo`，在 Preview 视图中可以看到页面已经完成渲染。
+
+查看构建产物文件，可以看到 `dist/` 目录中，在默认的 `main` 入口产物目录下，新增一个 `foo.html` 文件：
+
+![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-foo.png)
+
+:::info
+以上仅介绍了单入口的情况，与部分配置。更多相关内容可以查看 [API 文档](/docs/configure/app/output/ssg)。
+:::
+
+### 获取数据
+
+在 SSR 中，组件可以通过 `useLoader` 同构的获取数据。在 SSG 中，Modern.js 也提供了相同的能力。
+
+调用 `useLoader` 时，在第二个参数中设置 `{ static: true }`，可以在 SSG 阶段执行数据的请求。
+
+:::info 注
+- Modern.js 目前还不支持 SSG 与 SSR 混合渲染，敬请期待。
+- 在开发阶段，不管 `useLoader` 是否配置 `{ static: true }`，函数都会在 SSR 时获取数据。
+:::
+
+修改上述 `App.ts` 的代码为：
+
+```ts title="App.ts"
+import { Switch, Route } from '@modern-js/runtime/router';
+import { useLoader } from '@modern-js/runtime';
+
+export default () => {
+  const { data } = useLoader(
+    async () => ({
+      message: Math.random(),
+    }),
+    {
+      static: true,
+      params: 'foo',
+    },
+  );
+
+  return (
+    <Switch>
+      <Route path="/" exact={true}>
+        <div>Home</div>
+      </Route>
+      <Route path="/foo" exact={true}>
+        <div>Foo, {data?.message}</div>
+      </Route>
+    </Switch>
+  );
+};
+```
+
+执行 `pnpm run dev`，重复刷新页面，可以看到 `/foo` 页面的渲染结果不断发生变化，说明数据是在请求时获取的。
+
+重新执行 `pnpm run build` 后，执行 `pnpm run start`，重复刷新页面，发现页面渲染结果始终保持同样的内容，说明数据在请求时不会再次获取。

package/zh/guides/advanced-features/ssr.md

@@ -0,0 +1,186 @@
+---
+title: 服务端渲染
+sidebar_position: 3
+---
+
+在 Modern.js 中，和 Web Server 一样，SSR 服务与应用也是一体的，开发者无需为 SSR 编写复杂的服务端逻辑。同样，开发者也无需关心 SSR 服务的运维，Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
+
+Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configure/app/server/ssr) 为 `true` 即可：
+
+```json title="package.json"
+{
+  "server": {
+    "ssr": true
+  }
+}
+```
+
+## SSR 时的数据请求
+
+Modern.js 中提供了 `useLoader` Hooks API，可以在某些场景下代替 `useEffect` 进行数据请求。这是一个同构的 API，直接使用它即可完成在服务端的数据获取：
+
+```ts
+const { data, loading, error } = useLoader(() => {
+  return loadData()
+});
+```
+
+Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发体验。并且提供了优雅的降级处理，一旦 SSR 请求失败，会自动降级在浏览器端重新发起请求。
+
+不过，开发者仍然需要关注数据的兜底处理，例如 `null` 值或不符合预期的数据返回。避免在 SSR 时产生 React 渲染错误或是返回凌乱的渲染结果。
+
+:::info 补充信息
+关于 `useLoader` 的详细介绍可以参考[这里](/docs/apis/app/runtime/container/use-loader)。
+:::
+
+## 保持渲染一致
+
+代码中区分 SSR 和 CSR 渲染，通常需要根据当前的运行容器环境特征做判断，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息或是某个 Native 模块。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
+
+这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题。
+
+在组件中添加以下代码：
+
+```tsx
+{
+  typeof window !== 'undefined' ? (
+    <div>
+      browser content
+    </div>
+  ) : null;
+}
+```
+
+启动应用后，访问页面，会发现浏览器控制台抛出警告信息：
+
+```sh
+Warning: Expected server HTML to contain a matching <div> in <div>.
+```
+
+这是因为 React 在客户端执行注水逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
+
+:::info 注
+关于注水逻辑请参考[这里](https://reactjs.org/docs/react-dom.html#hydrate)。
+:::
+
+应用需要保持 SSR 与 CSR 渲染结果的一致性，如果存在不一致的情况，说明这部分内容无需在 SSR 中进行渲染。Modern.js 为这类在 SSR 中不需要渲染的内容提供 [`<NoSSR>` 工具组件](/docs/apis/app/runtime/app/use-runtime-context)：
+
+```ts
+import { NoSSR } from '@modern-js/runtime/ssr';
+```
+
+在不需要进行 SSR 的元素外部，用 `NoSSR` 组件包裹：
+
+```tsx
+<NoSSR>
+  <div>
+    client content
+  </div>
+</NoSSR>
+```
+
+修改代码后，刷新页发现之前的 Waring 消失。打开浏览器开发者工具的 Network 窗口，查看返回的 HTML 文档是不包含 `NoSSR` 组件包裹的内容的。
+
+:::info 补充信息
+[`useRuntimeContext`](/docs/apis/app/runtime/app/use-runtime-context) 可以获取完整的请求信息，可以利用它保证 SSR 与 CSR 的渲染结果一致。
+:::
+
+## 关注内存泄漏
+
+:::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 时，如果不确定应用是否存在这类隐患，可以对应用进行压测。
+
+## 收敛服务端数据
+
+为了保持 SSR 阶段请求的数据，可以在浏览器端直接使用， Modern.js 会将渲染过程中收集的数据与状态注入到 HTML 内。但是，CSR 应用常常存在接口数据量大、组件状态未收敛的情况，这时如果直接使用 SSR，渲染得到的 HTML 体积可能会存在过大的问题。此时，SSR 不仅无法为应用带来用户体验上的提升，反而可能起到相反的作用。
+
+因此，使用 SSR 时，**开发者需要为应用做合理的瘦身**：
+
+1. 关注首屏，SSR 中可以只请求首屏需要的数据，并在浏览器端渲染剩余的部分。
+2. 将与渲染无关的数据，从接口返回数据中剔除。
+
+## Serverless Pre-render
+
+Modern.js 提供 Serverless Pre-rendering (SPR) 这一特性来提升 SSR 性能。
+
+SPR 利用预渲染与缓存技术，为 SSR 页面提供静态 Web 的响应性能。它让 SSR 应用拥有静态 Web 页面的响应速度与稳定性，同时还能保持数据的动态更新。
+
+在 Modern.js 中使用 SPR 非常简单，只需要在组件中新增 `PreRender` 组件，该组件所在的页面就会自动开启 SPR。
+
+这里模拟一个使用 `useLoader` API 的组件，`useLoader` 中的请求需要消耗 2s 时间。
+
+```jsx
+import { useLoader } from '@modern-js/runtime';
+
+export default () => {
+  const { data } = useLoader(
+    async () => {
+      await new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(null);
+        }, 2000);
+      });
+
+      return {
+        message: 'Hello Modern.js',
+      };
+    },
+    {
+      params: 'foo',
+    },
+  );
+
+  return <div>{data?.message}</div>;
+};
+```
+
+执行 `dev` 命令后，打开页面，可以明显的察觉到页面需要等到 2s 后才返回。
+
+接下来使用 `PreRender` 组件来进行优化，该组件可以直接从 `@modern-js/runtime/ssr` 中导出：
+
+```ts
+import { PreRender } from '@modern-js/runtime/ssr';
+```
+
+在路由组件内使用 `PreRender` 组件，并设置参数 `interval`，用于表示该次渲染结果的过期时间为 5s：
+
+```tsx
+<PreRender interval={5} />
+```
+
+修改后，执行 `pnpm run build && pnpm run start` 启动应用，并打开页面。
+
+首次打开时，和之前的渲染并没有什么不同，同样存在 2s 延迟。点击刷新，页面瞬间打开，但此时，页面数据并没有因为刷新发生变化，这是因为缓存还没有过期。
+
+等待 5s，重新刷新页面，页面的数据仍然没有变化。再一次刷新页面数据发生变化，但是页面仍然几乎是瞬间响应的。
+这是因为在之前的请求时，SPR 已经在后台异步获取了新的渲染结果，本次请求到的页面是已经缓存在服务器中的版本。
+
+可以想象，当 `interval` 设置为 1 时，用户可以在感知到实时数据的同时，拥有静态页面的响应体验。
+
+:::info 补充信息
+`PreRender` 的详细使用可以参考[这里](/docs/apis/app/runtime/app/pre-render)。
+:::

package/zh/guides/advanced-features/testing.md

@@ -0,0 +1,4 @@
+---
+title: 测试
+sidebar_position: 10
+---

package/zh/guides/advanced-features/typescript.md

@@ -0,0 +1,4 @@
+---
+title: TS 支持
+sidebar_position: 9
+---