@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.100 → 3.5.0-ultramodern.102

package/docs/guides/basic-features/{deploy.mdx → deploy.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 15
----
-
 # Deploy Application
 
 Currently, Modern.js offers two deployment way:
@@ -165,8 +161,7 @@ Assuming the directory structure of the Monorepo repository is as follows:
 
 You need to configure Base directory on the netlify platform as `packages/app`:
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public)
 Add the following script in `packages/app/package.json`, before executing the deployment command of the `app` repository, first execute the build of other repositories in the workspace:
 
 ```json
@@ -220,8 +215,7 @@ Add the following content to `vercel.json`:
 
 Commit your project to git, select Framework Preset as `Other` on the Vercel platform and deploy.
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-framework-preset.png)
 :::info
 You can refer to the [deployment project examples](https://github.com/web-infra-dev/modern.js/tree/main/examples/modern-js-deploy-csr).
 
@@ -265,8 +259,7 @@ Assuming the directory structure of the Monorepo repository is as follows:
 
 First, you need to configure the **Root Directory** as `packages/app` on the Vercel platform:
 
-<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
-
+![](https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png)
 Specify Node.js runtime as `20.x`:
 
 ```json title="package.json"
@@ -370,9 +363,26 @@ app.listen(3000);
 
 Now, you can add some code to include the logic for accessing static resources and HTML files in `server.js`. We need to use the `mime-types` package to get the MIME types of static resources, so let's install the dependency first:
 
-import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command="add mime-types" />
+```sh [npm]
+npm add mime-types
+```
+
+```sh [yarn]
+yarn add mime-types
+```
+
+```sh [pnpm]
+pnpm add mime-types
+```
+
+```sh [bun]
+bun add mime-types
+```
+
+```sh [deno]
+deno add npm:mime-types
+```
 
 ```ts title="server.js"
 const Koa = require('koa');
@@ -402,7 +412,7 @@ The above code is a basic example. Your application might have multiple entry po
 
 Please note that if your project uses Modern.js conventional routing or if you have set up client-side routing with React Router, you must access HTML files through the correct `baseURL`.
 
-In Modern.js, the default `baseURL` is `'/'`. You can configure it by modifying [`server.baseUrl`](/configure/app/server/base-url) in `modern.config.ts`.
+In Modern.js, the default `baseURL` is `'/'`. You can configure it by modifying [`server.baseUrl`](/configure/app/server/base-url.md) in `modern.config.ts`.
 
 :::danger
 For projects with client-side routing, you can never access HTML files through the `/index.html` path.

package/docs/guides/basic-features/{env-vars.mdx → env-vars.md}

@@ -1,34 +1,30 @@
----
-sidebar_position: 7
----
-
 # Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 
 ## Built-in Environment Variables
 
-### ASSET_PREFIX
+### ASSET\_PREFIX
 
 The current path prefix of the asset, which is a read-only environment variable.
 
-### NODE_ENV
+### NODE\_ENV
 
 The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
 
 - `production`: Default value when running `modern build` or `modern serve`.
 - `development`: Default value when running `modern dev`, also the default value in other cases.
 
-### MODERN_ENV
+### MODERN\_ENV
 
-Set the current execution environment manually. In addition to the values in the NODE_ENV, custom environment names are supported here, such as `staging`, `boe`, etc.
+Set the current execution environment manually. In addition to the values in the NODE\_ENV, custom environment names are supported here, such as `staging`, `boe`, etc.
 
 :::tip
-MODERN_ENV priority is higher than NODE_ENV.
+MODERN\_ENV priority is higher than NODE\_ENV.
 
 :::
 
-### MODERN_TARGET
+### MODERN\_TARGET
 
 When using `@modern-js/runtime`, Modern.js will automatically inject `MODERN_TARGET` to distinguish between SSR and CSR environments.
 
@@ -136,7 +132,7 @@ In custom HTML templates, you can also use such environment variables directly.
 
 ### Any Other Names
 
-If you need to use environment variables with any other names in your code, you can configure them in [`source.globalVars`](/configure/app/source/global-vars). For example:
+If you need to use environment variables with any other names in your code, you can configure them in [`source.globalVars`](/configure/app/source/global-vars.md). For example:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -178,4 +174,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need to use [`source.define`](/configure/app/source/define).
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need to use [`source.define`](/configure/app/source/define.md).

package/docs/guides/basic-features/{html.mdx → html.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 9
----
-
 # HTML Template
 
 Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
@@ -29,7 +25,7 @@ For example, consider the following directory structure:
 If not found, default template will be used.
 
 :::tip
-`Document.tsx` is compiled at build time by the Modern.js Document plugin using a dedicated Rspack child compiler targeting Node.js, and is rendered to a string with `renderToStaticMarkup` as the HTML template content, similar to [Static Site Generation](/guides/basic-features/render/ssg.html). The HTML template module is not part of the page bundler compilation, so React Hooks in the component will not run in the browser runtime, and non-JavaScript assets such as images cannot be resolved or imported.
+`Document.tsx` is compiled at build time by the Modern.js Document plugin using a dedicated Rspack child compiler targeting Node.js, and is rendered to a string with `renderToStaticMarkup` as the HTML template content, similar to [Static Site Generation](/guides/basic-features/render/ssg.md). The HTML template module is not part of the page bundler compilation, so React Hooks in the component will not run in the browser runtime, and non-JavaScript assets such as images cannot be resolved or imported.
 :::
 
 ### HTML Components
@@ -214,7 +210,7 @@ For example, to insert an external script in `body.html`:
 ```
 
 :::info
