@modern-js/main-doc 2.59.0 → 2.60.1-alpha.0

package/docs/en/guides/advanced-features/bff/function.mdx

@@ -1,10 +1,8 @@
----
-sidebar_position: 1
-title: Basic Usage
----
 # Basic Usage
 
-Applications developed with Modern.js can define API functions in the `api/` directory, which can be called by the front-end to send requests without writing front and back-end glue layer code, At the same time, it ensures the type safety of the front and back end
+In a Modern.js application, developers can define API files under the `api/lambda` directory and export API functions from these files. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests.
+
+This invocation method is called **unified invocation**, where developers do not need to write glue code for the frontend and backend separately, thereby ensuring type safety across both.
 
 ## Enable BFF
 
@@ -12,17 +10,17 @@ import EnableBFF from "@site-docs-en/components/enable-bff"
 
 <EnableBFF/>
 
-## BFF Function
+## BFF Functions
 
-The functions that are allowed to be called through integration are called **BFF functions**. Here is the simplest BFF function to write, creating an `api/hello.ts` file:
+Functions that allow unified invocation are called **BFF Functions**. Here is an example of the simplest BFF function. First, create the `api/lambda/hello.ts` file:
 
-```ts title="api/hello.ts"
+```ts title="api/lambda/hello.ts"
 export const get = async () => 'Hello Modern.js';
 ```
 
-Then directly import the function in `src/App.tsx` and call:
+Then, import and invoke the function directly in `src/routes/page.tsx`:
 
-```tsx title=src/App.tsx
+```tsx title="src/routes/page.tsx"
 import { useState, useEffect } from 'react';
 import { get as hello } from '@api/hello';
 
@@ -36,131 +34,142 @@ export default () => {
 };
 ```
 
-:::info
-Modern.js generator has already configured the `@api` alias in tsconfig.json, so you can import functions directly by aliases.
-
+:::tip
+After running the `new` command, the Modern.js generator will automatically configure the `@api` alias in `tsconfig.json`, allowing you to import functions directly using the alias.
 :::
 
-The functions import in `src/App.tsx` will be automatically converted into interface calls, so there is no need to call the interface through fetch.
+The function imported in `src/routes/page.tsx` will be automatically converted into an API call, eliminating the need to use an SDK or Web Fetch to call the API.
 
-Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page has displayed the content returned by the BFF function. In Network, you can see that the page sent a request to `http://localhost:8080/api/hello`.
+After running `pnpm run dev`, open `http://localhost:8080/` and you can see that the page displays the content returned by the BFF function. In the Network tab, you can see a request was made to `http://localhost:8080/api/hello`.
 
 ![Network](https://p6-piu.byteimg.com/tos-cn-i-8jisjyls3a/fd41750f8d414179a9b4ecb519919b36~tplv-8jisjyls3a-3:0:0:q75.png)
 
-## API Routes
+## Function Routes
 
-In Modern.js, the BFF function routing system is implemented based on the file system, and it is also a conventional routing system.
-
-In **Function Mode**, All files under `api/` will map to an interface. In **Framework Mode**, All files under `api/lambda` will map to an interface
-
-:::note
-Function Mode & Framework Mode will introduce soon.
+In Modern.js, the routing system for BFF functions is implemented based on the file system, which is another form of **conventional routing**. Each BFF function in the `api/lambda` directory is mapped to an API route. Here are some routing conventions.
 
+:::info
+All routes generated by BFF functions have a common prefix, which defaults to `/api`. This can be configured using [bff.prefix](/configure/app/bff/prefix).
 :::
 
-All routes generated by BFF functions have a prefix, and the default value is `/api`. The prefix can be set through [bff.prefix](/configure/app/bff/prefix).
+### Default Routes
 
-Several routing conventions are described as follow.
+Files named `index.[jt]s` will be mapped to the parent directory.
 
-### Default Route
+- `api/lambda/index.ts` -> `{prefix}/`
+- `api/lambda/user/index.ts` -> `{prefix}/user`
 
-Files named `index.[jt]s` are mapped to the previous directory.
+### Nested Routes
 
-- `api/index.ts` -> `{prefix}/`
-- `api/user/index.ts` -> `{prefix}/user`
+Nested directories are supported, and files will be automatically parsed into routes in the same way.
 
-### Multi-layer Routing
+- `api/lambda/hello.ts` -> `{prefix}/hello`
+- `api/lambda/user/list.ts` -> `{prefix}/user/list`
 
-Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
+### Dynamic Routes
 
-- `api/hello.ts` -> `{prefix}/hello`
-- `api/user/list.ts` -> `{prefix}/user/list`
+Similarly, creating a directory or file with `[xxx]` in the name supports dynamic route parameters. The rules for dynamic route function parameters can be found in [dynamic-path](/guides/advanced-features/bff/function#dynamic-path).
 
-### Dynamic Routing
+- `api/lambda/user/[username]/info.ts` -> `{prefix}/user/:username/info`
+- `api/lambda/user/username/[action].ts` -> `{prefix}/user/username/:action`
 
-Create folders or files named with `[xxx]` to support dynamic named routing parameters.
+### Whitelist
 
-- `api/user/[username]/info.ts` -> `{prefix}/user/:username/info`
-- `api/user/username/[action].ts` -> `{prefix}/user/username/:action`
+By default, all files under the `api/lambda/` directory are parsed as BFF function files, but the following files are ignored:
 
-### Allow List
-
-By default, all files in the'api/'directory will be parsed as BFF function files, but the following files will not be parsed:
-
-- file name start with `_`, for example `_utils.ts`.
-- files in directory which name start with `_`, for example `_utils/index.ts`、`_utils/cp.ts`.
-- test files, for example `foo.test.ts`.
-- type files, for example `hello.d.ts`.
-- files in `node_module`.
+- Files starting with an underscore `_`. For example: `_utils.ts`.
+- Files under directories starting with an underscore `_`. For example: `_utils/index.ts`, `_utils/cp.ts`.
+- Test files. For example: `foo.test.ts`.
+- TypeScript type files. For example: `hello.d.ts`.
+- Files under `node_modules`.
 
 ## RESTful API
 
-Modern.js BFF functions need to be defined according to the RESTful API standard, follow the HTTP Method specification, and do not allow free parameter definition.
-
-:::info
-Assuming that the function allows free definition of parameters, the resulting route must be called by the **private protocol** (the reason is that the request parameters cannot be distinguished from the request body), and cannot implement any RESTful API.
-
-If the service is only used for the application itself, there is no problem. but its **non-standard interface definition** cannot be integrated into the larger system. In the case of multiple systems working together (such as BFF low-code construction), other systems also need to follow the **private protocol**.
+Modern.js BFF functions need to follow RESTful API standards for definition. Developers must define BFF functions according to a set of rules.
 
+:::tip Design Principles
+BFF functions should not only be invoked within the project but also be accessible to other projects via an SDK or Web fetch. Therefore, Modern.js does not define a **private protocol** for unified invocation but uses standard HTTP methods along with common HTTP request parameters like `params`, `query`, and `body` to define functions.
 :::
 
-### Function Named Export
+### Function Export Rules
 
-Modern.js the export name of the BFF function determines the Method of the corresponding interface of the function, such as `get`, `post` and so on.
+#### HTTP Method Named Functions
 
-For example, following the example, a `GET` interface can be exported.
+Modern.js BFF functions' export names determine the HTTP method for the corresponding API, such as `get`, `post`, etc. For example, to export a GET API:
 
 ```ts
 export const get = async () => {
   return {
     name: 'Modern.js',
-    desc: 'Web engineering system',
+    desc: 'A modern web engineering solution',
   };
 };
 ```
 
-Following the example below, a `POST` interface can be exported.
+The following example exports a `POST` API:
 
 ```ts
 export const post = async () => {
   return {
     name: 'Modern.js',
-    desc: 'Web engineering system',
+    desc: 'A modern web engineering solution',
   };
 };
 ```
 
-- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`, can be exported using these methods as functions.
+- Modern.js supports 9 HTTP methods: `GET`, `POST`, `PUT`, `DELETE`, `CONNECT`, `TRACE`, `PATCH`, `OPTIONS`, and `HEAD`, which can be used as function export names.
 
-- The name is size insensitive, if `GET`, can write `get`、`Get`、`GEt`、`GET`, can be accurately identified. But default export as `export default xxx` will be map to `Get`.
+- Names are case-insensitive. If the method is `GET`, it can be written as `get`, `Get`, `GEt`, or `GET`, and the default export, i.e., `export default xxx`, will be mapped to `Get`.
 
-- Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first will take effect.
+#### Using Async Functions
 
-:::info
-It should be noted that the defined functions should all be asynchronous, which is related to the type when the function is called, which will be mentioned later.
+Modern.js recommends defining BFF functions as async functions, even if there is no asynchronous process in the function, for example:
 
-:::
+```ts
+export const get = async () => {
+  return {
+    name: 'Modern.js',
+    desc: 'A modern web engineering solution',
+  };
+};
+```
 
-### Function Parameter Rule
+This is because, during frontend invocation, the BFF function will be automatically converted into an HTTP API call, and HTTP API calls are asynchronous. On the frontend, it is typically used like this:
 
-As mentioned above, in order to meet the design criteria of RESTful APIs, the BFF function in Modern.js needs to follow certain imported parameter rules.
+```tsx title="src/routes/page.tsx"
+import { useState, useEffect } from 'react';
+import { get as hello } from '@api/hello';
 
-The function parameters are divided into two parts, the dynamic part in the request path and the request option `RequestOption`.
+export default () => {
+  const [text, setText] = useState('');
+
+  useEffect(() => {
+    hello().then(setText);
+  }, []);
+  return <div>{text}</div>;
+};
+```
+
+Therefore, to keep the type definitions consistent with the actual invocation experience, we recommend defining BFF functions as async functions.
+
+### Function Parameter Rules
+
+Function parameter rules are divided into two parts: dynamic routes in the request path (`Dynamic Path`) and request options (`RequestOption`).
 
 #### Dynamic Path
 
-Dynamic routing will be used as imported parameters in the first part of the function, and each imported parameter corresponds to a dynamic route. For example, in the following example, uid will be passed into the function as the first two parameters:
+Dynamic routes will be the first part of the BFF function parameters, with each parameter corresponding to a segment of the dynamic route. For example, the `level` and `id` parameters will be passed to the function in the following example:
 
-```ts title="api/[level]/[id].ts"
+```ts title="api/lambda/[level]/[id].ts"
 export default async (level: number, id: number) => {
   const userData = await queryUser(level, uid);
   return userData;
 };
 ```
 
-Pass dynamic parameters directly when calling:
+Invoke the function by directly passing in the dynamic parameters:
 
-```ts title="App.tsx"
+```tsx title="src/routes/page.tsx"
 import { useState, useEffect } from 'react';
 import { get as getUser } from '@api/[level]/[id]';
 
@@ -177,24 +186,41 @@ export default () => {
 
 #### RequestOption
 
-The parameter after Dynamic Path is the object `RequestOption` containing querystring and request body, which is used to define the types of `data` and `query`.
+Parameters following the dynamic path are an object called `RequestOption`, which includes the query string and request body. This field is used to define the types for `data` and `query`.
 
-In normal functions without dynamic routing, the incoming `data` and `query` can be obtained from the first imported parameter, for example:
+In a standard function without dynamic routes, `RequestOption` can be obtained from the first parameter, for example:
 
-```ts title="api/hello.ts"
+```ts title="api/lambda/hello.ts"
 import type { RequestOption } from '@modern-js/runtime/server';
 
 export async function post({
   query,
   data,
 }: RequestOption<Record<string, string>, Record<string, string>>) {
-  // do somethings
+  // do something
 }
 ```
 
-When a function file uses dynamic routing rules, dynamic routing before the `RequestOption` parameter.
+Custom types can also be used here:
+
+```ts title="api/lambda/hello.ts"
+import type { RequestOption } from '@modern-js/runtime/server';
+
+type IQuery = {
+  // some types
+};
+type IData = {
+  // some types
+};
 
-```ts title="api/[sku]/[id]/item.ts"
+export async function post({ query, data }: { query: IQuery; data: IData }) {
+  // do something
+}
+```
+
+When the function file uses dynamic routing, dynamic routes will precede the `RequestOption` object parameter.
+
+```ts title="api/lambda/[sku]/[id]/item.ts"
 export async function post(
   sku: string,
   id: string,
@@ -207,9 +233,9 @@ export async function post(
 }
 ```
 
-Also pass in the parameters according to the function definition:
+Pass the corresponding parameters when invoking the function according to its definition:
 
-```ts title="App.tsx"
+```ts title="src/routes/page.tsx"
 import { post } from '@api/[sku]/[id]/item';
 
 export default () => {
@@ -228,6 +254,8 @@ export default () => {
 };
 ```
 
-As mentioned earlier, the defined functions should be asynchronous because they are automatically converted to HTTP interface calls when called by the front end.
+## Extend BFF Function
+
+import ExtendBFF from "@site-docs-en/components/extend-bff-function"
 
-so in order to keep the type definition consistent with the actual calling, it is necessary to set the BFF function to asynchronous when defining it.
+<ExtendBFF/>

package/docs/en/guides/advanced-features/bff/sdk.mdx

@@ -1,81 +1,70 @@
----
-sidebar_position: 4
-title: Custom request SDK
----
-# Custom request SDK
+# Extend Request SDK
 
-Modernjs's BFF is isomorphic in CSR and SSR.In the browser side rely on the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)，On the server relies on the [node-fetch](https://www.npmjs.com/package/node-fetch).However, in many business scenarios we need to do some additional processing of the request or response, for example:
+The unified invocation of BFF functions is isomorphic in both CSR and SSR. The request SDK encapsulated by Modern.js relies on the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) on the browser side, and on [node-fetch](https://www.npmjs.com/package/node-fetch) on the server side. However, in actual business scenarios, additional processing may be required for requests or responses, such as:
 
-- Write auth information in the request header
-- Uniform processing of response data or errors
-- The browser's native fetch function is not available for a particular platform, and other methods of sending requests are required
+- Writing authentication information in the request headers
+- Uniform handling of response data or errors
+- Using other methods to send requests when the native fetch function is unavailable on specific platforms
 
-For the above scenario, Modern.js provides the `configure` function，the customization capabilities range from low to high and can be used to configure ssr pass-through request headers, interceptors, and request SDKs..
-
-:::caution
-The `configure` function call needs to be called before all BFF requests are sent, to ensure that the default request configuration is overridden.
+To address these scenarios, Modern.js provides the `configure` function, which offers a series of extension capabilities. You can use it to configure SSR passthrough request headers, add interceptors, or customize the request SDK.
 
+:::caution Note
+The `configure` function needs to be called before all BFF requests are sent to ensure that the default request configuration is overridden.
 :::
 
-
-```ts title="App.tsx"
+```tsx title="routes/page.tsx"
 import { configure } from '@modern-js/runtime/bff';
 
 configure({
-  request: customRequest
+  // ...
 })
-```
 
-## Configure ssr pass-through request headers
+const Index = () => <div>Hello world</div>
+export default Index;
+```
 
-In scenarios where both Modern.js SSR and BFF are used, it is often necessary to pass some request headers on SSR page requests to the BFF service.
+## Configuring SSR Passthrough Request Headers
 
-For example, the project has a page address `https://website.com`, which is an SSR page, and the API interface `https://website.com/api/info` will be called in the component, which requires the user's cookie information for authentication. When the page requests this API interface, it needs to pass the `cookie` requested by the SSR page to BFF.
+When using both Modern.js SSR and BFF, it is often necessary to pass some request header information from the SSR page request to the BFF service.
 
-Currently the following request headers are automatically passed through in Modern.js:
+For example, imagine a project with a page URL `https://website.com`. This page is rendered using SSR, and in the component, it will call the API endpoint `https://website.com/api/info`, which requires the user's cookie information for authentication. The page needs to pass the `cookie` of the SSR page request to the BFF when requesting this API endpoint.
 
-- cookie
-- x-tt-logid
-- user-agent
-- x-tt-stress
+Currently, the following request headers are automatically passed through in Modern.js:
 
-The request header can be configured via `configure`. For example, in the following example, Modern.js will automatically pass the cookie information of the SSR page request to the BFF service:
+```ts
+['cookie', 'user-agent', 'x-tt-logid', 'x-tt-stress']
+```
 
-```tsx title="App.tsx"
-import { configure } from '@modern-js/runtime/bff';
+You can configure additional request headers using `configure`. For example, in the following snippet, Modern.js will automatically pass the `x-uid` information from the SSR page request to the BFF service:
 
+```tsx
 configure({
   allowedHeaders: ['x-uid']
 })
 ```
 
-## Configuring Interceptors
+## Adding Interceptors
 
-In certain business scenarios, there is a requirement for unified processing of requests and responses, and interceptors can be configured to fulfill these requirements in such scenarios.
+In some business scenarios, you may need to handle requests and responses uniformly. This can be achieved by **configuring interceptors**:
 
-```tsx title="App.tsx"
+```tsx
 configure({
-  // The request here is the default request sdk for bff, and the interceptor function needs to return a new request.
-  // The return value of the new request must be the result of the parse body
-  interceptor(request){
-    return async(url, params) => {
+  // The `request` here is the default request tool for unified invocation. The `interceptor` function needs to return a new request.
+  // The output of the new request must be the parsed body result.
+  interceptor(request) {
+    return async (url, params) => {
       const res = await request(url, params);
       return res.json();
     };
-  };
+  }
 });
 ```
 
-## Configure custom request SDK
-
-If the requirements cannot be met by configuring interceptors alone  and need to further customize the request SDK, you can configure the custom request SDK by using the `configure` function:
-
-:::caution
-Send a request to the BFF service when the server side renders, Modern.js will find the BFF service intranet IP via **service discovery** and send requests via IP to improve performance. This optimization is **lost** if a custom request SDK is used.
+## Customizing the Request SDK
 
-:::
+If configuring interceptors alone cannot meet your needs and you want to customize the request function, you can also configure it using `configure`:
 
-```tsx title="App.tsx"
+```tsx
 import nodeFetch from 'node-fetch';
 
 const customFetch = (input: RequestInfo | URL, init: RequestInit) => {
@@ -92,13 +81,13 @@ configure({
 });
 ```
 
-The configuration custom request SDK has the following conventions:
+There are some conventions when configuring custom request functions:
 
-- The `configure` function allows you to configure a `request` function whose input is the same as the Fetch or node-fetch in the browser, and all BFF functions will send requests through this function
-- The return value of the `request` function must be the actual data returned by the interface, not a Promise, otherwise the BFF function will not return data properly.
-- In the case of SSR projects, `request` must support both browser-side and server-side sending of requests.
+- The function's parameters should align with the Fetch API or node-fetch in the browser. All unified invocations of BFF functions will send requests via this function.
+- The function's output must be the actual data returned by the API, not a Promise, otherwise, the BFF function will not return data correctly.
+- If it's an SSR project, the function must support sending requests on both the browser and server sides.
 
-Example of custom request SDK using axios:
+Below is an example of using axios to customize a request function:
 
 ```tsx title="App.tsx"
 import { configure } from '@modern-js/runtime/bff';
@@ -108,7 +97,7 @@ configure({
   async request(...config: Parameters<typeof fetch>) {
     const [url, params] = config;
     const res = await axios({
-      url: url as string,  // Here, because of some incompatibility between fetch and axios types, you need to use `as`
+      url: url as string,  // Here we need to use `as` because fetch and axios types are somewhat incompatible
       method: params?.method as Method,
       data: params?.body,
       headers: params?.headers as Headers,
@@ -116,4 +105,4 @@ configure({
     return res.data;
   },
 });
-```
+```

package/docs/en/guides/advanced-features/build-performance.mdx

@@ -9,13 +9,17 @@ Modern.js optimizes build performance by default, but as the project becomes lar
 This document provides some optional speed-up strategies, developers can choose some of them to improve the build performance.
 
 :::tip 📢 Notice
-The strategies in [Bundle Size Optimization](/guides/advanced-features/optimize-bundle.html) can also be used to improve build performance, so we won't repeat them here.
+The strategies in [Bundle Size Optimization](/guides/advanced-features/page-performance/optimize-bundle) can also be used to improve build performance, so we won't repeat them here.
 :::
 
 ## General optimization strategy
 
 The following are some general optimization strategies, which can speed up the development build and production build, and some of them also optimize the bundle size.
 
+### Using Rspack (recommended)
+
+If you are not using Rspack yet, you can switch to Rspack build mode to improve the build speed by 5~10 times, see [Using Rspack](/guides/advanced-features/rspack-start.html) for more information.
+
 ### Upgrade Node.js version
 
 In general, updating Node.js to the latest [LTS release](https://github.com/nodejs/release#release-schedule) will help improve build performance.
@@ -40,25 +44,6 @@ nvm default 18
 node -v
 ```
 
-### Using Rspack build
-
-If you have higher build performance requirements, you can easily switch to Rspack build mode, see [Using Rspack](/guides/advanced-features/rspack-start.html) for more information.
-
-### Using SWC or esbuild
-
-[SWC](https://SWC.rs/) (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on `Rust`. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.
-
-[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, compared to webpack's built-in terser minimizer, esbuild has dozens of times better performance.
-
-Modern.js provides SWC plugin and esbuild plugin that allow you to use SWC or esbuild instead of babel-loader, ts-loader and terser for transformation and minification process. See:
-
-- [SWC plugin document](/configure/app/tools/swc.html)
-- [esbuild plugin document](/configure/app/tools/esbuild.html)
-
-:::tip SWC vs esbuild
-The SWC compiled outputs has better compatibility, supports polyfills such as core-js, and has more complete features, so it is recommended to use the SWC plugin first.
-:::
-
 ### Avoid using ts-loader
 
 By default, Modern.js uses Babel to compile TS files. After enabling the [tools.tsLoader](/en/configure/app/tools/ts-loader.html) option, `ts-loader` will be used to compile TS files.
@@ -118,7 +103,7 @@ export default {
 
 ### Adjust Browserslist for development
 
-This strategy is similar to ["Adjust Browserslist"](/guides/advanced-features/optimize-bundle.html#adjust-browserslist), the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead in the development environment.
+This strategy is similar to ["Adjust Browserslist"](/guides/advanced-features/page-performance/optimize-bundle#adjust-browserslist), the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead in the development environment.
 
 For example, you can add the following config to `package.json`, which means that only the latest browsers are compatible in the development environment, and the actual browsers are compatible in the production environment:
 

package/docs/en/guides/advanced-features/page-performance/_meta.json

@@ -0,0 +1 @@
+["code-split", "inline-assets", "optimize-bundle"]

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

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Using Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/en/shared/rspackTip.mdx';
+import Rspack from '@site-docs-en/components/rspackTip.mdx';
 
 <Rspack />
 
@@ -42,7 +42,7 @@ export default defineConfig({
 If your current version is lower than MAJOR_VERSION.59.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
-import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
+import RspackPrecautions from '@site-docs-en/components/rspackPrecautions.mdx';
 
 <RspackPrecautions />
 

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

@@ -2,7 +2,7 @@
 
 [CSS Modules](https://github.com/css-modules/css-modules) allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts.
 
-Builder supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules.
+Modern.js supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the `[name].module.css` filename to enable CSS Modules.
 
 The following style files are considered CSS Modules:
 
@@ -163,7 +163,7 @@ After adding the type declaration, if the type error still exists, you can try t
 
 Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
 
-Builder supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
+Modern.js supports generating accurate type declarations for CSS Modules, you only need to enable the [output.enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration) config, and then execute the build, Modern.js will generate type declaration files for all CSS Modules.
 
 ```ts
 export default {

package/docs/en/guides/basic-features/output-files.mdx

@@ -42,7 +42,7 @@ In the filename, `[name]` represents the entry name corresponding to this file,
 
 ## Modify the Directory
 
-Builder provides some configs to modify the directory or filename, you can:
+Modern.js provides some configs to modify the directory or filename, you can:
 
 - Modify the filename through [output.filename](/configure/app/output/filename).
 - Modify the output path of through [output.distPath](/configure/app/output/dist-path).

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

@@ -205,4 +205,4 @@ In the above configuration, the `x-tt-env` request header is set for all routes,
 
 :::tip
 Headers set in routes will override headers set for entries.
-:::
+:::

package/docs/en/guides/basic-features/render/streaming-ssr.mdx

@@ -220,7 +220,7 @@ However, when a crawler visits the page, it might need to load all content and o
 
 Modern.js uses [isbot](https://www.npmjs.com/package/isbot) to determine if a request is from a crawler based on the `user-agent` header.
 
-import StreamSSRPerformance from '@site-docs/components/stream-ssr-performance';
+import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performance';
 
 <StreamSSRPerformance />
 

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

@@ -462,8 +462,7 @@ For applications with higher performance requirements, prefetching can further e
 
 :::tip
 
-- This feature is currently only supported in Webpack projects and not in Rspack projects.
-- Data preloading currently only preloads data returned by the [Data Loader](/guides/basic-features/data/data-fetch) in SSR projects.
+Data preloading currently only preloads data returned by the [Data Loader](/guides/basic-features/data/data-fetch) in SSR projects.
 
 :::
 
@@ -587,4 +586,4 @@ Additionally, when using conventional routing, make sure to use the API from `@m
 If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` and `react-router-dom` to the project's dependencies, avoiding the issue of two versions of React Router.
 :::
 
-import Motivation from '@site-docs/components/convention-routing-motivation';
+import Motivation from '@site-docs-en/components/convention-routing-motivation';

package/docs/en/guides/basic-features/static-assets.mdx

@@ -76,7 +76,7 @@ console.log(largeImage); // "/static/largeImage.6c12aba3.png"
 console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..."
 ```
 
-For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/inline-assets) chapter.
+For a more detailed introduction to asset inlining, please refer to the [Static Asset Inlining](/guides/advanced-features/page-performance/inline-assets) chapter.
 
 ## Output Files
 

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

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Build Engine
 
-Modern.js internally encapsulates its own build tool (Modern.js Builder) based on [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
+Modern.js internally encapsulates [Rsbuild](https://rsbuild.dev/), and supports seamless switching between Webpack and Rspack bundlers.
 
 ::: tip What is Rsbuild?
 Rsbuild is a build tool based on Rspack. It is an enhanced Rspack CLI, easy-to-use, and ready-to-use out of the box.