@modern-js/main-doc 0.0.0-next-1686559924703 → 0.0.0-next-1686578839599

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686559924703
+## 0.0.0-next-1686578839599
 
 ### Patch Changes
 
@@ -24,12 +24,14 @@
 
   docs(main): 更新 HTML 模板文档
 
-- d67b665c9: docs(main): update bff config doc
+- ef865f285: docs(main): update config server doc
 
-  docs(main): 更新 BFF 配置文档
+  docs(main): 更新 server 配置文档
 
+- 8bb0e146f: chore: review code split docs
+  chore: 审查代码分割文档
 - Updated dependencies [7e6fb5fc1]
-  - @modern-js/builder-doc@0.0.0-next-1686559924703
+  - @modern-js/builder-doc@0.0.0-next-1686578839599
 
 ## 2.22.1
 

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

@@ -7,13 +7,13 @@ title: enableHandleWeb
 - **Type:** `boolean`
 - **Default:** `false`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+:::caution
+First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+:::
 
-<EnableBFFCaution />
+By default, the BFF service can only handle requests from the BFF API.
 
-By default, the BFF service can only handle requests for BFF APIs.
-
-When this value is set to `true`, page request will also pass through BFF, and the default logic for page rendering built into Modern.js will run as the last middleware of the BFF service.
+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({

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,18 +7,18 @@ sidebar_label: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+:::caution
+First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+:::
 
-<EnableBFFCaution />
-
-By default, the prefix for accessing routes in the BFF API directory is `/api`, as shown in the following directory structure:
+By default, the route access BFF prefix's directory is `/api`, with the following directory structure:
 
 ```bash
 api
 └── hello.ts
 ```
 
-The route corresponding to `api/hello.ts` when accessed is `localhost:8080/api/hello`.
+The corresponding route for `api/hello.ts` access is `localhost:8080/api/hello`.
 
 This configuration option can modify the default route prefix:
 
@@ -30,4 +30,4 @@ export default defineConfig({
 });
 ```
 
-The corresponding route for `api/hello.ts` when accessed is `localhost:8080/api-demo/hello`.
+The corresponding `api/hello.ts` access route is `localhost:8080/api-demo/hello`.

package/docs/en/configure/app/bff/proxy.mdx

@@ -7,13 +7,16 @@ sidebar_label: proxy
 - **Type:** `Record<string, string>`
 - **Default:** `{}`
 
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
+:::caution Caution
+First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
 
-<EnableBFFCaution />
+:::
+
+With simple configuration, no code is required, Modern.js automatically forwards requests. Requests sent to Modern.js BFF server are proxied to the specified service.
 
-With simple configuration, Modern.js can automatically proxy requests sent to the BFF server to the specified service.
+BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), and if you need more advanced usage, you can check its [documentation](https://github.com/chimurai/http-proxy-middleware#options).
 
-Add the following configuration to `modern.server-runtime.config.js` to enable proxy:
+Add the following configuration to `modern.server-runtime.config.ts`, you can turn on the proxy:
 
 ```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -26,31 +29,41 @@ export default defineConfig({
 });
 ```
 
-Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
+Assuming that the starting Modern.js BFF server's service address is `localhost:8080`, all requests whose path starts with `api` will be intercepted, such as requests sent to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
 
-import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
+You can do path rewriting, such as proxying requests sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
 
-<BFFProxyPathRewrite />
-
-Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
+```js title="modern.server-runtime.config.js"
+import { defineConfig } from '@modern-js/app-tools/server';
+export default defineConfig({
+  bff: {
+    proxy: {
+      '/api': {
+        target: 'https://cnodejs.org',
+        pathRewrite: { '/api/topics': '/api/v1/topics' },
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```
 
-import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
+Unlike [dev.proxy](/configure/app/dev/proxy), the proxy described in this section only works on requests entering the BFF/API service; at the same time, this configuration can be used not only in the development environment, but also in the production environment. The corresponding request will also be proxied in the production environment.
 
-<BFFProxyPrinciple />
+## Common usage
 
-## Common Usage
+### Solve interface cross-domain problems
 
-### Solving Cross-Domain Issues for APIs
+In the process of project development, because web pages and interface services are not deployed under the same domain name, cross-domain problems are often encountered.
 
-During project development, cross-domain issues are often encountered because web pages and API services are not deployed under the same domain name.
-There are many ways to solve cross-domain issues, and here we can easily solve them using `bff.proxy`.
+There are many ways to solve cross-domain problems, and here we use `bff.proxy` to easily solve cross-domain problems.
 
 :::info
-Under BFF proxy mode, if you don't need to write BFF code, the API directory can be deleted; BFF proxy will still be enabled.
+In BFF proxy mode, if you do not need to write the BFF interface, the API directory can be deleted; at this time, BFF proxy will still be enabled.
 
 :::
 
-As shown below, the following configuration in `modern.server-runtime.config.ts` will proxy all web page requests starting with `/api` to a service on another domain with the same domain.
+As shown below, in the `modern.server-runtime.config.js`, write the following configuration; we send all web pages to the same domain that request proxies starting with `/api` to another domain's service.
 
 ```ts title="modern.server-runtime.config.ts"
 export default defineServerConfig({
@@ -61,5 +74,3 @@ export default defineServerConfig({
   },
 };
 ```
-
-

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/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 method 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://reactjs.org/docs/code-splitting.html#reactlazy).
 
-## 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/zh/configure/app/bff/enable-handle-web.mdx

@@ -7,9 +7,9 @@ title: enableHandleWeb
 - **类型：** `boolean`
 - **默认值：** `false`
 
-import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
-
-<EnableBFFCaution />
+:::caution 注意
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+:::
 
 默认情况下，BFF 服务只能处理 BFF API 的请求。
 

package/docs/zh/configure/app/bff/prefix.mdx

@@ -7,9 +7,10 @@ sidebar_label: prefix
 - **类型：** `string`
 - **默认值：** `/api`
 
-import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
+:::caution 注意
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
-<EnableBFFCaution />
+:::
 
 默认情况下，BFF API 目录下的路由访问前缀是 `/api`, 如下目录结构：
 

package/docs/zh/configure/app/bff/proxy.mdx

@@ -7,11 +7,13 @@ sidebar_label: proxy
 - **类型：** `Record<string, string>`
 - **默认值：** `{}`
 
-import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
+:::info 补充信息
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
-<EnableBFFCaution />
+:::
 
-通过简单配置，Modern.js 可以将发送给 BFF server 的请求，自动代理到指定的服务上。
+通过简单配置，无需编写代码，Modern.js 会自动转发请求。发送给 Modern.js BFF server 的请求，会代理到指定的服务上。
+BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法， 可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。
 
 在 `modern.server-runtime.config.js` 中加入以下配置；即可开启代理：
 
@@ -26,18 +28,27 @@ export default defineConfig({
 });
 ```
 
-假设 Modern.js BFF server 的地址是 `localhost:8080`，所有以 `api` 开头的请求都会被代理到 `https://cnodejs.org`，如 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
+假设启动的 Modern.js BFF server 的服务地址是 `localhost:8080`，所有 path 以 `api` 开头的请求都会被拦截，如发送到 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
 
-import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
+你可以做路径的重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
 
-<BFFProxyPathRewrite />
+```ts title="modern.server-runtime.config.ts"
+import { defineConfig } from '@modern-js/app-tools/server';
+export default defineConfig({
+  bff: {
+    proxy: {
+      '/api': {
+        target: 'https://cnodejs.org',
+        pathRewrite: { '/api/topics': '/api/v1/topics' },
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```
 
 与 [dev.proxy](/configure/app/dev/proxy) 不同，本节所介绍的代理只作用于进入 BFF/API 服务的请求；同时，这一配置不但可以在开发环境中使用，在生产环境中也会代理相应的请求。
 
-import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
-
-<BFFProxyPrinciple />
-
 ## 常见用法
 
 ### 解决接口跨域问题
@@ -61,4 +72,3 @@ export default defineServerConfig({
   },
 };
 ```
-

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

@@ -7,7 +7,7 @@ sidebar_label: baseUrl
 - **类型：** `string | string[]`
 - **默认值：** `undefined`
 
-统一设置服务端路由前缀（常用于共享域名的情况，区分流量)。
+统一设置服务端路由前缀（常用于多个应用共享同一域名的情况，区分流量)。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -5,11 +5,11 @@ sidebar_label: publicRoutes
 # server.publicRoutes
 
 - **类型：** `Object`
-- **默认值：** 根据文件约定自动生成的服务端路由规则：应用的每个文件生成一条路由规则。
+- **默认值：** 根据文件约定自动生成的服务端路由规则，每个文件生成一条路由规则。
 
 该配置选项只作用于服务端路由，可以自定义 `config/public/` 下资源的访问路由。
 
-对象的 `key` 为当前应用的相对文件路径（不使用 `./`）, 值可以是 `string`。
+对象的 `key` 为 `config/public/` 的相对文件路径（不使用 `./`）, 值可以是 `string`。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -5,9 +5,9 @@ sidebar_label: routes
 # server.routes
 
 - **类型：** `Object`
-- **默认值：** 根据文件约定自动生成的服务端路由规则：应用的每个入口生成一条路由规则，入口名称等于路由名称。
+- **默认值：** 根据文件约定自动生成的服务端路由规则，每个入口生成一条路由规则，入口名称等于路由路径。
 
-该配置选项只作用于服务端路由，可以自定义应用入口的服务访问配置。
+该配置选项只作用于服务端路由，可以自定义应用入口的访问路由。
 
 ## 自定义访问路由
 

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

@@ -7,7 +7,7 @@ sidebar_label: ssrByEntries
 - **类型：** `Object`
 - **默认值：** `undefined`
 
-按入口设置 ssr 选项，选项内的属性同 [ssr](./ssr.mdx)，指定值会和 ssr 属性内容做替换合并操作，例如：
+按入口设置 SSR 选项，选项内的属性同 [ssr](./ssr.mdx)，指定值会和 SSR 属性内容做替换合并操作，例如：
 
 :::info
 「 入口名 」默认为目录名，少数情况下通过 `source.entries` 自定义入口时，入口名为 `source.entries` 对象的 `key`。
@@ -19,11 +19,11 @@ export default defineConfig({
   server: {
     ssr: true,
     ssrByEntries: {
-      // page-a 不启用 ssr
+      // page-a 不启用 SSR
       'page-a': false,
     },
   },
 });
 ```
 
-如上配置，项目整体启用了 ssr, 但是针对入口 `page-a` 关闭了 ssr 渲染能力。
+如上配置，项目整体启用了 SSR, 但是针对入口 `page-a` 关闭了 SSR 渲染能力。

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

@@ -25,7 +25,7 @@ export default defineConfig({
 
 当值类型为 `Object` 时，可以配置如下属性：
 
-- `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 'stream' 开启流式渲染。
+- `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染。
 - `forceCSR`：`boolean = false`，默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 即可强制 CSR。
 - `inlineScript`：`boolean = true`，默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量。
 

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

@@ -7,8 +7,7 @@ sidebar_position: 6
 代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
 
 :::info
-使用 Modern.js [约定式路由](/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，包裹 `Suspense` 组件，无需自行进行代码分割。
-
+使用 Modern.js [约定式路由](/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，无需自行进行代码分割。
 :::
 
 - `import`
@@ -17,7 +16,7 @@ sidebar_position: 6
 
 ## import
 
-使用动态 `import()` 语法，`import` 接收的 JS 模块将作为一个新的打包入口被打包到单独的 JS 文件中。例如：
+使用动态 `import()` 语法，传入的 JS 模块将会被被打包到单独的 JS 文件中。例如：
 
 ```ts
 import('./math').then(math => {
@@ -25,15 +24,14 @@ import('./math').then(math => {
 });
 ```
 
-`./math` 路径对应的 JS 模块会被打包到单独的 JS 文件中。
-
 ## React.lazy
 
 React 官方提供的组件代码分割的方式。
 
 :::caution
-React 17 及以下版本不支持 SSR，建议 React17 的 SSR 应用使用 loadable。
+`React.lazy` 通常配合 `<Suspense>` 使用，因此仅在 CSR 或 React 18 Streaming SSR 中可用。
 
+对于使用传统 SSR（字符串渲染）的项目，不支持 `React.lazy`，请使用 Loadable API。
 :::
 
 ```ts
@@ -56,11 +54,11 @@ function MyComponent() {
 }
 ```
 
-`React.lazy` 更多用法请见 [React lazy](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy)。
+`React.lazy` 更多用法请见 [React 官网文档](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy)。
 
-## loadable
+## Loadable
 
-使用 `loadable` API，示例如下：
+在 Modern.js 中，可以从 `@modern-js/runtime/loadable` 中导出使用 Loadable API，示例如下：
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';
@@ -72,9 +70,12 @@ function MyComponent() {
 }
 ```
 
-`loadable` 更多用法请见 [loadable API](/apis/app/runtime/utility/loadable)。
+Modern.js 开箱即用的支持在 SSR 中使用 `loadable`，无需再添加 Babel 插件，或是在 SSR 时向 HTML 中注入脚本。
 
-:::info
-`loadable` 开箱即用的支持 SSR，但不支持和 Suspense 一起使用，如果是 CSR 项目可以使用 [loadable.lazy](https://loadable-components.com/docs/suspense/)
+但需要注意的是，任何 Loadable API 在 SSR 中都不支持配合 `<Suspense>` 使用。
 
+:::info
+如果希望在 React 17 及以下的 CSR 项目中使用 `<Suspense>`，可以用 [loadable.lazy](https://loadable-components.com/docs/suspense/) 代替 `React.lazy`。
 :::
+
+更多用法请见 [Loadable API](/apis/app/runtime/utility/loadable)。

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1686559924703",
+  "version": "0.0.0-next-1686578839599",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1686559924703"
+    "@modern-js/builder-doc": "0.0.0-next-1686578839599"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1686559924703",
-    "@modern-js/doc-tools": "0.0.0-next-1686559924703",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686559924703"
+    "@modern-js/builder-doc": "0.0.0-next-1686578839599",
+    "@modern-js/doc-tools": "0.0.0-next-1686578839599",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1686578839599"
   },
   "scripts": {
     "dev": "modern dev",

package/docs/en/components/bff-proxy-path-rewrite.mdx

@@ -1,16 +0,0 @@
-Path rewriting can also be performed here, such as proxying the request sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
-
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': {
-        target: 'https://cnodejs.org',
-        pathRewrite: { '/api/topics': '/api/v1/topics' },
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```

package/docs/en/components/bff-proxy-principle.mdx

@@ -1 +0,0 @@
-BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). For more advanced usage, please refer to its [documentation](https://github.com/chimurai/http-proxy-middleware#options).

package/docs/en/components/enable-bff-caution.mdx

@@ -1,3 +0,0 @@
-:::caution
-Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
-:::

package/docs/zh/components/bff-proxy-path-rewrite.mdx

@@ -1,16 +0,0 @@
-这里还可以进行路径重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
-
-```ts title="modern.server-runtime.config.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': {
-        target: 'https://cnodejs.org',
-        pathRewrite: { '/api/topics': '/api/v1/topics' },
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```

package/docs/zh/components/bff-proxy-principle.mdx

@@ -1 +0,0 @@
-BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法， 可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。

package/docs/zh/components/enable-bff-caution.mdx

@@ -1,4 +0,0 @@
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
-
-:::