@modern-js/main-doc 2.7.0 → 2.8.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @modern-js/main-doc@2.7.0 build /github/workspace/packages/toolkit/main-doc
+> @modern-js/main-doc@2.8.0 build /home/runner/work/modern.js/modern.js/packages/toolkit/main-doc
 > npx ts-node ./scripts/sync.ts
 

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @modern-js/main-doc
+
+## 2.8.0
+
+### Patch Changes
+
+- ea7bb41e30: feat: add custom web server docs
+  feat: 添加自定义 Web Server 文档
+- 1104a9f18b: feat: support start web service only
+  feat: 支持只启动 web 服务
+- bd58566b32: Fix Typo
+
+  修复 Typo
+
+- Updated dependencies [9736c6a43d]
+- Updated dependencies [2c1151271d]
+  - @modern-js/builder-doc@2.8.0

package/README.md

@@ -19,8 +19,8 @@ Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-sta
 
 ## Contributing
 
-Please read the [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md).
+Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/blob/main/CONTRIBUTING.md).
 
 ## License
 
-Modern.js is [MIT licensed](https://github.com/modern-js-dev/modern.js/blob/main/LICENSE).
+Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).

package/en/apis/app/commands.mdx

@@ -20,6 +20,7 @@ Options:
   -c --config <config>  configuration file path, which can be a relative path or an absolute path
   -h, --help            show command help
   --analyze             analyze the bundle and view size of each module
+  --web-only            only start web service
   --api-only            only start API service
 ```
 
@@ -161,6 +162,7 @@ Usage: modern serve [options]
 Options:
   -c --config <config>  configuration file path, which can be a relative path or an absolute path
   -h, --help            show command help
+  --web-only            only run web service
   --api-only            only run API service
 ```
 

package/en/apis/app/runtime/model/connect.mdx

@@ -9,7 +9,7 @@ import ReduckTip from "@site-docs-en/components/reduck-tip"
 <ReduckTip />
 
 :::tip
