@modern-js/main-doc 2.22.1 → 2.23.1

package/docs/en/configure/app/server/base-url.mdx

@@ -7,13 +7,13 @@ sidebar_label: baseUrl
 - **Type:** `string | string[]`
 - **Default:** `undefined`
 
-Uniformly set the server-level routing prefix (often used in the case of shared domain names to distinguish traffic).
+Uniformly set the prefix of server-side routes (commonly used in situations where multiple applications share the same domain name to distinguish traffic).
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
-    // All generated routes are automatically prefixed with `/base`
-    // Path to the generated server-side route file: dist/route.json
+    // All generated routes will automatically have the prefix `/base`
+    // Generated server-side route file path: dist/route.json
     baseUrl: '/base'
 
     // Multiple baseUrl
@@ -22,7 +22,7 @@ export default defineConfig({
 })
 ```
 
-After `dev`, you can see that the routed access will be prefixed accordingly:
+After running `dev`, you will see that the route access will have the corresponding prefix added:
 
 ```bash
 App running at:

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

@@ -7,9 +7,9 @@ sidebar_label: enableFrameworkExt
 - **Type:** `boolean`
 - **Default:** `false`
 
-By default, with [Custom Web Server](/guides/advanced-features/web-server) enabled, Middleware uses the syntax of the Modern.js itself.
+By default, when the [custom Web Server feature](/guides/advanced-features/web-server) is enabled, the Middleware will use the Modern.js's syntax.
 
-Enable `server.enableFrameworkExt` to use the syntax of framework extensions.
+Enabling `server.enableFrameworkExt` allows the use of syntax extensions from other frameworks.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -32,7 +32,7 @@ export const middleware: Middleware = (ctx, next) => {
 };
 ```
 
-When enabled, Middleware types will be exported from other namespaces and can the syntax of framework extensions:
+After enabling it, the Middleware type will be exported from other namespaces, and syntax extensions from frameworks can be used:
 
 ```ts title="server/index.ts"
 import { SomeType } from '@modern-js/runtime/{namespace}';
