@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/configure/app/tools/css-loader.md

@@ -4,7 +4,7 @@ sidebar_label: cssLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.cssLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.cssLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-cssloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/cssLoader.md'

package/zh/configure/app/tools/dev-server.md

@@ -4,7 +4,7 @@ sidebar_label: devServer
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.devServer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-devserver)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.devServer](https://modernjs.dev/builder/zh/api/config-tools.html#tools-devserver)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/devServer.md'

package/zh/configure/app/tools/esbuild.md

@@ -3,59 +3,36 @@ title: tools.esbuild
 sidebar_label: esbuild
 ---
 
-* 类型： `Object`
-* 默认值： `undefined`
+- 类型： `Object`
+- 默认值： `undefined`
 
 ## 介绍
 
-esbuild 是使用 Go 语言编写的 JavaScript Bundler/Minifier，它的特点是速度极快。在代码压缩方面，相比 webpack 内置的 terser 压缩器，esbuild 在性能上有数十倍的提升。
-
-Modern.js 基于 esbuild 提供了代码编译和压缩的能力，在大型工程中开启后，**可以大幅度减少代码压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
-
-使用 esbuild 压缩虽然带来了构建效率上的提升，但 esbuild 的压缩比例是低于 terser 的，因此**构建产物的体积会增大**，请根据业务情况酌情使用（比较适合中后台场景）。
-
-对于压缩工具之间的详细对比，可以参考 [minification-benchmarks](https://github.com/privatenumber/minification-benchmarks)。
-
-:::info
-除了代码压缩外，esbuild 也可以代替 babel 进行代码编译，优点是可以提升编译速度，缺点是无法使用丰富的 babel 插件能力。
+:::tip esbuild 介绍
+[esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。在代码压缩方面，相比 webpack 内置的 terser 压缩器，esbuild 在性能上有数十倍的提升。
 :::
 
-## 配置项
-
-### target
+Modern.js 提供了 esbuild 插件，让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中开启后，**可以大幅度减少代码编译和压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
 
-* 类型： `string | string[]`
-* 默认值： `'esnext'`
-
-为生成的 JavaScript 和 CSS 代码设置目标环境。
-
-可以直接设置为 JavaScript 语言版本，比如 `es5`，`es6`，`es2020`。也可以设置为若干个目标环境，每个目标环境都是一个环境名称后跟一个版本号。比如 `['chrome58', 'edge16' ,'firefox57']`。
-
-支持设置以下环境：
+## 配置项
 
-- chrome
-- edge
-- firefox
-- ie
-- ios
-- node
-- opera
-- safari
+你可以通过 `tools.esbuild` 配置项来设置 esbuild 编译行为。
 
-默认情况下，esbuild 压缩过程中会引入 ES6 代码，比如模板字符串。如果需要兼容 ES5，可以将 `target` 设置为 `es5`。
+```js title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
 
-```typescript title="modern.config.ts"
 export default defineConfig({
   tools: {
     esbuild: {
-      target: 'es5',
+      loader: {
+        target: 'chrome61',
+      },
+      minimize: {
+        target: 'chrome61',
+      },
     },
   },
 });
 ```
 
-:::info
-设置 `target` 为 `es5` 时，需要保证所有代码被 babel 转义为 es5 代码，否则会导致 esbuild 编译报错：`Transforming 'xxx' to the configured target environment ("es5") is not supported yet`。
-
-`target` 字段的详细介绍可以参考 [esbuild - target](https://esbuild.github.io/api/#target)。
-:::
+完整配置项请参考 [Modern.js Builder - esbuild 插件配置](https://modernjs.dev/builder/zh/plugins/plugin-esbuild.html#%E9%85%8D%E7%BD%AE)。

package/zh/configure/app/tools/html-plugin.md

@@ -4,7 +4,7 @@ sidebar_label: htmlPlugin
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.htmlPlugin](https://modernjs.dev/builder/zh/api/config-tools.html#tools-htmlplugin)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.htmlPlugin](https://modernjs.dev/builder/zh/api/config-tools.html#tools-htmlplugin)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/htmlPlugin.md'

package/zh/configure/app/tools/inspector.md

@@ -4,7 +4,7 @@ sidebar_label: inspector
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.inspector](https://modernjs.dev/builder/zh/api/config-tools.html#tools-inspector)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.inspector](https://modernjs.dev/builder/zh/api/config-tools.html#tools-inspector)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/inspector.md'

package/zh/configure/app/tools/less.md

@@ -4,7 +4,7 @@ sidebar_label: less
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.less](https://modernjs.dev/builder/zh/api/config-tools.html#tools-less)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.less](https://modernjs.dev/builder/zh/api/config-tools.html#tools-less)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/less.md'

package/zh/configure/app/tools/minify-css.md

@@ -4,7 +4,7 @@ sidebar_label: minifyCss
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.minifyCss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-minifycss)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.minifyCss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-minifycss)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/minifyCss.md'

package/zh/configure/app/tools/postcss.md

@@ -4,7 +4,7 @@ sidebar_label: postcss
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.postcss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-postcss)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.postcss](https://modernjs.dev/builder/zh/api/config-tools.html#tools-postcss)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/postcss.md'

package/zh/configure/app/tools/pug.md

@@ -4,7 +4,7 @@ sidebar_label: pug
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.pug](https://modernjs.dev/builder/zh/api/config-tools.html#tools-pug)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.pug](https://modernjs.dev/builder/zh/api/config-tools.html#tools-pug)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/pug.md'

package/zh/configure/app/tools/sass.md

@@ -4,7 +4,7 @@ sidebar_label: sass
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.sass](https://modernjs.dev/builder/zh/api/config-tools.html#tools-sass)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.sass](https://modernjs.dev/builder/zh/api/config-tools.html#tools-sass)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/sass.md'

package/zh/configure/app/tools/style-loader.md

@@ -4,7 +4,7 @@ sidebar_label: styleLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.styleLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styleloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.styleLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styleloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/styleLoader.md'

package/zh/configure/app/tools/styled-components.md

@@ -4,7 +4,7 @@ sidebar_label: styledComponents
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.styledComponents](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styledcomponents)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.styledComponents](https://modernjs.dev/builder/zh/api/config-tools.html#tools-styledcomponents)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/styledComponents.md'

package/zh/configure/app/tools/swc.md

@@ -0,0 +1,42 @@
+---
+title: tools.swc
+sidebar_label: swc
+---
+
+- 类型： `Object`
+- 默认值： `undefined`
+
+## 介绍
+
+[SWC](https://swc.rs/) (Speedy Web Compiler) 是基于 `Rust` 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力，并且比 Babel 性能高出 10 倍不止。
+
+Modern.js 提供了开箱即用的 SWC 插件，可以为你的 Web 应用提供语法降级、Polyfill 以及压缩，并且移植了一些额外常见的 Babel 插件。
+
+## 安装
+
+使用前需要安装 `@modern-js/plugin-swc` 插件，安装完成后，会自动启用 SWC 编译和压缩能力。
+
+```bash
+pnpm add @modern-js/plugin-swc -D
+```
+
+## 配置项
+
+你可以通过 `tools.swc` 配置项来设置 SWC 编译行为。
+
+```js title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  tools: {
+    swc: {
+      jsMinify: {
+        compress: {},
+        mangle: true,
+      },
+    },
+  },
+});
+```
+
+完整配置项请参考 [Modern.js Builder - SWC 插件配置](https://modernjs.dev/builder/zh/plugins/plugin-swc.html#%E9%85%8D%E7%BD%AE)。

package/zh/configure/app/tools/terser.md

@@ -4,7 +4,7 @@ sidebar_label: terser
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.terser](https://modernjs.dev/builder/zh/api/config-tools.html#tools-terser)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.terser](https://modernjs.dev/builder/zh/api/config-tools.html#tools-terser)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/terser.md'

package/zh/configure/app/tools/ts-checker.md

@@ -4,7 +4,7 @@ sidebar_label: tsChecker
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.tsChecker](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tschecker)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.tsChecker](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tschecker)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/tsChecker.md'

package/zh/configure/app/tools/ts-loader.md

@@ -4,7 +4,7 @@ sidebar_label: tsLoader
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.tsLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tsloader)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.tsLoader](https://modernjs.dev/builder/zh/api/config-tools.html#tools-tsloader)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/tsLoader.md'

package/zh/configure/app/tools/webpack-chain.md

@@ -4,7 +4,7 @@ sidebar_label: webpackChain
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.webpackChain](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpackchain)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.webpackChain](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpackchain)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/webpackChain.md'

package/zh/configure/app/tools/webpack.md

@@ -4,7 +4,7 @@ sidebar_label: webpack
 ---
 
 :::info BUILDER
-该配置为 Modern.js Builder 配置，可能存在无法跳转的链接。详细信息可参考 [tools.webpack](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpack)。
+该配置为 Modern.js Builder 配置，详细信息可参考 [tools.webpack](https://modernjs.dev/builder/zh/api/config-tools.html#tools-webpack)。
 :::
 
 import Main from '@modern-js/builder-doc/zh/config/tools/webpack.md'

package/zh/guides/advanced-features/bff/bff-proxy.md

@@ -5,7 +5,7 @@ title: 使用 BFF 代理
 
 通过配置 BFF 代理，无需手动写码，即可对 API 请求进行转发。
 
-::: caution
+:::caution
 使用 BFF 代理需确保请求能进入 BFF handler。（例如请求路径必须包含 bff prefix）
 :::
 

package/zh/guides/advanced-features/compatibility.md

@@ -25,8 +25,8 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 可以通过微生成器开启该功能：
 
 ```bash
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「基于 UA 的 Polyfill」功能
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「基于 UA 的 Polyfill」功能
 ```
 
 安装依赖后，配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run start` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
@@ -40,42 +40,6 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 
 ![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
 
-
-## 差异化分发
-
-Modern.js 提供了运行时基于浏览器 User Agent 的差异化分发方案, 设置 [`output.enableModernMode`](/docs/configure/app/output/enable-modern-mode) 后， 生产环境会自动构建出针对现代浏览器语法未降级的 JS 产物和针对旧版本浏览器带有 Polyfill 的 JS 产物:
-
-```bash title="dist/static/js"
-├── 370.95db0e84-es6.js
-├── 370.95db0e84-es6.js.map
-├── 370.ace5d8a0.js
-├── 370.ace5d8a0.js.map
-├── main.64eb3bc7-es6.js
-├── main.64eb3bc7-es6.js.map
-├── main.c8aab430.js
-├── main.c8aab430.js.map
-├── runtime-main.9ad9a46b-es6.js
-├── runtime-main.9ad9a46b-es6.js.map
-├── runtime-main.dccca6e0.js
-└── runtime-main.dccca6e0.js.map
-```
-
-同时 HTML 也会构建出对应的 ES6 版本:
-
-```js title="dist/html/main/index-es6.html"
-<script defer="defer" src="/static/js/370.95db0e84-es6.js"></script>
-```
-
-```js title="dist/html/main/index.html"
-<script defer="defer" src="/static/js/370.ace5d8a0.js"></script>
-```
-
-通过 `pnpm run build && pnpm run start` 启动服务器, 访问页面时，会根据浏览器信息决定返回 `index-es6.html` 还是 `index.html`。
-
-:::info 注
-内部目前使用 [@babel/compat-data](https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/native-modules.json) 来判断具体浏览器是否支持 es6 语法。
-:::
-
 ## Browserslist 配置
 
 Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。

package/zh/guides/advanced-features/custom-app.md

@@ -9,46 +9,50 @@ sidebar_position: 7
 
 ## 添加自定义行为
 
-当 `index` 文件默认导出**函数**是，Modern.js 还是会根据 `runtime.features` 的设置情况生成 `createApp` 包裹后的代码。在渲染过程中，将 `createApp` 包裹后的组件作为参数传递给 `index` 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+当 `index` 文件默认导出**函数**是，Modern.js 还是会根据 `runtime` 的设置情况生成 `createApp` 包裹后的代码。在渲染过程中，将 `createApp` 包裹后的组件作为参数传递给 `index` 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 
 ```js title=src/index.jsx
+import ReactDOM from 'react-dom/client'
 import { bootstrap } from '@modern-js/runtime';
 
-export default App => {
+
+export default (App: React.ComponentType) => {
   // do something before bootstrap...
-  bootstrap(App, 'root');
+  bootstrap(App, 'root', undefined, ReactDOM);
 };
 ```
 
+:::warning
+由于 bootstrap 函数需要兼容 React17 和 React18 的用法，调用 bootstrap 函数时需要手动传入 ReactDOM 参数。
+:::
+
 Modern.js 生成的文件内容如下：
 
 ```js
-import customRender from '@/src/index.js';
-import { createApp, bootstrap } from '@modern-js/runtime';
 import React from 'react';
-import App from '@/src/App';
+import ReactDOM from 'react-dom/client';
+import customBootstrap from '@_edenx_src/index.tsx';
+import App from '@_edenx_src/App';
+import { router, state } from '@edenx/runtime/plugins';
 
-const IS_BROWSER = typeof window !== 'undefined';
+const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
 const MOUNT_ID = 'root';
 
 let AppWrapper = null;
 
-const renderApp = () => {
+function render() {
   AppWrapper = createApp({
     // runtime 的插件参数...
-  })(App);
-  customRender(AppWrapper);
-};
-
-renderApp();
+  })(App)
+  if (IS_BROWSER) {
+    customBootstrap(AppWrapper);
+  }
+  return AppWrapper
+}
 
-export default AppWrapper;
+AppWrapper = render();
 
-if (IS_BROWSER && module.hot) {
-  module.hot.accept('<path>/src/App', () => {
-    renderApp();
-  });
-}
+export default AppWrapper;;
 ```
 
 ## 完全接管 Webpack 入口

package/zh/guides/advanced-features/ssg.md

@@ -1,5 +1,5 @@
 ---
-title: 静态站点生成
+title: 静态站点生成（SSG）
 sidebar_position: 4
 ---
 
@@ -9,7 +9,7 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 SSG 是构建阶段的解决方案，因此仅对生产环境有效。通过 `dev` 命令运行时，表现效果与 SSR 相同。
 :::
 
-我们首先需要执行`pnpm run new`启用 SSG 功能：
+我们首先需要执行 `pnpm run new` 启用 SSG 功能：
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
@@ -25,22 +25,37 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 例如，以下是一个使用约定式路由的项目目录结构：
 
 ```
-├── src/
-│   ├── pages/
-│   │   ├── home.tsx
-│   │   ├── info.tsx
-│   │   └── index.tsx
+.
+├── src
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
 ```
 
-在 `src/pages/index.tsx` 中添加组件代码：
+上述文件目录将会生成以下三条路由：
 
-```jsx title="src/pages/index.tsx"
+- `/`
+- `/user`
+- `/user/profile`
+
+:::note
+如果还不了解约定式路由的规则，可以先查看[路由](/docs/guides/basic-features/routes)。
+:::
+
+在 `src/routes/page.tsx` 中添加组件代码：
+
+```jsx title="src/routes/page.tsx"
 export default () => {
-  return  <div>index page</div>
+  return  <div>Index Page</div>
 }
 ```
 
-SSG 和 SSR 一样，也是在 Node.js 环境中完成页面渲染，因此我们可以在开发阶段开启 SSR，提前在开发阶段验证 SSG 渲染效果：
+SSG 也是在 Node.js 环境渲染页面，因此我们可以在**开发阶段开启 SSR**，提前在暴露代码问题，验证 SSG 渲染效果：
 
 ```typescript title="modern.config.ts"
 export default defineConfig({
@@ -50,13 +65,11 @@ export default defineConfig({
 }
 ```
 
-在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件：
-
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-dev.png)
+在项目根路径下执行 `pnpm run dev` 命令，查看 `dist/` 目录，此时只生成一个 HTML 文件 `main/index.html`。
 
-在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/home/index.html` 和 `main/info/index.html` 3 个 HTML 文件，分别对应 `/`、`/home`、`/info` 3 个约定式路由，可见**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `index page` 的文本内容，这正是 SSG 的效果。
+在项目根路径下执行 `pnpm run build` 命令，构建完成后，查看 `dist/` 目录，此时生成 `main/index.html`、`main/user/index.html` 和 `main/user/profile/index.html` 三个 HTML 文件，内容分别对应上述三条路由。
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-build.png)
+**约定式路由**中的每一条路由，都会生成一个单独的 HTML 文件。查看 `main/index.html`，可以发现包含 `Index Page` 的文本内容，这正是 SSG 的效果。
 
 执行 `pnpm run start` 启动项目后，访问页面，在浏览器我们工具的 Network 窗口，查看请求返回的文档，文档包含组件渲染后的完整页面内容。
 
@@ -64,45 +77,46 @@ export default defineConfig({
 
 **自控式路由**是通过组件代码自定义路由，需要应用运行起来才能获取准确的路由信息。因此，无法开箱即用的使用 SSG 功能。此时需要用户提前告知 Modern.js 框架，哪些路由需要开启 SSG 功能。
 
-例如有以下代码：
-
-```ts
-import { Switch, Route } from '@modern-js/runtime/router';
-
-export default () => (
-  <Switch>
-    <Route path="/" exact={true}>
-      <div>Home</div>
-    </Route>
-    <Route path="/foo" exact={true}>
-      <div>Foo</div>
-    </Route>
-  </Switch>
-);
-```
+例如有以下代码，包含多条路由，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`：
+
+```tsx title="src/App.tsx"
+import { useRuntimeContext } from '@modern-js/runtime';
+import { Routes, Route, BrowserRouter } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
 
-希望为 `/foo` 路由开启 SSG 功能，同样利用 `output.ssg` 配置。该参数允许配置页面信息，告知 Modern.js 开启指定路由的 SSG 功能。
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
+
+export default () => {
+  const { context } = useRuntimeContext();
+  return (
+    <Router location={context.request.pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about</div>} />
+      </Routes>
+    </Router>
+  );
+};
+```
 
-例如上述入口中，包含两条客户端路由，分别是 `/` 和 `/foo`，设置 `output.ssg` 为 `true` 时，默认只会渲染入口路由即 `/`。如果我们希望同时开启 `/foo` 的 SSG 功能，可以这样配置：
+如果我们希望同时开启 `/about` 的 SSG 功能，可以配置 `output.ssg`，告知 Modern.js 开启指定路由的 SSG 功能。
 
 ```typescript title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
-      routes: ['/', '/foo'],
+      routes: ['/', '/about'],
     },
   },
 })
 ```
 
-执行 `pnpm run build` 与 `pnpm run start` 后，访问 `http://localhost:8080/foo`，在 Preview 视图中可以看到页面已经完成渲染。
-
-查看构建产物文件，可以看到 `dist/` 目录中，在默认的 `main` 入口产物目录下，新增一个 `foo.html` 文件：
+执行 `pnpm run build` 与 `pnpm run start` 后，访问 `http://localhost:8080/about`，在 Preview 视图中可以看到页面已经完成渲染。
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ssg-foo.png)
+查看构建产物文件，可以看到 `dist/` 目录中，新增了一个 `main/about/index.html` 文件。
 
 :::info
-以上仅介绍了单入口的情况，与部分配置。更多相关内容可以查看 [API 文档](/docs/configure/app/output/ssg)。
+以上仅介绍了单入口的情况，更多相关内容可以查看 [API 文档](/docs/configure/app/output/ssg)。
 :::
 
 ### 获取数据
@@ -116,36 +130,33 @@ export default defineConfig({
 - 在开发阶段，不管 `useLoader` 是否配置 `{ static: true }`，函数都会在 SSR 时获取数据。
 :::
 
-修改上述 `App.ts` 的代码为：
+修改上述 `src/App.ts` 的代码为：
 
-```ts title="App.ts"
-import { Switch, Route } from '@modern-js/runtime/router';
-import { useLoader } from '@modern-js/runtime';
+```tsx title="App.ts"
+import { useRuntimeContext, useLoader } from '@modern-js/runtime';
+import { Routes, Route, BrowserRouter } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
+
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
 
 export default () => {
-  const { data } = useLoader(
-    async () => ({
-      message: Math.random(),
-    }),
-    {
-      static: true,
-      params: 'foo',
-    },
-  );
+  const { context } = useRuntimeContext();
+
+  const { data } = useLoader(async () => ({
+    message: Math.random(),
+  }), { static: true });
 
   return (
-    <Switch>
-      <Route path="/" exact={true}>
-        <div>Home</div>
-      </Route>
-      <Route path="/foo" exact={true}>
-        <div>Foo, {data?.message}</div>
-      </Route>
-    </Switch>
+    <Router location={context.request.pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about, {data?.message}</div>} />
+      </Routes>
+    </Router>
   );
 };
 ```
 
 执行 `pnpm run dev`，重复刷新页面，可以看到 `/foo` 页面的渲染结果不断发生变化，说明数据是在请求时获取的。
 
-重新执行 `pnpm run build` 后，执行 `pnpm run start`，重复刷新页面，发现页面渲染结果始终保持同样的内容，说明数据在请求时不会再次获取。
+重新执行 `pnpm run build` 后，执行 `pnpm run start`，重复刷新页面，发现页面渲染结果始终保持同样的内容，数据在请求时不会再次获取，说明页面在编译时已经完成渲染。