-The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**connect**](https://github.com/modern-js-dev/reduck/blob/main/packages/react/src/connect.ts).
+The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**connect**](https://github.com/web-infra-dev/reduck/blob/main/packages/react/src/connect.ts).
 
 :::
 

package/en/apis/app/runtime/model/model_.mdx

@@ -9,7 +9,7 @@ import ReduckTip from "@site-docs-en/components/reduck-tip"
 <ReduckTip />
 
 :::tip
-The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**model**](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/model.ts).
+The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**model**](https://github.com/web-infra-dev/reduck/blob/main/packages/store/src/model/model.ts).
 
 :::
 

package/en/apis/app/runtime/model/use-model.mdx

@@ -9,7 +9,7 @@ import ReduckTip from "@site-docs-en/components/reduck-tip"
 <ReduckTip />
 
 :::tip
-The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**model**](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/model.ts).
+The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**model**](https://github.com/web-infra-dev/reduck/blob/main/packages/store/src/model/model.ts).
 
 :::
 

package/en/apis/app/runtime/web-server/hook.mdx

@@ -3,7 +3,7 @@ title: Hook
 ---
 # Hook
 
-Used to extend Modern.js built-in Web Server, requests except BFF are handled by these hooks.
+Used to extend Modern.js built-in Web Server, all page requests are handled by these hooks.
 
 :::note
 For more detail, see [Extend Web Server](/guides/advanced-features/web-server).
@@ -63,7 +63,7 @@ type HookContext = {
 function Hook(context: HookContext, next: NextFunction): Promsie<void> | void;
 ```
 
-different Hooks additionally provide different contexts. Currently Modern.js support `AtferMatch` and `AfterRender`.
+different Hooks additionally provide different contexts. Currently Modern.js support `AfterMatch` and `AfterRender`.
 
 ```ts
 type AfterMatchContext = HookContext & {

package/en/apis/app/runtime/web-server/middleware.mdx

@@ -3,9 +3,7 @@ title: Middleware
 ---
 # Middleware
 
-Used to extend Modern.js built-in Web Server, only SSR requests are handled by these middleware.
-
-Unlike [Hook](/apis/app/runtime/web-server/hook), middleware can be extended using the framework plugin.
+Used to extend the built-in Web Server of Modern.js, unlike [Hook](/apis/app/runtime/web-server/hook), Middleware can directly operate Node's origin request and response, and can be extended using the framework plugin.
 
 :::note
 For more detail, see [Extend Web Server](/guides/advanced-features/web-server).
@@ -38,6 +36,11 @@ pnpm run new
 ## Function Signature
 
 ```ts
+type Middleware = (
+  context: MiddlewareContext,
+  next: NextFunction,
+) => Promise<void> | void;
+
 type MiddlewareContext = {
   response: {
     set: (key: string, value: string) => void;
@@ -70,11 +73,6 @@ type MiddlewareContext = {
     res: ServerResponse;
   };
 };
-
-type RequestHandler = (
-  context: Context,
-  next: NextFunction,
-) => Promise<void> | void;
 ```
 
 ### Input
@@ -85,6 +83,10 @@ type RequestHandler = (
   - `source`: provides Node.js native `req` and `res` object.
 - `next`: call next listener（not affect the server process, only current hook）.
 
+:::warning
+The execution of the `next` function does not affect built-in processes, only controls whether the next middleware executes. Rendering processes are interrupted only when the response is written.
+:::
+
 ## Example
 
 ### Tracking
@@ -106,5 +108,27 @@ Modern.js provides `res.locals` to store local variables for the current request
 export const Middleware = () => async (ctx, next) => {
   ctx.res.locals.id = 'Modern.js';
   ctx.res.locals.rpc = createRpcInstance();
-});
+};
 ```
+
+### Framework Extension
+
+Middleware can also use runtime framework extensions like BFF.
+
+When using framework runtime extensions, type information is exported from `@modern-js/runtime/{namespace}`. Middleware can use framework syntax, such as framework middleware writing, the following is pseudo-code:
+
+```ts
+import { SomeType } from '@modern-js/runtime/{namespace}';
+
+export const middleware: SomeType = (ctx, next) => {
+  console.log(ctx.url);
+  next();
+};
+```
+
+By default, the framework extension capability of Web Server is turned off after installing the framework extension plug-in. If you want to use the framework extension, you can turn it on through ['server.enableFrameworkExt'](/configure/app/server/enable-framework-ext.html).
+
+
+:::info
+The type name exported by the framework extension may not 'Middleware', but is named by the framework extension plugin.
+:::

package/en/components/enable-bff.mdx

@@ -7,8 +7,8 @@ import { Tabs, Tab as TabItem } from "@theme";
   <TabItem value="express" label="Express.js" default>
 
 ```ts title="edenx.config.ts"
-import expressPlugin from '@edenx/plugin-express';
-import bffPlugin from '@edenx/plugin-bff';
+import expressPlugin from '@modern-js/plugin-express';
+import bffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [expressPlugin(), bffPlugin()],
@@ -19,8 +19,8 @@ export default defineConfig({
   <TabItem value="koa" label="Koa.js">
 
 ```ts title="edenx.config.ts"
-import koaPlugin from '@edenx/plugin-koa';
-import bffPlugin from '@edenx/plugin-bff';
+import koaPlugin from '@modern-js/plugin-koa';
+import bffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [koaPlugin(), bffPlugin()],

package/en/components/init-rspack-app.mdx

@@ -0,0 +1,7 @@
+```bash
+$ npx @modern-js/create myapp
+? Please select the solution you want to create: Web App Solution
+? Development Language: TS
+? Package Management Tool: pnpm
+? Build Tools: Rspack
+```

package/en/configure/app/bff/enable-handle-web.mdx

@@ -0,0 +1,24 @@
+---
+title: enableHandleWeb
+---
+
+# bff.enableHandleWeb
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+:::caution
+First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+:::
+
+By default, the BFF service can only handle requests from the BFF API.
+
+When this value is set to `true`, page request traffic also goes through the BFF, and the logic built into Modern.js for page rendering defaults to running as the last middleware for the BFF service.
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  bff: {
+    enableHandleWeb: true,
+  },
+});
+```

package/en/configure/app/server/enable-framework-ext.mdx

@@ -35,7 +35,7 @@ export const middleware: Middleware = (ctx, next) => {
 When enabled, Middleware types will be exported from other namespaces and can the syntax of framework extensions:
 
 ```ts title="server/index.ts"
-import { SomeType } from '@modern-js/runtime/{frameworknName}';
+import { SomeType } from '@modern-js/runtime/{namespace}';
 
 export const middleware: SomeType = (...args) => {
   console.log(args[0].url);

package/en/guides/advanced-features/bff/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "BFF",
-  "position": 1,
+  "position": 2,
   "link": {
     "type": "doc",
     "id": "guides/advanced-features/bff/index"

package/en/guides/advanced-features/eslint.mdx

@@ -16,12 +16,11 @@ Most problems will be solved by the automatic fix of ESLint rules or the code fo
 
 :::info
 This kind of automatic fix is mainly performed when the IDE saves the file, and a few will be automatically fix on submit.
-
 :::
 
 ### Batch Automatic Fix
 
-在少数情况下，比如旧项目迁移的时候，可以执行以下命令，批量修复和检查所有文件：
+In rare cases, such as when an old project is migrated, the following commands can be executed to repair and inspect all files in bulk:
 
 ```bash
 pnpm run lint:error
@@ -29,13 +28,13 @@ pnpm run lint:error
 
 ### Manual Fix
 
-对于无法自动修复的问题，可以在 IDE 里点击问题提示框里的规则链接，打开这条规则的文档，查看问题的解释和解决方案。
+For problems that cannot be automatically fixed, you can click the rule link in the problem prompt box in the IDE to open the document of this rule to view the explanation and solution of the problem.
 
-### 声明例外情况
+### Claim Exceptions
 
-目前阶段，有些规则并不能做到足够智能，多数情况下会有很大收益，在少数情况下也许不适用。但如果为了这些少数情况就把整个规则关掉或改掉，得不偿失。
+At this stage, some rules are not smart enough, and in most cases there will be great benefits, and in a few cases it may not apply. But if the entire rule is turned off or changed for these few cases, the gain is not worth the loss.
 
-这种情况下可以用 [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) 注释，对符合**少数情况**的代码块做标注，声明这里是一个例外，应该忽略。比如：
+In this case, you can use the [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) comment to mark the code blocks that meet the **rare case**, stating that this is an exception and should be ignored. For example:
 
 ```js
 /* eslint-disable filenames/match-exported */
@@ -44,19 +43,19 @@ pnpm run lint:error
 ```
 
 :::info
-在 VS Code 编辑器里输入 eslint，会自动出现关于 "eslint-disable" 的提示框，选择提示选项生成对应注释对。
-
+Enter eslint in the VS Code editor, a prompt box about `eslint-disable` will automatically appear, select the prompt option to generate the corresponding comment pair.
 :::
 
-【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) 被滥用，导致不属于例外的代码也被禁用了规则。
+[Modern.js ESLint Rule Set] requires that [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) must be used in pairs, the scope to be affected must be clearly expressed, and what rules to disable within this scope must be clearly expressed, the purpose is to make **exceptions** Clear, minimized scope to avoid abuse of [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules), resulting in code that does not belong to the exception being disabled by the rule.
 
-## Q: 如何自定义 ESLint 规则
+## Q: How to customize ESLint rules
 
-### 仓库根目录下 `package.json` 里的 "eslintConfig" 字段
+### The `eslintConfig` field in `package.json` in the root directory
 
-这个地方是整个仓库的默认 ESLint 配置，是针对纯 Node.js 代码（只能在 Node.js 里运行）设计的。
+This place is the default ESLint configuration for the entire repository and is designed for pure Node.js code (which can only run in Node.js).
+
+If the project does have special requirements or inevitable compatibility issues with some rules (not exceptions), you can add rule configuration here. This configuration will take precedence over the default [Modern.js ESLint ruleset], such as:
 
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置。该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
 
 ```json
  "eslintConfig": {
@@ -70,16 +69,15 @@ pnpm run lint:error
 
 ```
 
-### `src/.eslintrc.js` 文件
+### `src/.eslintrc.js`
 
-Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
+The application project and module project of Modern.js will have this configuration file by default in the source code directory, which is designed for Universal JS code.
 
 :::info
-Universal JS 代码是既能浏览器端也能在服务器端运行的代码。
-
+Universal JS code is code that can run on both the browser side and the server side.
 :::
 
-如果项目在某些规则上确实有特殊要求或不可避免的兼容问题（不是例外），可以在这里增加规则配置，该配置会优先于默认的【Modern.js ESLint 规则集】，比如：
+If the project does have special requirements or inevitable compatibility issues with some rules (not exceptions), you can add a rule configuration here, which will take precedence over the default [Modern.js ESLint ruleset], such as:
 
 ```js
 // eslint-disable-next-line import/no-commonjs
@@ -96,7 +94,7 @@ module.exports = {
 };
 ```
 
-如果有需要，还可以继续在不同的子目录里增加 `.eslintrc.js` 文件，针对这个子目录里的代码做特殊配置：
+If necessary, you can continue to add the `.eslintrc.js` file in different subdirectories, and make special configuration for the code in this subdirectory:
 
 ```js
 module.exports = {
@@ -107,13 +105,13 @@ module.exports = {
 ```
 
 :::tip
-注意：没有必要使用 `extends` 字段，会自动继承父目录的配置。
+Note: It is not necessary to use the `extends` field, it will automatically inherit the configuration of the parent directory.
 
 :::
 
-### package.json 里的 `eslintIgnore` 字段
+### `eslintIgnore` field in `package.json`
 
-把包含 `.js`、`.jsx`、`.ts`、`.tsx` 文件、但不需要做代码检查和自动修复的目录，添加到 `eslintIgnore` 里，可以优化 ESLint 检查的速度，比如：
+Adding directories that contain `.js`, `.jsx`, `.ts`, `.tsx` files, but do not require code inspection and automatic repair, to `eslintIgnore` can optimize the speed of ESLint inspection, such as:
 
 ```json
  "eslintIgnore": [
@@ -123,25 +121,25 @@ module.exports = {
   ],
 ```
 
-## Q: 如何升级 ESLint 插件的版本
+## Q: How to upgrade the version of the ESLint plugin
 
-只要不是 Major 版本的变化（不符合 [Semver](https://semver.org/) 规则的 `^` 符号），就可以直接在业务项目的 `package.json` 里指定这个依赖，删除 Lock 文件（或尝试手动删除 Lock 文件中这个包名的内容），执行 `pnpm install` 重新安装依赖并且生成新的 Lock 文件。
+As long as it is not a change in the Major version (the "^" symbol that does not comply with the [Semver](https://semver.org/) rule), you can specify this dependency directly in the `package.json` of the business project, delete the Lock file (or try to manually delete the Lock file). the contents of this package name in the file), execute `pnpm install` to reinstall the dependency and generate a new Lock file.
 
-做完这些操作之后，在业务项目的 `./node_modules` 目录里，这个插件应该只存在一份，并且升级到了你指定的版本。
+After doing this, the plugin should only exist in the `./node_modules` directory of the business project and be upgraded to the version you specified.
 
 :::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 来发版。
+- Major version is the major version number. For more information, please read [[Semantic Versioning](https://semver.org/#summary) ].
+- All upstream projects encapsulated by Modern.js (such as ESLint, [ESLint plugin](https://eslint.org/docs/user-guide/configuring/plugins#plugins), [React Router](https://reactrouter.com/), etc.) can also be upgraded in this way.
+- Modern.js will also try to upgrade these upstream dependencies as timely as possible in each release.
+- Major version upgrades need to be published by Modern.js.
 
 :::
 
-## Q: WebStorm 有时候会报 ESLint 错误
+## Q: WebStorm sometimes reports ESLint errors
 
-由于 WebStorm 认为 ESLint 执行目录是根据 `.eslintrc` 文件来决定的。因此 `src/.eslintrc` 文件位置的放置会导致 `tsconfig.json` 文件指定的位置（项目根目录下）在 `src/` 目录下找不到。
+Since WebStorm believes that the ESLint execution directory is determined based on the `.eslintrc'` file. Therefore, the placement of the `src/.eslintrc` file location will cause the location specified by the `tsconfig.json` file (in the project root directory) to not be found in the'src/'directory.
 
-此时需要手动配置一下：
+you need to configure it manually:
 
 ```json
 --parser-options=project:../tsconfig.json

package/en/guides/advanced-features/low-level.mdx

@@ -6,7 +6,7 @@ sidebar_position: 11
 
 ## Usage
 
-Modern.js internally integrates tools such as [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Webpack](https://webpack.js.org/), [PostCSS](https://postcss.org/), [Tailwind CSS] (https://tailwindcss.com/) by default.
+Modern.js internally integrates tools such as [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Webpack](https://webpack.js.org/), [PostCSS](https://postcss.org/), [Tailwind CSS](https://tailwindcss.com/) by default.
 
 Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
 

package/en/guides/advanced-features/rspack-start.mdx

@@ -1,11 +1,11 @@
 ---
 title: Rspack Start
-sidebar_position: 12
+sidebar_position: 1
 ---
 
 # Rspack Start
 
-[Rspack](https://www.rspack.org/) is a Rust-based web bundler developed by the ByteDance Web Infra team. The core architecture of Rspack is aligned with the implementation of webpack, and provides out-of-the-box support for commonly used build features.
+[Rspack](https://www.rspack.dev/) is a Rust-based web bundler developed by the ByteDance Web Infra team. The core architecture of Rspack is aligned with the implementation of webpack, and provides out-of-the-box support for commonly used build features.
 
 Rspack optimizes compilation performance by:
 
@@ -13,22 +13,18 @@ Rspack optimizes compilation performance by:
 - Take full advantage of multi-core, and the entire compilation process is fully optimized for multi-threading.
 - On-demand compilation based on request (Lazy Compilation), reducing the number of modules per compilation to improve the speed of cold start.
 
-## Initializing an rspack project
+## Initializing an Rspack project
 
-The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an rspack project, simply select the **rspack** build tool by running:
+The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an Rspack project, simply select the **Rspack** build tool by running:
 
-```bash
-$ npx @modern-js/create myapp
-? Please select the solution you want to create: Web App Solution
-? Development Language: TS
-? Package Management Tool: pnpm
-? Build Tools: rspack
-```
+import InitRspackApp from "@site-docs-en/components/init-rspack-app"
+
+<InitRspackApp />
 
 After the project is created, you can experience the project by running `pnpm run dev`. For more project information, please refer to [Quick Start](/guides/get-started/quick-start.html).
 
 :::tip
-When using rspack as the bundler, the following features are currently not supported:
+When using Rspack as the bundler, the following features are currently not supported:
 
 - Server-side rendering (SSR)
 - Static Site Generation (SSG)
@@ -37,17 +33,17 @@ When using rspack as the bundler, the following features are currently not suppo
 
 :::
 
-## Migrating from webpack to rspack
+## Migrating from webpack to Rspack
 
-You can enable rspack build by running `pnpm run new`:
+You can enable Rspack build by running `pnpm run new`:
 
 ```bash
 $ pnpm run new
 ? Action： Enable features
-? Enable features： Enable rspack Build
+? Enable features： Enable Rspack Build
 ```
 
-After executing the command, enable the rspack build in `modern.config.ts`:
+After executing the command, enable the Rspack build in `modern.config.ts`:
 
 ```ts title=modern.config.ts
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -65,5 +61,5 @@ export default defineConfig<'rspack'>({
 ```
 
 :::tip
-Migrating from webpack to rspack may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack)
+Migrating from webpack to Rspack may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
 :::

package/en/guides/advanced-features/web-server.mdx

@@ -1,23 +1,37 @@
 ---
 title: Custom Web Server
-sidebar_position: 2
+sidebar_position: 3
 ---
 # Custom Web Server
 
-Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。
+As a client side-centric development framework, Modern.js has weak customization capabilities on the server side. In some development scenarios, special server level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.
 
-因此 Modern.js 提供了一种功能，让项目可以在给定的范围内扩展 Modern.js 内置的 Web Server，来实现相应的需求。
+Some developers may be wondering, Modern.js already provides [BFF](/guides/advanced-features/bff/function.html), why do you need **Custom Web Server**.
 
-## 创建自定义 Web Server
+Because by default, page routing does not go through BFF, it has no way to provide server-side custom logic for page access. The reason for this design is that we do not want the service that controls the page to be bound to the BFF service, so as to avoid the BFF framework restricting how the page is deployed.
 
-在项目根目录执行 `pnpm run new` 命令，按照如下选择，开启「自定义 Web Serve」功能：
+For example, hosting pages separately from BFF, deploying page services to non-Node environments, or customizing for deployment platforms, etc.
+
+For the above reasons, Modern.js provides three ways that projects can customize server level capabilities progressively according to their needs.
+
+:::warning
+The three extension methods cannot work at the same time, and developers need to choose the appropriate method according to the scenario.
+:::
+
+## Extending Web Server with API
+
+The first way is to customize the server level at a specific life cycle through the server level runtime API provided by Modern.js. The purpose of providing this way is that in some cases, developers do not need to control the full Web Server, but only need to add server level logic.
+
+Because the full web server cannot be controlled this way, and the extension logic **only takes effect when the page is requested**. Therefore, it is relatively simple to apply to server level logic, and you do not want to create additional BFFs or BFFs and pages without common server level logic scenarios.
+
+You can execute the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
 
 ```bash
-? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「自定义 Web Server」源码目录
+? Action Create project element
+? New "Custom Web Server" source code directory
 ```
 
-执行命令后，在 `modern.config.ts` 中注册 Server 插件:
+After executing the command, register the `@modern-js/plugin-server` plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
@@ -27,31 +41,84 @@ export default defineConfig({
 });
 ```
 
-项目目录下会新建 `server/index.ts` 文件，自定义逻辑在这个文件中编写。
+After the function is turned on, the `server/index.ts` file will be automatically created in the project directory, and custom logic can be written in this file. Modern.js provides two types of APIs, **Hook** and **Middleware**, to extend Web Server.
+
+### Hook
 
-## 使用 API 扩展 Web Server
+The Hook provided by Modern.js is used to control the built-in logic in the Web Server, and all page requests go through the Hook.
 
-Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
+There are currently two Hooks provided, namely `AfterMatch` and `AfterRender`, which can be used to modify the rendering results. It can be written in `server/index.ts` like this:
 
-### Hook
+```ts
+import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
+
+export const afterMatch: AfterMatchHook = (ctx, next) => {
+  next();
+}
+
+export const afterRender: AfterRenderHook = (ctx, next) => {
+  next();
+}
+```
 
-Hook 可以控制 Web Server 对请求处理的内置逻辑，非 BFF 请求会经过 Hook 的处理。
+Projects should have the following best practices when using Hook:
 
-Hook 不可以使用运行时框架拓展。
+1. Permission verification in afterMatch.
+2. Do Rewrite and Redirect in afterMatch.
+3. Do HTML content injection in afterRender.
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+:::note
+For more detail, see [Hook](/apis/app/runtime/web-server/hook)。
+:::
 
 ### Middleware
 
-Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。
+For some projects, there may be more requirements at the server level, Modern.js provides Middleware to add pre-middleware for Web Server. It can only run in a Node environment, so if the project is deployed to another environment, such as a Worker environment, Middleware cannot be used.
 
-Middleware 可以使用运行时框架拓展。
+Modern.js provides a set of APIs by default for projects to use:
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/middleware)。
+```ts
+import { Middlewre } from '@modern-js/runtime/server';
 
-## 完全自定义的 Web Server
+export const middleware = (context, next) => {
+  const { source: { req, res } } = context;
+  console.log(req.url);
+  next();
+};
+```
 
 :::note
-敬请期待
+For more detail, see [Middleware] (/apis/app/runtime/web-server/middleware).
+:::
+
+Projects should have the following best practices when using Middleware:
+
+1. In Middleware, you can directly operate origin request and response objects, do event tracking, and inject Node services (databases, Redis, etc.) that may be used for SSR rendering.
+2. Marking and crawler optimization can be done in Middleware.
+3. In Middleware, you can ignore the default rendering and customize the rendering process.
+
+**In general, in CSR projects, using Hook can basically meet all the needs of simple scenarios. In SSR projects, Middleware can be used for more complex Node extensions.**
+
+## Managed Page Requests with BFF
+
+The second way is to use BFF to Managed page rendering. In this way, all requests will first hit the BFF service.
+
+This method can uniformly control the server level logic of all requests through BFF. Therefore, it is suitable for scenarios where the server level logic is complex, and BFF and pages need common server level logic. But it still relies on the Web Server of Modern.js as a whole, and cannot run the logic on existing services.
+
+To use this method, we need to first enable the "BFF" function through `pnpm new`. Then add [`bff.enableHandleWeb`](/configure/app/bff/enable-handle-web.html) configuration in the configuration file:
 
+```ts
+export default defineConfig({
+  bff: {
+    enableHandleWeb: true,
+  },
+});
+```
+
+When this value is set to `true`, page request traffic also goes through the BFF, and the logic built into Modern.js for page rendering defaults to running as the last middleware for the BFF service.
+
+## Fully Customized Web Server
+
+:::note
+Comming soon..
 :::

package/en/guides/concept/builder.mdx

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web App.**
 
-Modern.js Builder is one of the core components of Modern.js. It is A Build Engine for web development. and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and rspack, and it uses webpack by default.
+Modern.js Builder is one of the core components of Modern.js. It is A build engine for web development. and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and it uses webpack by default.
 
 ## Build Architecture