@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.99 → 3.8.1-ultramodern.2

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.
@@ -21,29 +17,20 @@ Before starting, we recommend reading React's official [Server Components docume
 
 ## Quick Start
 
-1. **Ensure React and React DOM are upgraded to version 19** (recommended version 19.2.4 or above)
-
-2. **Install the `react-server-dom-rspack@0.0.2` dependency**
-
-```bash
-npm install react-server-dom-rspack@0.0.2
-```
-
-:::warning Notes
-
-1. Currently, [Server Functions](https://react.dev/reference/rsc/server-functions) are not supported in SPA projects
-2. Currently, when building with Rspack, the output chunks and bundle size are not yet optimal. We will further optimize this in the near future
+:::warning UltraModern availability
+RSC is not shipped or supported in the current UltraModern company distribution. The framework keeps [`server.rsc`](/configure/app/server/rsc.md) disabled while the Rspack Flight runtime is completed upstream. Do not install `react-server-dom-rspack` or carry an application-level pnpm patch to enable it early.
 
+The remainder of this page is retained as reference material for future upstream adoption.
 :::
 
-3. Set [`server.rsc`](/configure/app/server/rsc) to `true`:
+Keep [`server.rsc`](/configure/app/server/rsc.md) set to `false`:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
   server: {
-    rsc: true,
+    rsc: false,
   },
 });
 ```
@@ -235,16 +222,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 +376,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 +500,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 +511,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

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

@@ -1,11 +1,6 @@
----
-sidebar_position: 3
----
-
 # Config Routes
 
-By default, Modern.js recommends using [Convention Routes](./routes.mdx) as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
-
+By default, Modern.js recommends using [Convention Routes](/guides/basic-features/routes/routes.md) as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
 
 ## When to Use Config Routes
 
@@ -34,15 +29,16 @@ export default defineRoutes(({ route, layout, page, $ }, fileRoutes) => {
 ### Function Signature Description
 
 `defineRoutes` accepts a callback function with two parameters:
+
 1. `routeFunctions`: An object containing `route`, `layout`, `page`, `$` functions
 2. `fileRoutes`: An array of route configurations generated by convention routes
 
 Basic signature of route functions:
+
 - First parameter: File path relative to `modern.routes.ts`
 - Second parameter: Route path (optional, must be a string)
 - Third parameter: Array of child routes (optional)
 
-
 ## Route Functions
 
 Modern.js provides four main route configuration functions:
@@ -50,6 +46,7 @@ Modern.js provides four main route configuration functions:
 :::tip Path Description
 
 The first parameter (path) of all route functions is a **relative path**, which will be concatenated with the parent path to generate the final route path:
+
 - **Root path**: `"/"` or `""` represents the root path of the current level
 - **Relative path**: Child route paths will be concatenated relative to the parent path
 - **Dynamic path**: Use `:param` syntax to represent dynamic parameters
@@ -93,6 +90,7 @@ export default defineRoutes(({ route }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Quick route configuration without explicitly specifying page or layout
 - Simplify the complexity of route configuration
 
@@ -113,6 +111,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Need to explicitly specify a component as a layout component
 - Provide common layout structure for multiple pages
 - Need to share navigation, sidebar and other UI components across multiple routes
@@ -133,6 +132,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Need to explicitly specify a component as a page component
 - Ensure the component does not contain `<Outlet>` child component rendering
 - Provide clearer semantic expression
@@ -154,6 +154,7 @@ export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
 ```
 
 **Use cases**:
+
 - Custom 404 pages
 - Handle all unmatched requests under specific paths
 
@@ -161,7 +162,6 @@ export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
 The `$` function has the same functionality as the `$.tsx` file in convention routes, used to catch unmatched route requests.
 :::
 
-
 ## Configuring Routes
 
 ### Basic Example
@@ -195,6 +195,7 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```
 
 The above configuration will generate:
+
 - `/login` → `auth/layout.tsx` + `login/page.tsx`
 - `/register` → `auth/layout.tsx` + `register/page.tsx`
 
@@ -210,7 +211,6 @@ export default defineRoutes(({ page }, fileRoutes) => {
 })
 ```
 
-
 ### Dynamic Routes
 
 Config routes support dynamic route parameters:
@@ -227,7 +227,6 @@ export default defineRoutes(({ page }, fileRoutes) => {
 })
 ```
 
-
 ## Automatic Route-Related File Discovery
 
 Config routes automatically discover component-related files without manual configuration. For any component file specified in `modern.routes.ts`, Modern.js will automatically find the following related files:
@@ -257,7 +256,7 @@ Modern.js will automatically find and load:
 
 :::tip
 
-For more detailed information about data fetching, please refer to the [Data Fetching](../data/data-fetch.mdx) documentation. For Loading component usage, please refer to [Convention Routes - Loading](./routes.mdx#loading-experimental).
+For more detailed information about data fetching, please refer to the [Data Fetching](/guides/basic-features/data/data-fetch.md) documentation. For Loading component usage, please refer to [Convention Routes - Loading](/guides/basic-features/routes/routes.md#loading-experimental).
 
 :::