-The implementation of custom HTML fragments is to merge the fragments with the built-in template. Since the `<title>` already exists in the default template, the title tag in the custom HTML template will not take effect. Please use [html.title](/configure/app/html/title) to modify the page title.
+The implementation of custom HTML fragments is to merge the fragments with the built-in template. Since the `<title>` already exists in the default template, the title tag in the custom HTML template will not take effect. Please use [html.title](/configure/app/html/title.md) to modify the page title.
 
 :::
 
@@ -236,7 +232,7 @@ The default HTML template can be viewed in `node_modules/.modern-js/${entryName}
 
 ### Template Parameters
 
-The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters) configuration.
+The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters.md) configuration.
 
 ### Config By Entry
 

package/docs/guides/basic-features/{output-files.mdx → output-files.md}

@@ -1,7 +1,3 @@
----
-sidebar_position: 10
----
-
 # Output Files
 
 This chapter will introduces the directory structure of output files and how to control the output directory of different types of files.
@@ -44,11 +40,11 @@ In the filename, `[name]` represents the entry name corresponding to this file,
 
 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).
-- Modify the license file through [output.legalComments](/configure/app/output/legal-comments).
-- Remove Source Map file through [output.sourceMap](/configure/app/output/source-map).
-- Remove the folder corresponding to the HTML files through [html.outputStructure](/configure/app/html/output-structure).
+- Modify the filename through [output.filename](/configure/app/output/filename.md).
+- Modify the output path of through [output.distPath](/configure/app/output/dist-path.md).
+- Modify the license file through [output.legalComments](/configure/app/output/legal-comments.md).
+- Remove Source Map file through [output.sourceMap](/configure/app/output/source-map.md).
+- Remove the folder corresponding to the HTML files through [html.outputStructure](/configure/app/html/output-structure.md).
 
 ## Static Assets
 
@@ -70,7 +66,7 @@ dist
         └── qux.[hash].mp4
 ```
 
