@modern-js/main-doc 2.34.0 → 2.35.1

package/docs/en/apis/app/commands.mdx

@@ -30,7 +30,6 @@ After running `modern dev`, Modern.js will watch source file changes and apply h
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -42,7 +41,7 @@ In multi-page (MPA) projects, the `--entry` option can be added to specify one o
 
 For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
 
-```bash
+```text
 $ modern dev --entry
 
 ? Please select the entry that needs to be built
@@ -86,14 +85,16 @@ Options:
 
 execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
 
-```
+```text
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:
@@ -125,7 +126,7 @@ Options:
 
 In the project, execute the `new` command to add entries as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Create Element
 ? Please select the type of element to create: New "entry"
@@ -136,7 +137,7 @@ $ npx modern new
 
 In the project, execute the `new` command to enable features as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
@@ -156,7 +157,7 @@ pnpm does not support the use of JSON strings as parameter values currently. Use
 
 ## modern serve
 
-Usually use the `modern serve` command to enable project run in the production environment, and you need to execute the [`build'](/apis/app/commands#modern-build) command in advance to build the outputs.
+The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
 
 ```bash
 Usage: modern serve [options]

package/docs/en/apis/app/hooks/config/public.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 ---
 # public/
 
-Any static resource files can be placed in the `public/` directory, and the files will be deployed to the corresponding application domain by the server.
+Any static assets can be placed in the `public/` directory, and the files will be deployed to the corresponding application domain by the server.
 
 ## Description
 
@@ -19,7 +19,7 @@ For example, authentication files required by third-party systems such as `robot
 Or SDKs for other business parties (requiring unchanged routing), or HTML files without entry.
 
 :::info
-For static resources (such as SVG images) that need to be imported through import in the source code, it is recommended to manage them in the `src/assets` directory.
+For static assets (such as SVG images) that need to be imported through import in the source code, it is recommended to manage them in the `src/assets` directory.
 
 :::
 

package/docs/en/apis/app/hooks/config/upload.mdx

@@ -4,13 +4,13 @@ sidebar_position: 4
 ---
 # upload/
 
-Any static resource files can be placed in the `upload/` directory.
+Any static assets can be placed in the `upload/` directory.
 
 ## Description
 
-In the development environment, the static resource files in this directory will be hosted under the `/upload` path. After building the application, the files in this directory will be copied to the dist directory.
+In the development environment, the static assets in this directory will be hosted under the `/upload` path. After building the application, the files in this directory will be copied to the dist directory.
 
-This file convention is mainly used for developers to use plugins to proactively upload static resource files to the CDN.
+This file convention is mainly used for developers to use plugins to proactively upload static assets to the CDN.
 
 ## Scenarios
 

package/docs/en/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 Open `http://localhost:8000/` in your browser to see the page content.

package/docs/en/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@ This option is used to configure a global proxy based on [whistle](https://wprox
 
 Before using this option, you need to install and register the `@modern-js/plugin-proxy` plugin:
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 After the installation, please register the plugin in the `modern.config.ts` file:
 
@@ -75,13 +68,11 @@ module.exports = {
 Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:

package/docs/en/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Specific proxy rules can be set via the [`dev.proxy`](/configure/app/dev/proxy)
 After installing the proxy plugin and configuring the proxy rules, run the `pnpm run dev` command:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 You can see that the proxy server has started successfully in the console.

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

@@ -14,7 +14,7 @@ After create the project, Modern.js will automatically install dependencies and
 [INFO] git repository has been automatically created
 [INFO] Success！
 You can run the following command in the directory of the new project:
-pnpm run dev          # Starting the dev server
+pnpm run dev          # Starting dev server
 pnpm run build        # Build the app for production
 pnpm run serve        # Preview the production build locally
 pnpm run lint         # Run ESLint and automatically fix problems

package/docs/en/components/tech-stack-node-framework.mdx

@@ -0,0 +1 @@
+Modern.js supports [Express.js](https://expressjs.com/) and [Koa.js](https://koajs.com/) as optional BFF runtime frameworks. Please refer to the [BFF - Frameworks](/guides/advanced-features/bff/frameworks.html) for more information.

package/docs/en/configure/app/builder-plugins.mdx

@@ -15,8 +15,8 @@ Modern.js Builder is the build tool of Modern.js, please read [Builder](/guides/
 
 This option **is used to configure the Modern.js Builder plugins**. If you need to configure other types of plugins, please select the corresponding configs:
 
-- Use [plugins](/configure/app/builder-plugins) to configure Modern.js framework plugins.
-- Use [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) to configure webpack plugins.
+- Use [plugins](/configure/app/plugins) to configure Modern.js framework plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
 - Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
 
 ## When to use

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

@@ -15,10 +15,9 @@ Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implemen
 
 This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
 
-- To configure Modern.js Builder plugins, use the [builderPlugins](/configure/app/builder-plugins) option.
-- To configure webpack plugins, use the [tools.webpack](/configure/app/tools/webpack)、[tools.webpackChain](/configure/app/tools/webpack-chain) or [tools.bundlerChain](/configure/app/tools/bundler-chain) options.
-- To configure Rspack plugins, use the [tools.rspack](/configure/app/tools/rspack) or [tools.bundlerChain](/configure/app/tools/bundler-chain) options.
-- To configure Babel plugins, use the [tools.babel](/configure/app/tools/babel) option.
+- Use [builderPlugins](/configure/app/builder-plugins) to configure Modern.js Builder plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
+- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
 
 ## Plugin types
 

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

@@ -25,8 +25,6 @@ export default defineConfig({
 After running `dev`, you will see that the route access will have the corresponding prefix added:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

package/docs/en/configure/app/source/config-dir.mdx

@@ -7,11 +7,11 @@ sidebar_label: configDir
 - **Type:** `string`
 - **Default:** `./config`
 
-Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static resources, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html).
+Modern.js supports placing some files in the `./config` folder to customize HTML templates, icons, static assets, etc. For details, please refer to [File Convention](/apis/app/hooks/config/html).
 
 This option allows you to customize the directory of the configuration files.
 
-For example, adjust the resource file directory to the `resources` directory:
+For example, adjust the assets directory to the `resources` directory:
 
 ```js title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -49,6 +49,6 @@ import('./bootstrap.jsx');
 At this point, you can consume any remote module in the current page.
 
 :::info
-Modern.js does not have webpack's ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.webpackChain](/configure/app/tools/webpack-chain).
+Modern.js does not have ModuleFederationPlugin plugin built in. Please configure the ModuleFederationPlugin yourself via [tools.bundlerChain](/configure/app/tools/bundler-chain).
 
 :::

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

@@ -71,7 +71,7 @@ If the project does have special requirements or inevitable compatibility issues
 
 ### `src/.eslintrc.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.
+Modern.js Framework or Modern.js Module project will have this configuration file by default in the source code directory, which is designed for Universal JS code.
 
 :::info
 Universal JS code is code that can run on both the browser side and the server side.

package/docs/en/guides/basic-features/alias.mdx

@@ -1,67 +1,28 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Path Alias
 
-Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
+import Alias from '@modern-js/builder-doc/docs/en/shared/alias';
 
-```js
-{
-  '@': '<appDirectory>/src',
-  '@shared': '<appDirectory>/shared',
-}
-```
-
-:::info
-When enabling optional features, the `new` command will also dynamically add built-in alias specific to the features. For example, when enabling BFF, the `@api` alias is added by default.
+<Alias />
 
-:::
+## Default Aliases
 
-For example, importing modules from the `src/common` directory in the `src/App.tsx` file:
-
-```bash
-.
-├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
-└── App.tsx
-```
-
-The code in `src/App.tsx` is as follows:
-
-```ts
-import utils from '@/src/common/utils';
-import '@/src/common/styles/base.css';
-```
-
-Modern.js also provides a way to customize alias. For example, adding the `@common` alias is as follows:
-
-For TypeScript projects, just set `compilerOptions.paths` in the project's `tsconfig.json`:
+The Modern.js framework comes with the following aliases built-in:
 
 ```json
 {
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/common/*": ["./src/common/*"]
-    }
-  }
+  "@": "./src",
+  "@shared": "./shared"
 }
 ```
 
-For JavaScript projects, set `source.alias` in `modern.config.js`:
+Additionally, when the BFF plugin of the framework is enabled, the `@api` alias is automatically added.
 
-```ts title="modern.config.js"
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
+```json
+{
+  "@api": "./api"
+}
 ```
-
-For the specific usage of alias configuration, please refer to the [source.alias documentation](/configure/app/source/alias).

package/docs/en/guides/basic-features/css.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # Styling
@@ -61,16 +61,31 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 ## Using Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles. To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, simply run `pnpm run new` in the project root directory and enable it.
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-Follow the steps below to make a selection:
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
+
+1. Run `pnpm run new` in the root directory of your project and make the following selections:
 
 ```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
 
-Register the Tailwind plugin in `modern.config.ts`:
+After successful initialization, you will see the following additions to the `package.json` file:
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-To use, add the following code to the root component (such as `src/App.jsx`) of the entry:
+3. Create a `index.css` file and add the following code:
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
+:::
+
+4. Import the `index.css` file, for example, add the following code in the root component `src/App.jsx`:
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-Then you can use the Utility Class provided by Tailwind CSS in each component:
+5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info Additional Information
-Depending on your needs, you can selectively import the CSS files provided by Tailwind CSS. Since using `@tailwind` is equivalent to directly importing CSS files, you can refer to the comments in the [`@tailwind` usage](https://tailwindcss.com/docs/functions-and-directives#tailwind) documentation for the purpose of the CSS files provided by Tailwind CSS.
-
-:::
-
 ### Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: Data Fetching
+sidebar_position: 3
 ---
 
 # Data Fetching
 
-Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.
+Modern.js provides out-of-the-box data fetching capabilities,developers can fetch data in the project through these APIs.
 
 It should be noted that these APIs do not help applications initiate requests, but rather help developers better manage data and improve project performance.
 
@@ -13,7 +14,7 @@ It should be noted that these APIs do not help applications initiate requests, b
 Modern.js recommends using [conventional routing](/guides/basic-features/routes) for routing management. Through Modern.js's [conventional (nested) routing](/guides/basic-features/routes#conventional-routing), each routing component (`layout.ts` or `page.ts`) can have a same-named `loader` file. The `loader` file needs to export a function that will be executed before the component is rendered to provide data for the routing component.
 
 :::info
-Modern.js v1 supports fetching data via [useLoader](/guides/basic-features/data-fetch.html#useloader-(old-version)), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
+Modern.js v1 supports fetching data via [useLoader](</guides/basic-features/data-fetch.html#useloader-(old-version)>), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
 
 :::
 
@@ -216,25 +217,24 @@ If you want to get the data returned by the `loader` in `entry1/routes/layout.ts
 
 :::info
 This feature is currently experimental and the API may change in the future.
-Currently only supports CSR, please look forward to Streaming SSR.
 :::
 
 Create `user/layout.loader.ts` and add the following code:
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```

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

@@ -10,7 +10,7 @@ Modern.js provides support for environment variables, including built-in environ
 
 ### ASSET_PREFIX
 
-The current path prefix of the resource file, which is a read-only environment variable.
+The current path prefix of the asset, which is a read-only environment variable.
 
 ### NODE_ENV
 

package/docs/en/guides/basic-features/html.mdx

@@ -165,9 +165,9 @@ export default function Document(): React.ReactElement {
 
 ## HTML Syntax
 
-Modern.js also supports HTML syntax. By default, Modern.js application projects will include a built-in HTML template for generating HTML code.
+Modern.js also supports generating HTML files using HTML (EJS) syntax.
 
-Based on the HTML syntax template, Modern.js provides two ways to customize the template: **custom HTML fragments** and **custom the whole HTML**.
+By default, Modern.js projects come with a built-in HTML template for generating HTML code. If you need to customize the HTML template, you can use two methods: **Custom HTML Fragments** and **Fully Custom HTML Templates**.
 
 ### Custom HTML Fragments
 

package/docs/en/guides/basic-features/routes.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Routing
@@ -140,6 +140,7 @@ To simplify the introduction of the relationship between `<Layout>` and `<Outlet
   </UserLayout>
 </Layout>
 ```
+
 In summary, if there is a `layout.tsx` file under the sub-route's file directory, the `<Outlet>` in the parent `layout.tsx` will represent the `layout.tsx` in the sub-route file directory. Otherwise, it will represent the `page.tsx` in the sub-route file directory.
 
 #### Page
@@ -148,12 +149,12 @@ All routes should end with the `<Page>` component. If the developer introduces t
 
 #### Config
 
-Each `Layout` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
+Each `Layout`,`$` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
 
 ```ts title="routes/blog/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 These properties as defined are available via the [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook:
@@ -161,12 +162,11 @@ These properties as defined are available via the [`useMatches`](https://reactro
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
 ### Dynamic Routing
@@ -227,6 +227,7 @@ For example, the following directory structure:
 ```
 
 When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -364,6 +365,17 @@ export default () => {
 };
 ```
 
+If you want to redirect in a component,you can navigate by `useNavigate` hook, for example:
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### ErrorBoundary
 
 In each directory under `routes/`, developers can also define an `error.tsx` file that exports an `<ErrorBoundary>` component by default.
@@ -391,7 +403,6 @@ export const ErrorBoundary = () => {
 
 In each root `Layout` component (`routes/layout.ts`), you can dynamically define runtime configuration:
 
-
 ```tsx title="src/routes/layout.tsx"
 // Define runtime config
 import type { AppConfig } from '@modern-js/runtime';
@@ -480,15 +491,16 @@ In conventional routing, Modern.js automatically splits routes into chunks based
 
 However, this also brings a problem: if the chunk corresponding to the route has not finished loading when the user visits the route, a white screen will appear.
 
-In this case, you can define a `Loading` component to display a custom `Loading` component before the static resources are loaded.
+In this case, you can define a `Loading` component to display a custom `Loading` component before the static assets are loaded.
 
-To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data.
+To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static assets and data.
 
 ```tsx
 <Link prefetch="intent" to="page">
 ```
 
 :::info
+
 - This feature is currently only supported in Webpack projects and not yet supported in Rspack projects.
 - Preloading data currently only preloads the data returned by the [Data Loader](/guides/basic-features/data-fetch) in SSR projects.
 
@@ -502,19 +514,19 @@ The `prefetch` attribute has three optional values:
 
 #### FAQ
 
-1. What is the difference between using `render` and not splitting static resources based on the route?
+1. What is the difference between using `render` and not splitting static assets based on the route?
 
 - By using `render`, you can specify which routes to load during the initial screen, and you can control the rendering so that only when the `Link` component enters the visible area, the `Link` component will be rendered.
-- By using `render`, static resources will only be loaded when the system is idle, and will not compete with the static resources of the initial screen for network resources.
+- By using `render`, static assets will only be loaded when the system is idle, and will not compete with the static assets of the initial screen for network assets.
 - In the SSR scenario, data will also be pre-fetched.
 
-import Motivation from '@site-docs-en/components/convention-routing-motivation'
+import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
-<Motivation/>
+<Motivation />
 
-import Practice from '@site-docs-en/components/routes-practice'
+import Practice from '@site-docs-en/components/routes-practice';
 
-<Practice/>
+<Practice />
 
 ## Self-controlled Routing
 

package/docs/en/guides/concept/builder.mdx

@@ -42,6 +42,6 @@ For detailed information about build configuration, please refer to [「Modern.j
 
 ## Builder Capabilities
 
-Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
+Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static assets processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
 We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.