@modern-js/main-doc 2.58.3 → 2.60.0

package/docs/zh/guides/basic-features/data/data-write.mdx

@@ -5,15 +5,17 @@ sidebar_position: 4
 
 # 数据写入
 
-在 Data Loader 章节中，介绍了 Modern.js 获取数据的方式，你可能会遇到两个问题：
-1. 如何更新 Data Loader 中的数据？
+在[数据获取](/guides/basic-features/data/data-fetch)章节中，介绍了 Modern.js 获取数据的方式，你可能会遇到两个问题：
+
+1. 如何更新 Data Loader 返回的数据？
 2. 如何将新的数据传递到服务器?
 
-EdenX 对此的解决方案是 DataAction。
+在 Modern.js 中，可以通过 Data Action 解决和实现。
+
+## 什么是 Data Action
 
-## 基本示例
+Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `action` 函数，我们称为 Data Action，开发者可以在合适的时机调用它：
 
-Data Action 和 Data Loader 一样，也是基于约定式路由的，通过 Modern.js 的[约定式（嵌套）路由](/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts`，`page.ts` 或 `$.tsx`)可以有一个同名的 `data` 文件，`data` 文件中可以导出一个命名为 `action` 的函数。
 ```bash
 .
 └── routes
@@ -21,17 +23,21 @@ Data Action 和 Data Loader 一样，也是基于约定式路由的，通过 Mod
         ├── layout.tsx
         └── layout.data.ts
 ```
-在文件中定义以下代码：
+
+在 `routes/user/layout.data.ts` 文件中，可以导出一个 Data Action 函数：
+
 ```ts title="routes/user/layout.data.ts"
 import type { ActionFunction } from '@modern-js/runtime/router';
 
 export const action: ActionFunction = ({ request }) => {
-    const newUser = await request.json();
-    const name = newUser.name;
-    return updateUserProfile(name);
+  const newUser = await request.json();
+  const name = newUser.name;
+  return updateUserProfile(name);
 }
 ```
 
+在路由组件中，你可以通过 `useFetcher` 获取对应 `submit` 函数，执行并触发 Data Action：
+
 ```tsx title="routes/user/layout.tsx"
 import {
   useFetcher,
@@ -64,41 +70,24 @@ export default () => {
 }
 ```
 
-这里当执行 submit 后，会触发定义的 action 函数；在 action 函数中，可以通过 request （request.json，request.formData）获取提交的数据，获取数据后，再发送数据到服务端。
+当执行 `submit` 后，会触发定义的 `action` 函数。在 `action` 函数中，可以通过[入参](/guides/basic-features/data/data-write.html#入参)获取提交的数据，最终发送数据到服务端。
 
-而 action 函数执行完，会执行 loader 函数代码，并更新对应的数据和视图。
+`action` 函数执行完后，Modern.js 将自动执行 `loader` 函数代码，并更新对应的数据和视图。
 
 ![action flow](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-flow.png)
 
-
-
-## 为什么要提供 Data Action
-
-Modern.js 中提供 Data Action 主要是为了使 UI 和服务器的状态能保持同步，通过这种方式可以减少状态管理的负担，
-传统的状态管理方式，会在客户端和远程分别持有状态：
-
-![traditional state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage.png)
-
-而在 Modern.js 中，我们希望通过 Loader 和 Action 帮助开发者自动的同步客户端和服务端的状态：
-
-![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
-
-如果项目中组件共享的数据主要来自于服务端的状态，则无需在项目引入客户端状态管理库。可以使用 Data Loader 请求数据，通过 [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md) 在子组件中共享数据，使用 Data Action 修改和同步服务端的状态。
-
-
-
 ## `action` 函数
 
-与 `loader` 函数一样，`action` 函数有两个入参，`params` 和 `request`：
+与 `loader` 函数一样，`action` 函数有两个入参，`params` 和 `request`。
 
-### `params`
+### params
 
-当路由文件通过 `[]` 时，会作为[动态路由](/guides/basic-features/routes#动态路由)，动态路由片段会作为参数传入 `action` 函数：
+`params` 是当路由为[动态路由](/guides/basic-features/routes#动态路由)时动态路由片段，会作为参数传入 `action` 函数：
 
-```tsx
-// routes/user/[id]/page.data.ts
+```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';
 
+// 访问 /user/123 时，函数的参数为 `{ params: { id: '123' } }`
 export const action = async ({ params }: ActionFunctionArgs) => {
   const { id } = params;
   const res = await fetch(`https://api/user/${id}`);
@@ -106,18 +95,11 @@ export const action = async ({ params }: ActionFunctionArgs) => {
 };
 ```
 
-当访问 `/user/123` 时，`action` 函数的参数为 `{ params: { id: '123' } }`。
-
+### request
 
-### `request`
+`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。通过 `request`，可以在 action 函数中获取到浏览器端提交的数据，如 `request.json()`，`request.formData()`，`request.json()` 等。具体使用哪个 API，请参考[数据类型](#数据类型)。
 
-`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。
-
-通过 `request`，可以在 action 函数中获取到客户端提交的数据，如 `request.json()`，`request.formData()`，`request.json()` 等，
-具体应该使用哪个 API，请参考[数据类型](#数据类型)。
-
-```tsx
-// routes/user/[id]/page.data.ts
+```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';
 
 export const action = async ({ request }: ActionFunctionArgs) => {
@@ -131,13 +113,12 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 `action` 函数的返回值可以是任何可序列化的内容，也可以是一个 [Fetch Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) 实例，
 可以通过 [`useActionData`](https://reactrouter.com/en/main/hooks/use-action-data) 访问 response 中内容。
 
-
 ## useSubmit 和 useFetcher
 
 ### 区别
 
-你可以通过 [`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit) 或 [`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher) 调用 action，它们的区别是通过
-`useSubmit` 调用 action，会触发浏览器的导航，通过 `useFetcher` 则不会触发浏览器的导航。
+你可以通过 [`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit) 或 [`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher) 调用 Data Action。它们的区别是通过
+`useSubmit` 调用，会触发浏览器的导航，通过 `useFetcher` 则不会触发浏览器的导航。
 
 useSubmit:
 
@@ -147,19 +128,19 @@ submit(null, { method: "post", action: "/logout" });
 ```
 
 useFetcher:
+
 ```ts
 const { submit } = useFetcher();
 submit(null, { method: "post", action: "/logout" });
 ```
 
-`submit` 函数有两个入参，`method` 和 `action`，`method` 相当于表单提交时的 `method`，大部分写入数据的场景下，`method` 可以传入 `post`，
-`action` 用来指定触发哪个路由组件的 `action`，如果未传入 `action` 入参，默认会触发当前路由组件的 action，即 `user/page.tsx` 组件或子组件中执行 submit，
-会触发 `user/page.data.ts` 中定义的 action。
+`submit` 函数有两个入参，第一个入参是传递到服务端的 `formData`。第二个入参是可选参数，其中
+- `method` 相当于表单提交时的 `method`，大部分写入数据的场景下，`method` 可以传入 `post`。
+- `action` 用来指定触发哪个路由组件的 Data Action，如果未传入 `action` 入参，默认会触发当前路由组件的 action，即 `user/page.tsx` 组件或子组件中执行 submit，会触发 `user/page.data.ts` 中定义的 action。
 
 :::info
-这两个 API 更多的信息可参考相关文档：
-- [`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit)
-- [`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher)
+
+更多 API 的信息可参考相关文档：[`useSubmit`](https://reactrouter.com/en/main/hooks/use-submit)、[`useFetcher`](https://reactrouter.com/en/main/hooks/use-fetcher)。
 
 :::
 
@@ -167,7 +148,9 @@ submit(null, { method: "post", action: "/logout" });
 ### 数据类型
 
 `submit` 函数的第一个入参，可以接受不同类型的值。
+
 如 `FormData`：
+
 ```ts
 let formData = new FormData();
 formData.append("cheese", "gouda");
@@ -176,6 +159,7 @@ submit(formData);
 ```
 
 或 `URLSearchParams` 类型的值：
+
 ```ts
 let searchParams = new URLSearchParams();
 searchParams.append("cheese", "gouda");
@@ -183,7 +167,8 @@ submit(searchParams);
 // In the action, you can get the data by request.json
 ```
 
-或任意 `URLSearchParams` 构造函数可接受的值
+或任意 `URLSearchParams` 构造函数可接受的值：
+
 ```ts
 submit("cheese=gouda&toasted=yes");
 submit([
@@ -207,7 +192,7 @@ submit(
 // In the action, you can get the data by request.formData
 ```
 
-也可以指定为 json 编码：
+你也可以通过第二个参数，指定为编码方式：
 
 ```tsx
 submit(
@@ -224,12 +209,26 @@ submit('{"key":"value"}', {
 ```
 
 或提交纯文本：
+
 ```ts
 submit("value", { method: "post", encType: "text/plain" });
 // In the action, you can get the data by request.text
 ```
 
+## 为什么要提供 Data Action
+
+Modern.js 中提供 Data Action 主要是为了使 UI 和服务器的状态能保持同步，通过这种方式可以减少状态管理的负担，
+传统的状态管理方式，会在浏览器端和远程分别持有状态：
+
+![traditional state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage.png)
+
+而在 Modern.js 中，我们希望通过 Loader 和 Action 帮助开发者自动的同步浏览器端和服务端的状态：
+
+![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
+
+如果项目中组件共享的数据主要来自于服务端的状态，则无需在项目引入浏览器端状态管理库。可以使用 Data Loader 请求数据，通过 [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md) 在子组件中共享数据，使用 Data Action 修改和同步服务端的状态。
+
 
 ## CSR 和 SSR
 
-与 Data Loader 一样，SSR 项目中，Data Action 是在服务端执行的（框架会自动发请求触发 Data Action），而在 CSR 项目中，Data Action 是在客户端执行的。
+与 Data Loader 一样，SSR 项目中，Data Action 是在服务端执行的（框架会自动发请求触发 Data Action），而在 CSR 项目中，Data Action 是在浏览器端执行的。

package/docs/zh/guides/basic-features/debug/_meta.json

@@ -0,0 +1 @@
+["mock", "proxy", "rsdoctor", "using-storybook"]

package/docs/zh/guides/basic-features/debug/rsdoctor.mdx

@@ -0,0 +1,57 @@
+import { PackageManagerTabs } from '@theme';
+
+# 使用 Rsdoctor
+
+Rsdoctor 是一个支持 Webpack 及 Rspack 构建分析工具。在 Modern.js 中，我们推荐使用 Rsdoctor 来对构建过程与构建产物进行诊断和分析。
+
+## 安装依赖
+
+根据项目是 Rspack 或 Webpack 构建，选择对应的插件安装。
+
+### Rspack 插件
+
+<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />
+
+### Webpack 插件
+
+<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
+
+## 注册插件
+
+在 `modern.config.ts` 中，你可以通过 `tools.bundlerChain` 来注册 Rspack 或 Webpack 插件，参考：
+
+```ts title="modern.config.ts"
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+
+export default {
+  // ...
+  tools: {
+    rspack(config, { appendPlugins }) {
+      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
+      if (process.env.RSDOCTOR) {
+        appendPlugins(
+          new RsdoctorRspackPlugin({
+            // 插件选项
+          }),
+        );
+      }
+    },
+  },
+};
+```
+
+:::note
+上述代码是使用 Rspack 时的示例，如果使用 Webpack 请自行切换插件。
+:::
+
+## 执行构建
+
+在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
+
+```bash
+RSDOCTOR=true npm run build
+```
+
+## 相关文档
+
+更多内容请查阅 [Rsdoctor 官网文档](https://rsdoctor.dev/)。

package/docs/zh/guides/{advanced-features → basic-features/debug}/using-storybook.mdx

@@ -229,4 +229,4 @@ Modern.js 的配置文件默认为 `modern.config.(j|t)s`，配置请查看 [mod
 
 若原来项目中包含了 Babel 等配置，需要对应的写在 modern 配置中，大部分 Babel 配置已经包含进了 Modern.js。
 
-安装完成后进行相应的[配置](/guides/advanced-features/using-storybook#配置)。
+安装完成后进行相应的[配置](/guides/basic-features/debug/using-storybook#配置)。

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -61,7 +61,7 @@ function App() {
 }
 ```
 
-这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化；也便于处理不同环境下代码中的一些副作用。
+这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化，也便于处理不同环境下代码中的一些副作用。
 
 :::note 死代码移除
 在生产环境，Terser 和 SWC 等代码压缩工具会分析代码，并将 dead code 移除，从而减少产物体积，这个过程被称为死代码移除（DCE）。

package/docs/zh/guides/basic-features/render/_meta.json

@@ -0,0 +1 @@
+["ssr", "streaming-ssr", "ssr-cache", "ssg"]

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

@@ -0,0 +1,210 @@
+---
+title: 静态站点生成（SSG）
+---
+
+# 静态站点生成（SSG）
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。这意味着在生产环境中，页面默认就是有内容的，并且可以被 CDN 缓存。对于无需数据的页面，SSG 可以提供更好的性能和更高的安全性。
+
+## 启用 SSG
+
+我们首先需要执行 `pnpm run new` 启用 SSG 功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「SSG」功能
+```
+
+执行命令后，在 `modern.config.ts` 中注册 SSG 插件：
+
+```ts title="modern.config.ts"
+import { ssgPlugin } from '@modern-js/plugin-ssg';
+
+export default defineConfig({
+  output: {
+    ssg: true,
+  },
+  plugins: [..., ssgPlugin()],
+});
+```
+
+## 开发环境调试
+
+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)。
+
+:::
+
+在 `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 行为。
+
+例如以下目录结构，`/`、`/user`、`/user/profle` 三条路由都开启 SSG：
+
+```bash
+.
+├── src
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
+```
+
+可以通过配置 `preventDefault` 来禁用某些路由的默认行为。进行下面配置后，最终只会生成 `/`、`/user/profle` 两条路由的 SSG 页面：
+
+```js
+export default defineConfig({
+  output: {
+    ssg: {
+      preventDefault: ['/user'],
+    },
+  },
+});
+```
+
+## 在自控式路由中使用
+
+**自控式路由**是通过组件代码定义路由，需要应用运行起来才能获取准确的路由信息。因此，无法开箱即用的使用 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)。
+:::
+
+## 添加路由参数
+
+在 Modern.js 中，部分路由可能是动态的，例如自控式路由中的 `/user/:id` 或是约定式路由中 `user/[id]/page.tsx` 文件生成的路由。
+
+可以在 `output.ssg` 中配置具体的参数，渲染指定参数的路由，例如：
+
+```js
+export default defineConfig({
+  output: {
+    ssg: {
+      routes: [
+        {
+          url: '/user/:id',
+          params: [{
+            id: 'modernjs',
+          }],
+        },
+      ],
+    },
+  },
+});
+```
+
+此时，`/user/modernjs` 路由会被渲染，并且在渲染时，会将 `id` 参数传递给组件。当配置多个值时，对应会生成多张页面。
+
+:::note
+动态路由和 SSG 的组合，在根据 CMS 系统数据变更，实时生成静态页面时非常有用。
+:::
+
+
+## 配置渲染请求头
+
+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/{advanced-features/ssr/cache.mdx → basic-features/render/ssr-cache.mdx}

@@ -1,23 +1,20 @@
 ---
-sidebar_position: 3
-title: 缓存
+title: 渲染缓存
 ---
 
 # 渲染缓存
 
-有时我们会将计算结果进行缓存，例如 React useMemo, useCallback Hook。
-通过缓存我们可以减少计算的次数来减少 CPU 资源占用，提高用户体验。
+在开发应用时，有时我们会将计算结果进行缓存，例如使用 React `useMemo`、`useCallback` 等 Hook。通过缓存我们可以减少计算的次数来减少 CPU 资源占用，提高用户体验。
 
-通过将服务器端渲染（SSR）结果进行缓存能够减少服务器每次请求时的计算和渲染时间，从而加速页面加载速度，提高用户体验。
-降低服务端负载，节省计算资源，提高用户访问速度。
+Modern.js 支持将服务器端渲染（SSR）结果进行缓存，减少服务器每次请求时的计算和渲染时间，从而加速页面加载速度，提高用户体验。同时，缓存也能降低服务端负载，节省计算资源，提高用户访问速度。
 
-:::info
+:::tip
 需要 x.43.0+
 :::
 
 ## 配置方式
 
-在 `server/cache.[t|j]s` 中配置缓存即可开启缓存：
+在应用中创建 `server/cache.[t|j]s` 文件，并导出 `cacheOption` 配置缓存即可开启 SSR 渲染缓存：
 
 ```ts title="server/cache.ts"
 import type { CacheOption } from '@modern-js/runtime/server';
@@ -41,14 +38,12 @@ export const cacheOption: CacheOption = {
 ```ts
 export interface CacheControl {
   maxAge: number;
-
   staleWhileRevalidate: number;
-
   customKey?: string | ((pathname: string) => string);
 }
 ```
 
-其中 customKey 为自定义缓存 key。默认情况下 Modern.js 将会把请求 pathname 作为 key 进行缓存，但在某些情况下这不能满足你的需求，开发者可以进行自定义。
+其中 `customKey` 为自定义缓存 key。默认情况下 Modern.js 将会把请求 `pathname` 作为 key 进行缓存，但在某些情况下这不能满足你的需求，开发者可以进行自定义。
 
 **Function 类型**
 
@@ -58,7 +53,7 @@ export type CacheOptionProvider = (
 ) => Promise<CacheControl | false> | CacheControl | false;
 ```
 
-有时开发者需要通过 req 来自定义缓存 key，或者特定 url 时缓存不生效，可以配置为函数的形式进行处理, 例如以下代码：
+有时开发者需要通过 `req` 来自定义缓存 key，或者特定 URL 时缓存不生效，可以配置为函数的形式进行处理, 例如以下代码：
 
 ```ts title="server/cache.ts"
 
@@ -66,13 +61,11 @@ import type { CacheOption, CacheOptionProvider } from '@modern-js/runtime/server
 
 const provider: CacheOptionProvider = (req) => {
   const { url, headers, ... } = req;
-
-  const key = computedKey(url, headers, ...);
-
   if(url.includes('no-cache=1')) {
     return false;
   }
 
+  const key = computedKey(url, headers, ...);
   return {
     maxAge: 500, // ms
     staleWhileRevalidate: 1000, // ms
@@ -89,7 +82,7 @@ export const cacheOption: CacheOption = provider;
 export type CacheOptions = Record<string, CacheControl | CacheOptionProvider>;
 ```
 
-有时开发者面对不同的路由需要应用不同的缓存策略。我们也提供一种映射的方式进行配置, 以下列代码为例子
+有时开发者面对不同的路由需要应用不同的缓存策略。我们也提供一种映射的方式进行配置, 以下列代码为例：
 
 ```ts title="server/cache.ts"
 import type { CacheOption } from '@modern-js/runtime/server';
@@ -120,14 +113,13 @@ export const cacheOption: CacheOption = {
 - 路由 `http://xxx/about` 将会应用第二条规则。
 - 路由 `http://xxx/abc` 将会应用最后一条规则。
 
-上述 `/home` 和 `/about` 将会作为模式进行匹配，这意味着 `/home/abc` 也会匹配上该规则。
-同时，你也可以在其中编写正则语法：`/home/.+`
+上述 `/home` 和 `/about` 将会作为模式进行匹配，这意味着 `/home/abc` 也会匹配上该规则。同时，你也可以在其中编写正则语法：`/home/.+`
 
 ### 缓存容器
 
-默认情况下，Server 将会使用内存进行缓存。但通常情况下服务将会部署在 serverless 上。每一次的服务访问可能都是一个新的进程，这样每次访问都不能应用缓存
+默认情况下，Server 将会使用内存进行缓存。但通常情况下服务将会部署在 Serverless 容器上。每一次的服务访问可能都是一个新的进程，这样每次访问都不能应用缓存。
 
-故开发者也可以自定义缓存容器，容器需实现接口 `Container`
+因此，Modern.js 支持开发者自定义缓存容器，容器需实现接口 `Container`：
 
 ```ts
 export interface Container<K = string, V = string> {
@@ -156,7 +148,7 @@ export interface Container<K = string, V = string> {
 }
 ```
 
-以下面代码为例，开发者可实现一个 redis 容器。
+以下面代码为例，开发者可实现一个 redis 缓存容器。
 
 ```ts
 import type { Container, CacheOption } from '@modern-js/runtime/server';
@@ -194,9 +186,7 @@ export const cacheOption: CacheOption = {
 
 ## 缓存标识
 
-当开启渲染缓存后，Modern.js 将通过响应头 `x-render-cache` 来标识当前请求的缓存状态。
-
-下列是一个响应示例
+当开启渲染缓存后，Modern.js 将通过响应头 `x-render-cache` 来标识当前请求的缓存状态。下面是一个响应示例：
 
 ```bash
 < HTTP/1.1 200 OK
@@ -209,11 +199,11 @@ export const cacheOption: CacheOption = {
 < Content-Length: 2937
 ```
 
-`x-render-cache` 可能会有以下几种值
+`x-render-cache` 可能会有以下几种值：
 
 | 名称    | 说明                                               |
 | ------- | -------------------------------------------------- |
 | hit     | 缓存命中，返回缓存内容                             |
 | stale   | 缓存命中，但数据陈旧，返回缓存内容的同时做重新渲染 |
 | expired | 缓存命中，重新渲染后返回渲染结果                   |
-| miss    | 缓存未命中                                         |
+| miss    | 缓存未命中                                         |