-You can use the [output.distPath](/configure/app/output/dist-path) config to uniformly input these static assets into a directory, for example, output to the `assets` directory:
+You can use the [output.distPath](/configure/app/output/dist-path.md) config to uniformly input these static assets into a directory, for example, output to the `assets` directory:
 
 ```ts
 export default {

package/docs/guides/basic-features/render/{before-render.mdx → before-render.md}

@@ -1,6 +1,6 @@
 # Render Preprocessing
 
-In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using **[Runtime Plugins](/plugin/introduction.html#runtime-plugins)** to implement this type of logic.
+In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using **[Runtime Plugins](/plugin/introduction.md#runtime-plugins)** to implement this type of logic.
 
 ## Defining a Runtime Plugin
 

package/docs/guides/basic-features/render/overview.md

@@ -0,0 +1,47 @@
+# Rendering Mode Overview
+
+Modern.js supports multiple rendering modes, and different rendering modes are suitable for different scenarios. Choosing the right rendering mode can significantly improve application performance and user experience.
+
+## Rendering Mode Quick Reference
+
+| Rendering Mode    | Characteristics                                                                                                                  | Use Cases                                                                          |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| **CSR**           | Executes JavaScript in the browser to render pages                                                                               | Applications with strong interactivity and low SEO requirements                    |
+| **SSR**           | Pre-renders complete HTML pages on the server                                                                                    | Websites with high requirements for first-screen performance and SEO               |
+| **Streaming SSR** | Renders and returns progressively, displaying initial UI faster                                                                  | Applications requiring faster first-screen perception speed (**Default SSR mode**) |
+| **RSC**           | Components render on the server, reducing client JS size; high cohesion between data and component logic, reducing state passing | Projects pursuing optimal performance and needing to reduce client-side code       |
+| **SSG**           | Generates static pages at build time, can be cached by CDN                                                                       | Websites with relatively static content, such as blogs and documentation sites     |
+
+## Performance Comparison
+
+| Rendering Technology    | Core Advantages                                        | Main Bottlenecks                                 |
+| ----------------------- | ------------------------------------------------------ | ------------------------------------------------ |
+| **SSR**                 | Server-side pre-rendering, beneficial for SEO          | Must wait for all data to load before responding |
+| **Streaming SSR**       | Renders and returns progressively, faster first screen | JS bundle size is still large                    |
+| **Streaming SSR + RSC** | Reduces client JS size                                 | -                                                |
+
+## How to Choose
+
+### Quick Decision Guide
+
+- **Static Content + SEO Required** → **SSG**
+- **SEO Required + First Screen Performance** → **Streaming SSR** (default)
+- **Pursuing Optimal Performance** → **Streaming SSR + RSC**
+- **CSR Project Gradual Optimization** → **CSR + RSC**
+- **Highly Interactive + No SEO Needed** → **CSR**
+
+### Combining Modes
+
+Modern.js supports combining multiple rendering modes:
+
+- **Streaming SSR + RSC**: Streaming rendering + reduced client-side code
+- **SSG + SSR**: Some pages static, some pages dynamic
+- **CSR + RSC**: Client-side rendering + partial Server Components
+
+## Related Documentation
+
+- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md)
+- [Streaming Server-Side Rendering (Streaming SSR)](/guides/basic-features/render/streaming-ssr.md)
+- [React Server Components (RSC)](/guides/basic-features/render/rsc.md)
+- [Static Site Generation (SSG)](/guides/basic-features/render/ssg.md)
+- [Rendering Cache](/guides/basic-features/render/ssr-cache.md)

package/docs/guides/basic-features/render/{rsc.mdx → rsc.md}

@@ -1,7 +1,3 @@
----
-title: React Server Components (RSC)
----
-
 # React Server Components (RSC)
 
 React Server Components (RSC) is a new component type that allows components to be rendered in a server environment, bringing better performance and developer experience to modern web applications.
@@ -36,7 +32,7 @@ npm install react-server-dom-rspack@0.0.2
 
 :::
 
-3. Set [`server.rsc`](/configure/app/server/rsc) to `true`:
+3. Set [`server.rsc`](/configure/app/server/rsc.md) to `true`:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -235,16 +231,16 @@ For example, if `layout.tsx` is a Client Component (requiring client-side intera
 
 ## Server Component and Data Loader
 
-In RSC projects, you have two ways to fetch data: directly in Server Components, or using [Data Loader](/guides/basic-features/data/data-fetch). Both approaches have their advantages, and you can choose flexibly based on your scenario.
+In RSC projects, you have two ways to fetch data: directly in Server Components, or using [Data Loader](/guides/basic-features/data/data-fetch.md). Both approaches have their advantages, and you can choose flexibly based on your scenario.
 
 ### Comparison of Two Data Fetching Approaches
 
-| Feature | Fetching in Server Component | Fetching in Data Loader |
-| --- | --- | --- |
-| Avoid Request Waterfall | Requires manual optimization | ✅ Automatically parallel execution |
-| Component Cohesion | ✅ Data and UI in the same place | Data logic separated into separate files |
-| Maintainability | ✅ Easier to understand and maintain | Requires maintaining additional files |
-| Type Safety | ✅ Natural type inference | Requires manual type management |
+| Feature                 | Fetching in Server Component        | Fetching in Data Loader                  |
+| ----------------------- | ----------------------------------- | ---------------------------------------- |
+| Avoid Request Waterfall | Requires manual optimization        | ✅ Automatically parallel execution       |
+| Component Cohesion      | ✅ Data and UI in the same place     | Data logic separated into separate files |
+| Maintainability         | ✅ Easier to understand and maintain | Requires maintaining additional files    |
+| Type Safety             | ✅ Natural type inference            | Requires manual type management          |
 
 **Generally, we recommend fetching data in Server Components**, because waterfall requests have less performance impact on the server, and this approach makes components more cohesive, with data fetching logic and UI rendering in the same place, making it easier to understand and maintain. However, if your page has multiple independent data sources and you want to completely avoid request waterfall issues, Data Loader's parallel execution feature will be more advantageous.
 
@@ -389,7 +385,7 @@ function NonCriticalUI({ p }: { p: Promise<string> }) {
 
 1. Whether it's an SSR or RSC project, it's recommended to use the `cache` function provided by Modern.js for data fetching logic executed on the server by default. This ensures that for each server-side render, no matter how many times the function is called, it will only execute once.
 
-> This is also the recommended usage by React.js, which provides the [cache](https://react.dev/reference/react/cache) function. Modern.js's [cache](/guides/basic-features/data/data-cache.html) can be considered a superset of it.
+> This is also the recommended usage by React.js, which provides the [cache](https://react.dev/reference/react/cache) function. Modern.js's [cache](/guides/basic-features/data/data-cache.md) can be considered a superset of it.
 
 ```typescript
 import { cache } from '@modern-js/runtime/cache';