@@ -44,6 +44,6 @@ export const middleware: SomeType = (...args) => {
 ```
 
 :::note
-The above code is pseudo-code, and the specific usage needs to refer to the corresponding framework extension.
+The above code is pseudocode, and the specific usage needs to refer to the corresponding framework extension.
 
 :::

package/docs/en/configure/app/server/port.mdx

@@ -7,7 +7,7 @@ sidebar_label: port
 - **Type:** `number`
 - **Default:** `8080`
 
-When Modern.js executes `dev`, `start` and `serve` commands, it will start with `8080` as the default port, and will automatically increment the port number when the port is occupied. You can change the port number of Server through this config:
+When running the `dev`, `start`, and `serve` commands, Modern.js will start with `8080` as the default port and automatically increase the port number when the port is occupied. You can use this configuration to modify the port number that the Server starts with:
 
 ```js title="modern.config.ts"
 export default defineConfig({
@@ -17,14 +17,14 @@ export default defineConfig({
 });
 ```
 
-### Difference with dev.port
+### Difference between `server.port` and `dev.port`
 
-In most cases, we recommend using `server.port` instead of `dev.port` to set the port number, the differences between them are as follows:
+In most cases, we recommend using `server.port` instead of `dev.port` to set the port number, and the differences between them are as follows:
 
-- `dev.port` only takes effect in the development, and `server.port` takes effect in both development and production.
-- In the development, `dev.port` takes precedence over `server.port`.
+- `dev.port` only works in the development environment, while `server.port` works in both the development and production environments.
+- In the development environment, `dev.port` has a higher priority than `server.port`.
 
-When you set `dev.port` and `server.port` at the same time, `dev.port` will take effect in the development, and `server.port` will take effect in the production. For example, in the following example, the port in the development is `3001`, and the port in the production is `3002`.
+When you set both `dev.port` and `server.port`, `dev.port` will take effect in the development environment, and `server.port` will take effect in the production environment. For example, in the following example, the port number listened to in the development environment is `3001`, and the port number listened to in the production environment is `3002`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/server/public-routes.mdx

@@ -5,20 +5,20 @@ sidebar_label: publicRoutes
 # server.publicRoutes
 
 - **Type:** `Object`
-- **Default:** Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application.
+- **Default:** Server-side routing rules generated based on file conventions, with one route rule generated for each file.
 
-This configuration option only applies to server-level routing, and you can customize the access route of resources in `config/public/`.
+This configuration option only applies to server-side routing and can customize the access route of resources under `config/public/`.
 
-The `key` of the object is the relative file path of the current application (not used `./`), value can be `string`.
+The `key` of the object is the relative file path of the `config/public/` (without using `./`), and the value can be a `string`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     publicRoutes: {
-      // Set up a long route
+      // Set a long route
       'index.json': '/user-config/card-info/extra/help.json',
 
-      // Set up a route without a suffix
+      // Set a route without a suffix
       'robot.txt': '/app/authentication',
     },
   },

package/docs/en/configure/app/server/routes.mdx

@@ -5,30 +5,30 @@ sidebar_label: routes
 # server.routes
 
 - **Type:** `Object`
-- **Default:** Automatic generation of server-level routing rules based on file conventions: One routing rule is generated per file of the application,and the default route is the same as the entry name.
+- **Default:** Server-side routing rules generated based on file conventions, with one route rule generated for each entry, and the entry name is equal to the route path.
 
-This configuration option only applies to server-level routing, and can customize the service access configuration of the application entry.
+This configuration option only applies to server-side routing and can customize the access route of application entries.
 
-## Custom access routing
+## Custom access routes
 
-The `key` of the object is the entry name of the current application, and the value can be `string | Array<string>`.
+The `key` of the object is the name of the current application entry, and the value can be a `string | Array<string>`.
 
-When the value type is `string`, the current value represents the name of the route to access the entry.
+When the value type is `string`, the current value represents the route path for accessing the entry.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
   server: {
     routes: {
-      // The default route is /entryName1, /p/test1 after customization
+      // Default route is /entryName1, customized to /p/test1
       entryName1: '/p/test1'
-      // Support dynamic server-level routing configuration
+      // Supports dynamic server-side routing configuration
       entryName2: '/detail/:id'
     }
   }
 });
 ```
 
-Multiple access routes can also be set for entries using the `Array<string>`:
+Multiple access routes can also be set for the entry through `Array<string>`:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -40,9 +40,9 @@ export default defineConfig({
 });
 ```
 
-At this point, the '`page-a` entry can be accessed through both `/a` and `/b` routes.
+At this time, the `page-a` entry can be accessed through both the `/a` and `/b` routes.
 
-After executing the `dev` command, you can see in `dist/route.json` that there are two routing records in the entry `page-a`:
+After executing the `dev` command, you can view two route records for the `page-a` entry in `dist/route.json`:
 
 ```json
 {
@@ -65,9 +65,9 @@ After executing the `dev` command, you can see in `dist/route.json` that there a
 }
 ```
 
-## Custom response header
+## Custom response headers
 
-The response header can be set by configuring the resHeaders of the entry:
+Response headers can be set by configuring the `resHeaders` of the entry:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -85,6 +85,6 @@ export default defineConfig({
 ```
 
 :::note
-This configuration takes effect in both the production environment and the development environment, and can set different response headers according to the NODE_ENV. But if you only need to set response headers in the development environment, `tools.devServer.headers` is recommended.
+This configuration takes effect in both the production and development environments, and different response headers can be set according to the NODE_ENV to distinguish between environments. However, if you only need to set response headers in the development environment, it is recommended to use `tools.devServer.headers`.
 
 :::

package/docs/en/configure/app/server/ssr-by-entries.mdx

@@ -7,10 +7,10 @@ sidebar_label: ssrByEntries
 - **Type:** `Object`
 - **Default:** `undefined`
 
-Set the ssr option according to the entry. The attributes in the option are the same as [ssr](./ssr.mdx). The specified value will be replaced and merged with the content of the ssr attribute. For example:
+Set SSR options by entry, and the properties inside the option are the same as [ssr](./ssr.mdx). The specified value will be replaced and merged with the content of the SSR attribute, for example:
 
 :::info
-The "entry name" defaults to the directory name. In a few cases, when the entry is customized by `source.entries`, the entry name `source.entries` the `key` of the object.
+The "entry name" defaults to the directory name. In a few cases, when defining an entry through `source.entries`, the entry name is the `key` of the `source.entries` object.
 
 :::
 
@@ -19,11 +19,11 @@ export default defineConfig({
   server: {
     ssr: true,
     ssrByEntries: {
-      // page-a does not enable ssr
+      // page-a does not enable SSR
       'page-a': false,
     },
   },
 });
 ```
 
-As configured above, the project has ssr enabled as a whole, but the ssr rendering capability is turned off for the entry `page-a`.
+In the above configuration, the project enables SSR as a whole, but the SSR rendering ability is disabled for the `page-a` entry.

package/docs/en/configure/app/server/ssr.mdx

@@ -11,7 +11,7 @@ Enalbe SSR configuration.
 
 ### Boolean Type
 
-When the value type is `boolean`, it indicates whether to enable SSR deployment mode, and `false` is not enabled by default.
+When the value type is `boolean`, it indicates whether to enable SSR deployment mode. The default is `false` to disable it.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -23,11 +23,11 @@ export default defineConfig({
 
 ### Object Type
 
-When the value type is `Object`, The following properties can be configured:
+When the value type is `Object`, the following properties can be configured:
 
-- `mode`: `string = 'string'`, use `renderToString` rendering default. onfigure 'stream' to enable streaming rendering.
-- `forceCSR`: `boolean = false`, forced CSR rendering is disable by default. When configured as `true`, add `?csr=true` in URL to force CSR.
-- `inlineScript`：`boolean = true`, by default SSR data will be injected into HTML as inline scripts and directly assigned to global variables. Configure as `false` to inject JSON instead of directly assigning.
+- `mode`: `string = 'string'`, which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering.
+- `forceCSR`: `boolean = false`, which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` when accessing the page.
+- `inlineScript`: `boolean = true`, by default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/testing/transformer.mdx

@@ -8,14 +8,10 @@ sidebar_position: 1
 - **Type:** `'babel-jest' | 'ts-jest'`
 - **Default:** `babel-jest`
 
-:::caution Caution
-First you need to enable the "Unit Test" function using [new](/apis/app/commands#modern-new) command.
+First need to run `new` command to enable [Unit Test / Integration Test] features.
 
-:::
-
-Configure the compiler for source code when executing tests: [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest). `babel-jest` is used by default.
-
-:::info Additional information
-`Babel-jest` can also compile TS files, but there is no type error. If you need to check the TS type when running tests, then use `ts-jest`.
+Configure the compilation tool used during test execution. By default, `babel-jest` is used. You can configure it to use either [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest).
 
+:::info Additional
+`babel-jest` can compile TypeScript files but does not perform type checking. If you want to perform type checking on your TypeScript files while running test cases, you can use `ts-jest`.
 :::

package/docs/en/configure/app/usage.mdx

@@ -12,7 +12,7 @@ The compile configuration can be configured in two places:
 - `package.json` file
 
 :::info
-Configurations in both package.json and modern.config.ts file are not supported for the same configuration. Configuration in modern.config.ts is recommended.
+Configurations in both `package.json` and `modern.config.ts` file are not supported for the same configuration. Configuration in `modern.config.ts` is recommended.
 :::
 
 Server runtime configuration can be configured in the `modern.server-runtime.config.(ts|js|mjs)` file in the root path.
@@ -54,7 +54,7 @@ When using Rspack as the bundler, due to some differences in configuration types
 
 ### modern.config.js
 
-If you are developing a non-TypeScript project, you can use the configuration file in .js format:
+If you are developing a non-TypeScript project, you can use the configuration file in `.js` format:
 
 ```js title="modern.config.js"
 export default {
@@ -66,7 +66,7 @@ export default {
 };
 ```
 
-You can also dynamically set it with `process.env.NODE _ENV`:
+You can also configure depending on your environment with `process.env.NODE_ENV`:
 
 ```js title="modern.config.js"
 export default {
@@ -122,7 +122,7 @@ export default defineConfig(async ({ env, command }) => {
 
 You can specify the name of the configuration file using the `--config` option.
 
-For example, if you need to use the `modern.prod.config.js` file when running build, you can add the following scripts to `package.json`:
+For example, if you need to use the `modern.prod.config.js` file when running `build`, you can add the following scripts to `package.json`:
 
 ```json title="package.json"
 {
@@ -155,7 +155,7 @@ In addition to configuration files, configuration options can also be set the `m
 }
 ```
 
-Due to the limitation of the JSON file format, only simple types such as numbers, strings, boolean values, arrays, etc. can be defined in `package.json`. When we need to set the value of the function type, it is recommended to set it in the Modern.js configuration file.
+Due to the limitation of the JSON file format, only simple types such as numbers, strings, boolean values, arrays, etc. can be defined in `package.json`. When we need to set the value of the function type, it is recommended to do so in the Modern.js configuration file.
 
 ### Note
 

package/docs/en/guides/advanced-features/code-split.mdx

@@ -2,13 +2,12 @@
 title: Code Split
 sidebar_position: 6
 ---
-# Code Split
+# Code Splitting
 
-Code Split is a common way to optimizing front-end resource loading. This doc will introduce three methods supported by Modern.js:
+Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:
 
 :::info
-When you use Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing), by default it will do code splitting based on routing components, wrapping `Suspense` components, no need to do code splitting by yourself.
-
+When using Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.
 :::
 
 - `import`
@@ -17,7 +16,7 @@ When you use Modern.js [Conventional routing](/guides/basic-features/routes#conv
 
 ## import
 
-use dynamic `import()`, `import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
+use dynamic `import()`, the JS modules pass to this API will be packaged as a separate JS file, for example:
 
 ```ts
 import('./math').then(math => {
@@ -25,15 +24,14 @@ import('./math').then(math => {
 });
 ```
 
-The JS modules corresponding to the './math' path will be packaged in a separate JS file.
-
 ## React.lazy
 
 The officially way provides by React to split component code.
 
 :::caution
-SSR is not supported in React 17 and below, and it is recommended that SSR applications for React 17 use loadable.
+`React.lazy` is typically used in together with `<Suspense>`, hence it is only available in CSR or React 18 Streaming SSR.
 
+For projects that use Traditional SSR（renderToString）, `React.lazy` is not supported. Please use the Loadable API instead.
 :::
 
 ```ts
@@ -56,11 +54,11 @@ function MyComponent() {
 }
 ```
 
-For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy).
+For details, see [React lazy](https://react.dev/reference/react/lazy).
 
-## loadable
+## Loadable
 
-use `loadable` API, for example:
+In Modern.js, you can use the Loadable API, which is exported from `@modern-js/runtime/loadable`. Here's an example:
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';
@@ -72,9 +70,12 @@ function MyComponent() {
 }
 ```
 
-For detail, see [loadable API](/apis/app/runtime/utility/loadable).
+With the out-of-the-box support of `loadable` in SSR by Modern.js, you no longer need to add Babel plugins or inject scripts into HTML during SSR.
 
-:::info
-SSR is supported out of the box by `loadable`.
+However, it's important to note that any Loadable API in SSR does not support the use of `<Suspense>`.
 
+:::info
+If you want to use `<Suspense>` in CSR projects with React 17 and below, you can substitute `React.lazy` with `loadable.lazy`.
 :::
+
+For details, see [Loadable API](/apis/app/runtime/utility/loadable).

package/docs/en/guides/advanced-features/compatibility.mdx

@@ -6,9 +6,9 @@ sidebar_position: 5
 
 ## Browserslist Configuration
 
-Modern.js supports setting the browserslist for your web applications. You can set the [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+Modern.js supports setting the browserslist for your web applications. You can set the value of [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
 
-When you create a new Modern.js project, it includes a `.browserslistrc` configuration by default, which means that JavaScript code will be compiled to ES6.
+When you create a new Modern.js project, it will includes a `.browserslistrc` configuration by default, which means that the JavaScript code will be compiled to ES6.
 
 ```yaml title=".browserslistrc"
 chrome >= 51
@@ -22,32 +22,11 @@ ios_saf >= 10
 Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
 :::
 
-## Browserslist
-
-Modern.js supports the `browserslist` field in the `package.json` file, or a `.browserslistrc` file to specify the target browser range covered by the project.
-
-This value is used by ['@babel/preset-env'] (https://babeljs.io/docs/en/babel-preset-env) and ['autoprefixer'] (https://github.com/postcss/autoprefixer) to determine the JavaScript syntax features to be converted and the CSS browser prefix to be added.
-
-The default value in Modern.js as follow:
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
-```
-
-You can learn how to customize the browserslist [here](https://github.com/browserslist/browserslist).
-
-See Modern.js Builder docs to learn more [Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist.html) info.
-
-:::note
-Modern.js also supports configuring [output.override Browserslist](/configure/app/output/override-browserslist) to override the default browserslist value.
-
-:::
-
 ## Polyfill
 
 ### Polyfill At Compile
 
-Modern.js inject the Polyfill code via [core-js] (https://github.com/zloirock/core-js) at compile time by default.
+Modern.js defaults to importing corresponding polyfill code from [core-js] (https://github.com/zloirock/core-js) during compilation.
 
 By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.
 

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

@@ -80,7 +80,6 @@ For example, if you are using pnpm, you can update the Rspack version with `over
     "overrides": {
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
-      "@rspack/dev-middleware": "nightly",
       "@rspack/plugin-html": "nightly"
     }
   }

package/docs/en/guides/advanced-features/ssr.mdx

@@ -75,7 +75,7 @@ Warning: Expected server HTML to contain a matching <div> in <div>.
 This is caused by the inconsistency between the rendering result and the SSR rendering result when React executes the hydrate logic on the client side. Although the page performs normally, in complex applications, it is likely to cause problems such as DOM hierarchy confusion and style confusion.
 
 :::info
-For hydrate logic, please refer to [here](https://reactjs.org/docs/react-dom.html#hydrate).
+For hydrate logic, please refer to [here](https://react.dev/reference/react-dom/hydrate).
 
 :::
 
@@ -455,7 +455,7 @@ export default Page;
 ```
 
 `Await` needs to be wrapped inside the `Suspense` component. The `resolve` of `Await` passes in the data acquired asynchronously by the Data Loader. When the data acquisition is completed,
-the obtained data is rendered through the [Render Props](https://reactjs.org/docs/render-props.html) mode. When the data acquisition is in pending status, the
+the obtained data is rendered through the [Render Props](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) mode. When the data acquisition is in pending status, the
 content set by the `fallback` property of the `Suspense` component will display.
 
 

package/docs/en/guides/advanced-features/testing.mdx

@@ -6,16 +6,16 @@ title: Testing
 
 Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
 
-First need to execute `pnpm run new` enable [unit test/integration test] features:
+First need to execute `pnpm run new` to enable [unit test/integration test] features:
 
-```
+```bash
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Unit Test / Integration Test
 ```
 
-After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
+After executing the above command, the `"test": "modern test"` command will be added in `package.json` automatically.
 
-register plugin in `modern.config.ts`:
+After registering the `@modern-js/plugin-testing` plugin in `modern.config.ts`, you can use the testing features:
 
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
@@ -35,12 +35,13 @@ If you need to customize the test directory, you can configure it with [tools.je
 
 Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
 
-```
+```ts
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 
-Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup).
+Other testing APIs supported by Modern.js can be referred to [here](/apis/app/runtime/testing/cleanup).
 
 ## transform
 
-Modern.js tests use [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation by default. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
+By default, Modern.js testing uses [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
+

package/docs/en/guides/advanced-features/using-storybook.mdx

@@ -0,0 +1,44 @@
+---
+sidebar_position: 20
+---
+
+# Using Storybook
+
+[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
+
+- Develop UIs that are more durable
+- Test UIs with less effort and no flakes
+- Document UI for your team to reuse
+- Share how the UI actually works
+- Automate UI workflows
+
+## Enable Storybook debugging
+
+The Modern.js framework integrates the Builder's Node Polyfill plugin by default.
+
+If you want to debug the component, you can enable Storybook debugging through `pnpm run new`.
+
+```bash
+$ npx modern new
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Visual Testing (Storybook)
+```
+
+After the execution is complete, you only need to register the Modern.js Storybook plugin in the `modern.config.ts` file to enable Storybook debugging capabilities.
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import storybookPlugin from '@modern-js/plugin-storybook';
+
+export default defineConfig({
+  plugins: [appTools(), storybookPlugin()],
+});
+```
+
+## Debugging code
+
+Modern.js recognizes files in the format of [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) under the project source code directory (src/) by default as Storybook debugging files.
+
+## Configure Storybook
+
+In Modern.js, Storybook configuration files can be added to the [`config/storybook`](/apis/app/hooks/config/storybook.html) directory of the project.

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

@@ -4,15 +4,15 @@ sidebar_position: 3
 ---
 # Custom Web Server
 
-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.
+As a client-centric development framework, Modern.js has limited customization capabilities on the server side. However, in some development scenarios, special server-level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.
 
-Some developers may be wondering, Modern.js already provides [BFF](/guides/advanced-features/bff/function.html), why do you need **Custom Web Server**.
+Some developers may be wondering, Modern.js already provides [BFF](/guides/advanced-features/bff/function.html), why you need **Custom 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.
+The reason is that 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, this is to avoid the BFF framework restricting how the page is deployed.
 
-For example, hosting pages separately from BFF, deploying page services to non-Node environments, or customizing for deployment platforms, etc.
+For example, hosting pages separately from BFF, deploying page services to non-Node environments, 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.
+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.
@@ -20,11 +20,11 @@ The three extension methods cannot work at the same time, and developers need to
 
 ## 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.
+The first way is to customize the server-side at a specific lifecycle through the server-side 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.
+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 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:
+You can run the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
 
 ```bash
 ? Please select the operation you want: Create Element
@@ -47,7 +47,7 @@ After the function is turned on, the `server/index.ts` file will be automaticall
 
 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.
 
-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:
+Currently, two Hooks are provided: `AfterMatch` and `AfterRender`, which can be used to modify the rendering results. It can be written in `server/index.ts` as follows:
 
 ```ts
 import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
@@ -61,11 +61,11 @@ export const afterRender: AfterRenderHook = (ctx, next) => {
 }
 ```
 
-Projects should have the following best practices when using Hook:
+Projects should follow these best practices when using Hook:
 
-1. Permission verification in afterMatch.
+1. Authentication in afterMatch.
 2. Do Rewrite and Redirect in afterMatch.
-3. Do HTML content injection in afterRender.
+3. Inject HTML content in afterRender.
 
 :::note
 For more detail, see [Hook](/apis/app/runtime/web-server/hook).
@@ -91,10 +91,10 @@ export const middleware: Middlewre = (context, next) => {
 For more detail, see [Middleware] (/apis/app/runtime/web-server/middleware).
 :::
 
-Projects should have the following best practices when using Middleware:
+Projects should follow these 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.
+2. Operations such as 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.**
@@ -103,9 +103,9 @@ Projects should have the following best practices when using Middleware:
 
 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.
+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:
+To use this method, we first need to 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({