@modern-js/main-doc 2.67.6 → 2.67.7

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -88,73 +88,3 @@ export default () => {
 `<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::
-
-## Upgrading to React Router v7
-
-React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
-
-:::info
-
-For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
-
-:::
-
-### Requirements
-
-React Router v7 has certain environment requirements:
-
-- Node.js 20+
-- React 18+
-- React DOM 18+
-
-### Install the Plugin
-
-First, install the Modern.js React Router v7 plugin:
-
-```bash
-pnpm add @modern-js/plugin-router-v7
-```
-
-### Configure the Plugin
-
-Register the plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { routerPlugin } from '@modern-js/plugin-router-v7';
-
-export default {
-  runtime: {
-    router: true,
-  },
-  plugins: [routerPlugin()],
-};
-```
-
-### Code Changes
-
-In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
-
-```ts title="routes/page.data.ts"
-import { defer } from '@modern-js/runtime/router';
-
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  const user = fetchUser(params.id)
-  return { user };
-
-  // v6 style, still compatible with Modern.js
-  return defer({ data: 'hello' });
-};
-```
-
-React Router v7 has also deprecated the `json` API:
-
-```ts title="routes/page.data.ts"
-export const loader = async ({ params }) => {
-  // Recommended v7 style
-  return { data: 'hello' };
-
-  // v6 style, still compatible with Modern.js
-  return json({ data: 'hello' });
-};
-```

package/docs/en/configure/app/performance/transform-lodash.mdx

@@ -4,9 +4,12 @@ title: transformLodash
 
 # performance.transformLodash
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `boolean`
 - **Default:** `true`
-- **Bundler:** `only support webpack`
 
 Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
 

package/docs/en/configure/app/source/module-scopes.mdx

@@ -4,9 +4,12 @@ title: moduleScopes
 
 # source.moduleScopes
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Array<string | Regexp> | Function`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 Restrict importing paths. After configuring this option, all source files can only import code from the specific paths, and import code from other paths is not allowed.
 

package/docs/en/configure/app/tools/terser.mdx

@@ -4,6 +4,10 @@ title: terser
 
 # tools.terser
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:**
 
@@ -17,8 +21,6 @@ const defaultTerserOptions = {
 };
 ```
 
-- **Bundler:** `only support webpack`
-
 When building for production, Modern.js will minimize the JavaScript code through [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin). The config of [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) can be modified via `tools.terser`.
 
 ### Object Type

package/docs/en/configure/app/tools/ts-loader.mdx

@@ -4,9 +4,12 @@ title: tsLoader
 
 # tools.tsLoader
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 :::warning Deprecated
 

package/docs/en/configure/app/tools/webpack-chain.mdx

@@ -4,9 +4,12 @@ title: webpackChain
 
 # tools.webpackChain
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 You can modify the webpack configuration by configuring `tools.webpackChain` which is type of `Function`. The function receives two parameters, the first is the original webpack chain object, and the second is an object containing some utils.
 

package/docs/en/configure/app/tools/webpack.mdx

@@ -4,9 +4,12 @@ title: webpack
 
 # tools.webpack
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >Webpack Only</Badge>
+
 - **Type:** `Object | Function | undefined`
 - **Default:** `undefined`
-- **Bundler:** `only support webpack`
 
 `tools.webpack` is used to configure [webpack](https://webpack.js.org/).
 

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

@@ -12,10 +12,15 @@ Modern.js encapsulates most server-side capabilities required by projects, typic
 You must ensure that the Modern.js version is x.67.5 or above.
 :::
 
-To start a custom web server, the following steps need to be taken:
-1. Add and install the dependencies `@modern-js/server-runtime` and `ts-node` to `devDependencies`.
-2. Add `server` to the `include` section of `tsconfig`.
-3. Create a file `server/modern.server.ts` in the project directory, where you can write custom logic.
+Developers can execute the `pnpm run new` command in the project root directory to start the "Custom Web Server" feature:
+
+```bash
+? Select operation: Create project element
+? Select element type: Create "Custom Web Server" source directory
+```
+
+After executing the command, a `server/modern.server.ts` file will be automatically created in the project directory, where you can write custom logic.
+
 
 ## Capabilities of the Custom Web Server
 
@@ -230,6 +235,13 @@ export default () => {
 The legacy API is compatible but no longer recommended. For extending server capabilities, please refer to [Custom Web Server](/guides/advanced-features/web-server.html#custom-web-server). For migration guidelines, see [Migrating to the New Version of Custom Web Server](/guides/advanced-features/web-server.html#migrate-to-the-new-version-of-custom-web-server).
 :::
 
+### Enable
+To enable the custom Web Server feature, follow these steps:
+1. Add `@modern-js/plugin-server`、`tsconfig-paths` and `ts-node` to `devDependencies` and install them.
+2. Add `server` to the `include` section of `tsconfig`.
+3. Register the `@modern-js/plugin-server` plugin in `modern.config.ts`.
+4. Create a `server/index.ts` file in the project directory, where you can write custom logic.
+
 ### Unstable Middleware
 
 Modern.js supports adding rendering middleware to the Web Server, allowing custom logic execution before and after processing page routes.

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

@@ -166,7 +166,7 @@ const getComplexStatistics = cache(
   }
 );
 
-revalidateTag('dashboard-stats'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
+revalidateTag('dashboard'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
 ```
 
 

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

@@ -217,7 +217,7 @@ document.addEventListener('load', () => {
 export const doSomething = () => {}
 ```
 
-Directly referencing this in a component will cause CSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
+Directly referencing this in a component will cause SSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
 
 ```tsx title="routes/page.tsx"
 import { doSomething } from 'packageA';

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

@@ -68,7 +68,7 @@ Here, `user` is a Promise object representing asynchronously fetched data, proce
 Additionally, `defer` can receive both asynchronous and synchronous data. In the example below, short-duration requests are returned using object data, while longer-duration requests are returned using a Promise:
 
 ```ts title="user/[id]/page.data.ts"
-export const loader = ({ params }: LoaderFunctionArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
   const userId = params.id;
 
   const user = new Promise<User>(resolve => {
@@ -227,4 +227,4 @@ import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performanc
 ## Related Documentation
 
 1. [Deferred Data](https://reactrouter.com/en/main/guides/deferred)
-2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)
+2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)

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

@@ -490,6 +490,76 @@ import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
 <Motivation />
 
+## Upgrading to React Router v7
+
+React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
+
+:::info
+
+For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
+
+:::
+
+### Requirements
+
+React Router v7 has certain environment requirements:
+
+- Node.js 20+
+- React 18+
+- React DOM 18+
+
+### Install the Plugin
+
+First, install the Modern.js React Router v7 plugin:
+
+```bash
+pnpm add @modern-js/plugin-router-v7
+```
+
+### Configure the Plugin
+
+Register the plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { routerPlugin } from '@modern-js/plugin-router-v7';
+
+export default {
+  runtime: {
+    router: true,
+  },
+  plugins: [routerPlugin()],
+};
+```
+
+### Code Changes
+
+In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
+
+```ts title="routes/page.data.ts"
+import { defer } from '@modern-js/runtime/router';
+
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  const user = fetchUser(params.id)
+  return { user };
+
+  // v6 style, still compatible with Modern.js
+  return defer({ data: 'hello' });
+};
+```
+
+React Router v7 has also deprecated the `json` API:
+
+```ts title="routes/page.data.ts"
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  return { data: 'hello' };
+
+  // v6 style, still compatible with Modern.js
+  return json({ data: 'hello' });
+};
+```
+
 ## FAQ
 
 1. Why there is `@modern-js/runtime/router` to re-export React Router API
@@ -535,3 +605,5 @@ export const init = () => {
   // initialization logic
 };
 ```
+
+

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

@@ -12,7 +12,7 @@ WebAssembly (Wasm) is a portable, high-performance binary format designed to exe
 
 ## Import
 
-You can import a WebAssembly module directly in a JavaScript file:
+You can import a WebAssembly module via named import in a JavaScript file:
 
 ```js title="index.js"
 import { add } from './add.wasm';

package/docs/en/guides/topic-detail/module-federation/deploy.mdx

@@ -1,8 +1,17 @@
 # Deployment
 
-Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address.
+In general, when deploying a Module Federation application, there are two key points to consider:
 
-For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows:
+1. Ensure that the remote module addresses in the consumer's configuration file are correct, and that the consumer can correctly access the producer's `manifest` file.
+2. Ensure that all resources in the producer's `manifest` file can be accessed correctly.
+
+We recommend using Modern.js's [Node Server](/guides/basic-features/deploy.html#using-modernjs-built-in-nodejs-server) to deploy Module Federation applications for an out-of-the-box experience.
+
+## Consumer
+
+For the consumer of Module Federation, its connection with the producer is the remote module address in the configuration file.
+
+For example, if the producer is deployed under the domain `https://my-remote-module`, the developer needs to modify the consumer's configuration file:
 
 ```ts title="module-federation.config.ts"
 import { createModuleFederationConfig } from '@module-federation/modern-js';
@@ -10,7 +19,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://my-remote-module/mf-manifest.json',
+    remote: 'remote@https://my-remote-module/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -19,10 +28,77 @@ export default createModuleFederationConfig({
 });
 ```
 
-At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment.
+At this point, the consumer will load the `manifest` configuration file of the remote module production environment.
+
+:::note
+In the above code, the address of the remote module is `/static/mf-manifest.json`, which is just an example using the default output path of Modern.js. In actual projects, developers need to configure according to the actual access path.
+:::
+
+## Producer
+
+For the producer of Module Federation, developers need to correctly configure the [`output.assetPrefix`](/configure/app/output/asset-prefix) configuration, which affects:
+
+1. The `publicPath` defined in `mf-manifest.json`, which determines the access path of other resources of the remote module.
+2. The access path of the `mf-manifest.json` file when hosted directly by the Modern.js server.
+
+In the production environment, developers need to configure `output.assetPrefix` as the access path of the production environment. For example, if we deploy the producer under the domain `https://my-remote-module`, we need to configure `output.assetPrefix` as `https://my-remote-module`.
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://my-remote-module',
+  },
+});
+```
+
+At this point, the `publicPath` defined in the producer's build output `mf-manifest.json` is `https://my-remote-module`, for example:
+
+```json
+{
+  "id": "remote",
+  "name": "remote",
+  "metaData": {
+    "name": "remote",
+    "publicPath": "https://my-remote-module/"
+  },
+  "shared": [ /* xxx */ ],
+  "remotes": [],
+  "exposes": [ /* xxx */ ]
+}
+```
+
+When the consumer accesses the remote module, it will automatically prepend the `publicPath` to the resource path of the remote module.
+
+This configuration will also affect the access path of the producer's `mf-manifest.json`. For example, if this value is set to `MyDomain/module-a`, the hosting path of `mf-manifest.json` becomes `MyDomain/module-a/static/mf-manifest.json`.
+
+At this point, the consumer needs to configure the following address when configuring the remote module:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
+  },
+});
+```
+
+## Local Deployment Verification
 
-## Deployment via Platform
+Modern.js provides the `modern deploy` command, which can easily generate products that can run in a Node.js environment.
 
-The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues.
+```bash
+modern deploy
+```
+
+After executing the command, you can see the following output in the console:
+
+```bash
+Static directory: .output/static
+You can preview this build by node .output/index
+```
 
-We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms.
+At this point, the developer only needs to run `node .output/index` to preview the effect locally. Whether it is a CSR or an SSR application, all Module Federation files can be accessed correctly.

package/docs/en/guides/topic-detail/module-federation/usage.mdx

@@ -190,8 +190,6 @@ If we want to simulate the production environment in local, but not configure `o
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
-const isLocal = process.env.IS_LOCAL === 'true';
-
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
@@ -204,7 +202,7 @@ export default defineConfig({
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
-    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+    assetPrefix: 'http://127.0.0.1:3051',
   },
   plugins: [
     appTools({
@@ -215,7 +213,7 @@ export default defineConfig({
 });
 ```
 
-Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+Now, in the producer, run `modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
 
 You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
 

package/docs/en/plugin/cli-plugins/api.mdx

@@ -324,7 +324,7 @@ Modify the server routing configuration.
 ```typescript
 api.modifyServerRoutes(routes => {
   // Add a new API route
-  routes.concat({
+  routes.push({
     urlPath: '/api',
     isApi: true,
     entryPath: '',

package/docs/zh/configure/app/performance/transform-lodash.mdx

@@ -4,9 +4,12 @@ title: transformLodash
 
 # performance.transformLodash
 
+import { Badge } from '@theme';
+
+<Badge type="danger" ><div>仅支持 Webpack</div></Badge>
+
 - **类型：** `boolean`
 - **默认值：** `true`
-- **打包工具：** `仅支持 webpack`
 
 是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。
 

package/docs/zh/configure/app/source/module-scopes.mdx

@@ -4,9 +4,12 @@ title: moduleScopes
 
 # source.moduleScopes
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Array<string | Regexp> | Function`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 限制源代码的引用路径。配置该选项后，所有源文件只能从约定的目录下引用代码，从其他目录引用代码会产生对应的报错提示。
 

package/docs/zh/configure/app/tools/terser.mdx

@@ -4,6 +4,10 @@ title: terser
 
 # tools.terser
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：**
 
@@ -17,8 +21,6 @@ const defaultTerserOptions = {
 };
 ```
 
-- **打包工具：** `仅支持 webpack`
-
 在生产环境构建时，Modern.js 会通过 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 对 JavaScript 代码进行压缩优化。可以通过 `tools.terser` 修改 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 的配置。
 
 ### Object 类型

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -4,9 +4,12 @@ title: tsLoader
 
 # tools.tsLoader
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 :::warning 废弃提示
 

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -4,9 +4,12 @@ title: webpackChain
 
 # tools.webpackChain
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 你可以通过 `tools.webpackChain` 来修改默认的 webpack 配置，它的值为 `Function` 类型，接收两个参数：
 

package/docs/zh/configure/app/tools/webpack.mdx

@@ -4,9 +4,12 @@ title: webpack
 
 # tools.webpack
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 `tools.webpack` 选项用于配置原生的 [webpack](https://webpack.js.org/)。
 

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

@@ -12,10 +12,15 @@ Modern.js 将大部分项目需要的服务端能力都进行了封装，通常
 必须确保 Modern.js 版本是 x.67.5 及以上。
 :::
 
-开启自定义 Web Server 功能，需要执行以下步骤：
-1. devDependencies 增加 `@modern-js/server-runtime` 及 `ts-node`依赖并安装。
-2. `tsconfig` 的 `include` 中添加 `server`。
-3. 项目目录下创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+开发者可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Server」功能：
+
+```bash
+? 请选择你想要的操作 创建工程元素
+? 请选择创建元素类型 新建「自定义 Web Server」源码目录
+```
+
+执行命令后，项目目录下会自动创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+
 
 ## 自定义 Web Server 能力
 
@@ -227,6 +232,14 @@ export default () => {
 旧版 API 兼容但不再推荐使用，扩展 Server 能力请移步 [自定义 Web Server](/guides/advanced-features/web-server.html)，迁移指南参考 [迁移至新版自定义 Web Server](/guides/advanced-features/web-server.html#迁移至新版自定义-web-server)。
 :::
 
+### 开启
+开启自定义 Web Server 功能，需要执行以下步骤：
+1. devDependencies 增加 `@modern-js/plugin-server`、`tsconfig-paths` 及 `ts-node`依赖并安装。
+2. `tsconfig` 的 `include` 中添加 `server`。
+3. `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件。
+4. 项目目录下创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。
+
+
 ### Unstable Middleware
 
 Modern.js 支持为 Web Server 添加渲染中间件，支持在处理页面路由的前后执行自定义逻辑。

package/docs/zh/guides/basic-features/data/data-cache.mdx

@@ -159,7 +159,7 @@ const getComplexStatistics = cache(
   }
 );
 
-revalidateTag('dashboard-stats'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
+revalidateTag('dashboard'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
 ```
 
 #### `getKey` 参数

package/docs/zh/guides/basic-features/render/ssr.mdx

@@ -222,7 +222,7 @@ document.addEventListener('load', () => {
 export const doSomething = () => {}
 ```
 
-如果直接引用到组件中，会造成 CSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
+如果直接引用到组件中，会造成 SSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
 
 ```tsx title="routes/page.tsx"
 import { doSomething } from 'packageA';

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

@@ -72,7 +72,7 @@ export const loader = ({ params }: LoaderFunctionArgs) => {
 另外，`defer` 还可以同时接收异步数据和同步数据。在下述例子中，我们等待部分耗时较短的请求，在响应后通过对象数据返回，而耗时较长时间的请求，则通过 Promise 返回：
 
 ```ts title="user/[id]/page.data.ts"
-export const loader = ({ params }: LoaderFunctionArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
   const userId = params.id;
 
   const user = new Promise<User>(resolve => {

package/docs/zh/guides/basic-features/static-assets/wasm-assets.mdx

@@ -12,7 +12,7 @@ WebAssembly（缩写为 wasm）是一种可移植、高性能的字节码格式
 
 ## 引用方式
 
-你可以直接在 JavaScript 文件中引用一个 WebAssembly 模块：
+你可以在 JavaScript 文件中使用 named import 引用一个 WebAssembly 模块：
 
 ```js title="index.js"
 import { add } from './add.wasm';

package/docs/zh/guides/topic-detail/module-federation/deploy.mdx

@@ -1,8 +1,17 @@
 # 部署
 
-通常情况下，部署 Module Federation 应用，需要在消费者上将远程模块地址，调整为其线上地址。
+通常情况下，部署 Module Federation 应用，需要注意两点：
 
-例如已经将生产者部署到 `https://my-remote-module` 这个域名下，可以这样修改消费者的 `module-federation.config.ts` 文件：
+1. 保证消费者配置文件中的远程模块地址无误，消费者能够正确访问到生产者的 `manifest` 文件。
+2. 保证生产者 `manifest` 文件中各个资源能被正确访问到。
+
+我们推荐使用 Modern.js 的 [Node 服务](/guides/basic-features/deploy.html#modernjs-内置-nodejs-服务器)来部署 Module Federation 应用，以获得开箱即用的体验。
+
+## 消费者
+
+对于 Module Federation 的消费者来说，它与生产者的联系就是在配置文件中的远程模块地址。
+
+例如生产者部署在 `https://my-remote-module` 这个域名下，开发者需要修改消费者的配置文件：
 
 ```ts title="module-federation.config.ts"
 import { createModuleFederationConfig } from '@module-federation/modern-js';
@@ -10,7 +19,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://my-remote-module/mf-manifest.json',
+    remote: 'remote@https://my-remote-module/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -19,10 +28,77 @@ export default createModuleFederationConfig({
 });
 ```
 
-此时，消费者将加载生产环境的 `remote` 模块的 `manifest` 配置文件。
+此时，消费者将加载远程模块生产环境的 `manifest` 配置文件。
+
+:::note
+上述代码中，远程模块的地址是 `/static/mf-manifest.json`，这只是以 Modern.js 默认的产物路径举例。在实际项目中，开发者需要根据实际的访问路径进行配置。
+:::
+
+## 生产者
+
+对于 Module Federation 的生产者，开发者需要正确的配置 [`output.assetPrefix`](/configure/app/output/asset-prefix) 配置，它会影响到：
+
+1. `mf-manifest.json` 中定义的 `publicPath`，它决定了远程模块其他资源的访问路径。
+2. 通过 Modern.js 服务直接托管产物时，`mf-manifest.json` 文件的访问路径。
+
+在生产环境，开发者需要将 `output.assetPrefix` 配置为生产环境的访问路径。例如我们将生产者部署在 `https://my-remote-module` 这个域名下，需要将 `output.assetPrefix` 配置为 `https://my-remote-module`。
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://my-remote-module',
+  },
+});
+```
+
+此时，生产者构建产物 `mf-manifest.json` 中定义的 `publicPath` 为 `https://my-remote-module`，例如：
+
+```json
+{
+  "id": "remote",
+  "name": "remote",
+  "metaData": {
+    "name": "remote",
+    "publicPath": "https://my-remote-module/"
+  },
+  "shared": [ /* xxx */ ],
+  "remotes": [],
+  "exposes": [ /* xxx */ ]
+}
+```
+
+消费者在访问远程模块时，会自动将 `publicPath` 拼接在远程模块的资源路径前。
+
+该配置也会影响到生产者 `mf-manifest.json` 的访问路径。例如将这个值设置为 `MyDomain/module-a` 时，`mf-manifest.json` 的托管路径变为 `MyDomain/module-a/static/mf-manifest.json`。
+
+此时，消费者在配置远程模块时，需要配置以下地址：
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
+  },
+});
+```
+
+## 本地验证部署
 
-## 通过平台部署
+Modern.js 提供了 `modern deploy` 命令，可以方便生成可运行在 Node.js 环境的产物。
 
-上述部署方式只是最简单的实践，在真实场景还有很多限制，例如版本管理、发布时序等。在字节跳动内部，我们在部署平台上搭建了 Module Federation 应用的部署流程，可以帮助开发者解决这些问题。
+```bash
+modern deploy
+```
+
+执行命令后，可以在控制台看到以下输出：
+
+```bash
+Static directory: .output/static
+You can preview this build by node .output/index
+```
 
-我们会持续关注社区里类似功能的平台，在未来完善 Modern.js + Module Federation 在这些类平台上的部署文档。
+此时，开发者只需要运行 `node .output/index` 即可在本地预览部署后的效果。无论是 CSR 应用或是 SSR 应用，所有的 Module Federation 产物都能够被正确的访问。

package/docs/zh/guides/topic-detail/module-federation/usage.mdx

@@ -189,8 +189,6 @@ export default Index;
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
-const isLocal = process.env.IS_LOCAL === 'true';
-
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
@@ -203,7 +201,7 @@ export default defineConfig({
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
-    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+    assetPrefix: 'http://127.0.0.1:3051',
   },
   plugins: [
     appTools({
@@ -214,7 +212,7 @@ export default defineConfig({
 });
 ```
 
-现在，在生产者中运行 `IS_LOCAL=true modern build && modern serve`，在消费者中运行 `modern build && modern serve`，即可在本地模拟生产环境，访问到远程模块。
+现在，在生产者中运行 `modern build && modern serve`，在消费者中运行 `modern build && modern serve`，即可在本地模拟生产环境，访问到远程模块。
 
 上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
 

package/docs/zh/plugin/cli-plugins/api.mdx

@@ -324,7 +324,7 @@ api.modifyWebpackConfig((config, utils) => {
 ```typescript
 api.modifyServerRoutes(routes => {
   // 添加一个新的 API 路由
-  routes.concat({
+  routes.push({
     urlPath: '/api',
     isApi: true,
     entryPath: '',

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.67.6",
+  "version": "2.67.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.67.6"
+    "@modern-js/sandpack-react": "2.67.7"
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "1.3.1",