@@ -513,10 +509,6 @@ export default function ProfilePage() {
 
 When using React 19, you no longer need to use Helmet. We recommend directly using the [components](https://react.dev/reference/react-dom/components) provided by React.
 
-import DeployTip from '@site-docs/components/rsc-deploy-tip';
-
-
-<DeployTip />
 
 ## Common Issues
 
@@ -528,6 +520,6 @@ The project's bundle has introduced a non-19 React version, commonly seen in mon
 
 - [React Server Components Official Documentation](https://react.dev/reference/rsc/server-components)
 - [React Server Functions Documentation](https://react.dev/reference/rsc/server-functions)
-- [Data Cache](/guides/basic-features/data/data-cache)
-- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr)
-- [Streaming SSR](/guides/basic-features/render/streaming-ssr)
+- [Data Cache](/guides/basic-features/data/data-cache.md)
+- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md)
+- [Streaming SSR](/guides/basic-features/render/streaming-ssr.md)

package/docs/guides/basic-features/render/{ssg.mdx → ssg.md}

@@ -1,15 +1,58 @@
----
----
-
 # Static Site Generation
 
 SSG (Static Site Generation) is a technical solution that generates complete static web pages at build time based on data and templates. This means that in a production environment, pages are pre-rendered with content and can be cached by a CDN. SSG can offer better performance and higher security for pages that do not require dynamic data.
 
 ## Enabling SSG
 
-import EnableSSG from '@site-docs-en/components/enable-ssg';
+To enable SSG functionality in a Modern.js project, follow these steps to modify the code:
+
+1. Install SSG plugin dependencies
+
+If the SSG plugin is not yet installed in your project, install it first:
+
+```bash
+pnpm add @modern-js/plugin-ssg
+```
+
+:::tip Version Consistency
+
+Make sure the version of `@modern-js/plugin-ssg` matches the version of `@modern-js/app-tools` in your project. All Modern.js official packages are released with a uniform version number, and version mismatches may cause compatibility issues.
+
+Check the version of `@modern-js/app-tools` first, then install the same version of `@modern-js/plugin-ssg`:
+
+```bash
+# Check the current version of @modern-js/app-tools
+pnpm list @modern-js/app-tools
+
+# Install the same version of @modern-js/plugin-ssg
+pnpm add @modern-js/plugin-ssg@<version>
+```
+
+:::
+
+2. Configure modern.config.ts
 
-<EnableSSG />
+Import and add the SSG plugin in the `modern.config.ts` file, and configure `output.ssg`:
+
+```ts title="modern.config.ts"
+import { defineConfig, appTools } from '@modern-js/app-tools';
+import { ssgPlugin } from '@modern-js/plugin-ssg';
+
+export default defineConfig({
+  plugins: [appTools(), ssgPlugin()],
+  output: {
+    ssg: true,
+  },
+});
+```
+
+:::info Scope of Application
+
+- Use `output.ssg` for single-entry apps.
+- Use `output.ssgByEntries` for multi-entry apps.
+- When only `output.ssg: true` is set and `output.ssgByEntries` is not configured, all routes under all entries will be treated as SSG routes.
+
+:::
 
 ## Development Debugging
 
@@ -50,7 +93,7 @@ The above file directory will generate the following three routes:
 - `/user/profile`
 
 :::tip
-If you are not familiar with the rules of conventional routing, refer to the [Routing Solution](/guides/basic-features/routes/routes) first.
+If you are not familiar with the rules of conventional routing, refer to the [Routing Solution](/guides/basic-features/routes/routes.md) first.
 
 :::
 
@@ -76,9 +119,27 @@ After running `pnpm run serve` to start the project, inspect the returned docume
 
 For example, consider the following code with multiple routes. By setting `output.ssg` to `true`, it will only render the entry route (`/`) by default.
 
-import SelfRouteExample from '@site-docs/components/self-route-example';
+```tsx title="src/App.tsx"
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
+import { use } from 'react';
+import { RuntimeContext } from '@modern-js/runtime';
 
-<SelfRouteExample />
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
+
+export default () => {
+  const context = use(RuntimeContext);
+  const pathname = context?.request?.pathname;
+  return (
+    <Router location={pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about</div>} />
+      </Routes>
+    </Router>
+  );
+};
+```
 
 If you want to enable SSG for `/about` as well, you can configure `output.ssg`:
 
@@ -97,7 +158,7 @@ After running `pnpm run build`, you will see a new `main/about/index.html` file
 After running `pnpm run serve` to start the project, inspect the returned document in the Network tab of the browser's development tools. The document includes the fully rendered content from the component.
 
 :::info
-The above example introduces single-entry scenarios. For more information, refer to the [API Documentation](/configure/app/output/ssg).
+The above example introduces single-entry scenarios. For more information, refer to the [API Documentation](/configure/app/output/ssg.md).
 :::
 
 ## Adding Dynamic Routes
@@ -132,7 +193,7 @@ export default defineConfig({
 ```
 
 :::info
-See API details: [output.ssgByEntries](/configure/app/output/ssgByEntries)
+See API details: [output.ssgByEntries](/configure/app/output/ssgByEntries.md)
 :::
 
 ## Configuring Request Headers for Rendering

package/docs/guides/basic-features/render/{ssr-cache.mdx → ssr-cache.md}

@@ -193,9 +193,9 @@ When rendering cache is enabled, Modern.js identifies the cache status of the cu
 
 The `x-render-cache` header can have the following values:
 
-| Name    | Description                                      |
-| ------- | ------------------------------------------------ |
-| hit     | Cache hit, returned cache content                |
+| Name    | Description                                                                         |
+| ------- | ----------------------------------------------------------------------------------- |
+| hit     | Cache hit, returned cache content                                                   |
 | stale   | Cache hit, but data is stale, returned cache content and re-rendered asynchronously |
-| expired | Cache expired, re-rendered and returned new content |
-| miss    | Cache missed                                     |
+| expired | Cache expired, re-rendered and returned new content                                 |
+| miss    | Cache missed                                                                        |

package/docs/guides/basic-features/render/{ssr.mdx → ssr.md}

@@ -11,7 +11,7 @@ Server-Side Rendering (SSR) generates complete HTML pages on the server and send
 :::info Default Rendering Mode
 Modern.js SSR **uses streaming rendering (Streaming SSR) by default**, allowing pages to be returned progressively as they render, so users can see initial content faster.
 
-For detailed usage, refer to the [Streaming SSR](/guides/basic-features/render/streaming-ssr) documentation.
+For detailed usage, refer to the [Streaming SSR](/guides/basic-features/render/streaming-ssr.md) documentation.
 
 To switch to traditional SSR mode (waiting for all data to load before returning at once), you can configure:
 
@@ -31,7 +31,7 @@ export default defineConfig({
 
 ## Enabling SSR
 
-Enabling SSR in Modern.js is straightforward. Simply set [`server.ssr`](/configure/app/server/ssr) to `true`:
+Enabling SSR in Modern.js is straightforward. Simply set [`server.ssr`](/configure/app/server/ssr.md) to `true`:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -48,7 +48,7 @@ export default defineConfig({
 Modern.js provides Data Loader, enabling developers to fetch data isomorphically under both SSR and CSR. Each route module (such as `layout.tsx` and `page.tsx`) can define its own Data Loader:
 
 :::tip Learn More
-The following approach will not have streaming rendering effects. To achieve streaming rendering effects, refer to [Streaming SSR](/guides/basic-features/render/streaming-ssr).
+The following approach will not have streaming rendering effects. To achieve streaming rendering effects, refer to [Streaming SSR](/guides/basic-features/render/streaming-ssr.md).
 
 :::
 
@@ -105,11 +105,10 @@ In Modern.js, if an application encounters an error during SSR, it automatically
 
 By default, if the `loader` function for a route throws an error, the framework renders the `<ErrorBoundary>` component directly on the server, displaying the error message. This is the default behavior of most frameworks.
 
-Modern.js also supports customizing the fallback strategy through the `loaderFailureMode` field in the [`server.ssr`](/configure/app/server/ssr) configuration. Setting this field to `clientRender` immediately falls back to CSR mode and re-fetches the data.
+Modern.js also supports customizing the fallback strategy through the `loaderFailureMode` field in the [`server.ssr`](/configure/app/server/ssr.md) configuration. Setting this field to `clientRender` immediately falls back to CSR mode and re-fetches the data.
 
 If a Client Loader is defined for the route, it will be used to re-fetch the data. If re-rendering fails again, the `<ErrorBoundary>` component will be displayed.
 
-{/* Todo Add a diagram */}
 
 ### Component Rendering Error
 
@@ -141,17 +140,16 @@ In this case, Modern.js will fallback the page to CSR and use the existing data
 The behavior of component rendering errors is unaffected by `loaderFailureMode` and will not execute the Client Loader on the browser side.
 :::
 
-{/* Todo Add a diagram */}
 
 ## Logging and Monitoring
 
-import Monitor from '@site-docs-en/components/ssr-monitor';
-
-<Monitor />
+:::tip
+SSR monitoring has been integrated into the Monitors module, see [Monitors](/guides/advanced-features/server-monitor/monitors.md) for details.
+:::
 
 ## Page Caching
 
-Modern.js has built-in caching capabilities. Refer to [Rendering Cache](/guides/basic-features/render/ssr-cache) for details.
+Modern.js has built-in caching capabilities. Refer to [Rendering Cache](/guides/basic-features/render/ssr-cache.md) for details.
 
 ## Differences in Runtime Environment
 
@@ -202,7 +200,7 @@ if (true) {
 ```
 
 :::note
-For more information, see [Environment Variables](/guides/basic-features/env-vars).
+For more information, see [Environment Variables](/guides/basic-features/env-vars.md).
 :::
 
 ### Side Effects in Dependencies
@@ -291,7 +289,7 @@ Wrap elements that should not be server-side rendered with the `NoSSR` component
 
 After modifying the code, refresh the page and notice that the previous warning has disappeared. Open the browser's developer tools and check the Network tab. The returned HTML document will not contain the content wrapped by the `NoSSR` component.
 
-In practical scenarios, some UI displays might be affected by the user's device, such as [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) information. Modern.js also provides APIs like `use(RuntimeContext)`, allowing components to access complete request information and maintaining SSR and CSR rendering consistency. For detailed usage, please refer to [Runtime Context](/guides/basic-features/render/before-render#runtime-context).
+In practical scenarios, some UI displays might be affected by the user's device, such as [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) information. Modern.js also provides APIs like `use(RuntimeContext)`, allowing components to access complete request information and maintaining SSR and CSR rendering consistency. For detailed usage, please refer to [Runtime Context](/guides/basic-features/render/before-render.md#runtime-context).
 
 ### Attention to Memory Leaks
 

package/docs/guides/basic-features/render/{streaming-ssr.mdx → streaming-ssr.md}

@@ -7,7 +7,7 @@ In traditional SSR rendering, the page is rendered all at once, requiring all da
 :::info Default Mode
 **Streaming SSR is the default rendering mode for Modern.js SSR**. When you enable SSR, streaming rendering is available without additional configuration.
 
-If you need to switch to traditional SSR mode (waiting for all data to load before returning at once), you can configure `server.ssr.mode` to `'string'`. For detailed information, refer to the [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr) documentation.
+If you need to switch to traditional SSR mode (waiting for all data to load before returning at once), you can configure `server.ssr.mode` to `'string'`. For detailed information, refer to the [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md) documentation.
 :::
 
 Compared to traditional SSR rendering:
@@ -254,14 +254,11 @@ export const middleware = async (ctx, next) => {
 };
 ```
 
-import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performance';
-
-<StreamSSRPerformance />
 
 ## Related Documentation
 
-- [Rendering Mode Overview](/guides/basic-features/render/overview)
-- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr)
-- [Rendering Cache](/guides/basic-features/render/ssr-cache)
-- [React Server Components (RSC)](/guides/basic-features/render/rsc) - Use with Streaming SSR
+- [Rendering Mode Overview](/guides/basic-features/render/overview.md)
+- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md)
+- [Rendering Cache](/guides/basic-features/render/ssr-cache.md)
+- [React Server Components (RSC)](/guides/basic-features/render/rsc.md) - Use with Streaming SSR
 - [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37) - React 18 Architecture Overview