@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

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

@@ -2,86 +2,12 @@
 
 [Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
+## Using Tailwind CSS in Modern.js
 
-1. Run `pnpm run new` in the root directory of your project and make the following selections:
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you only need to configure it according to the Rsbuild steps. Rsbuild supports Tailwind CSS versions v3 and v4:
 
-```text
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable Tailwind CSS
-```
-
-After successful initialization, you will see that the `package.json` has added dependencies for `tailwindcss` and `@modern-js/plugin-tailwindcss`.
-
-2. Register the Tailwind plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [..., tailwindcssPlugin()],
-});
-```
-
-3. Create a `index.css` file and add the following code:
-
-```css title="index.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-:::info
-Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
-:::
-
-4. Import the `index.css` file, for example, add the following code in the root component `src/App.jsx`:
-
-```js
-import './index.css';
-```
-
-5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
-
-```tsx
-const Hello = () => (
-  <div className="h-12 w-48">
-    <p className="text-xl font-medium text-black">hello world</p>
-  </div>
-);
-```
-
-## Configuring Tailwind CSS
-
-In Modern.js, you have two ways to configure Tailwind CSS:
-
-1. Using the `tailwind.config.{ts,js}` file, which follows the official usage of Tailwind CSS. Please refer to ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) for more details.
-
-```ts title="tailwind.config.ts"
-import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-} as Config;
-```
-
-:::tip
-Please upgrade Modern.js to version >= MAJOR_VERSION.33.0 to support automatic reading of `tailwind.config.{ts,js}` files.
-:::
-
-2. Using the [tools.tailwindcss](/configure/app/tools/tailwindcss.html) configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the `tailwind.config.{ts,js}` file for configuration.
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: {
-      content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    },
-  },
-};
-```
-
-If you are using both the `tailwind.config.{ts,js}` file and `tools.tailwindcss` option, the configuration defined in `tools.tailwindcss` will take precedence and override the content defined in `tailwind.config.{ts,js}`.
+- [Tailwind CSS v3](https://rsbuild.rs/guide/styling/tailwindcss-v3#tailwind-css-v3)
+- [Tailwind CSS v4](https://rsbuild.rs/guide/styling/tailwindcss)
 
 ## Tailwind CSS Autocomplete
 
@@ -92,20 +18,10 @@ You can follow the steps below to enable the autocomplete feature:
 1. Install the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) extension in VS Code.
 2. If the root directory of your project does not have a `tailwind.config.{ts,js}` file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.
 
-## Tailwind CSS Version
-
-Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
-
-If your project is still using Tailwind CSS v2, we recommend that you upgrade to v3 to support JIT and other capabilities. For the differences between Tailwind CSS v2 and v3 versions, please refer to the following articles:
-
-- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
-- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
-
 ## Browser Compatibility
 
-Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:
+Tailwind CSS v3 does not support the IE 11 browser, please refer to:
 
 - [Tailwind CSS v3 - Browser Support](https://tailwindcss.com/docs/browser-support).
-- [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.

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

@@ -123,7 +123,11 @@ const getDashboardStats = cache(
 
 The `revalidate` parameter sets a time window for revalidating the cache after it expires. It can be used together with the `maxAge` parameter, similar to HTTP Cache-Control's stale-while-revalidate mode.
 
-In the following example, within the 2-minute period before the cache expires, calls to `getDashboardStats` will return cached data. If the cache has expired (between 2 and 3 minutes), requests will first return the old data, then refresh the data in the background and update the cache.
+In the following example, the cache behavior is divided into three phases based on time:
+
+1. **0 to 2 minutes (within `maxAge`)**: Cache is fresh, returns cached data directly without re-fetching
+2. **2 to 3 minutes (between `maxAge` and `maxAge + revalidate`)**: Cache has expired but is within the revalidation window, returns stale data immediately while re-fetching and updating the cache in the background
+3. **Beyond 3 minutes (exceeding `maxAge + revalidate`)**: Cache is completely expired, re-executes the function to fetch new data
 
 ```ts
 import { cache, CacheTime } from '@modern-js/runtime/cache';

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

@@ -12,7 +12,7 @@ Modern.js provides out-of-the-box data fetching capabilities. Developers can use
 In Modern.js v1 projects, data was fetched using `useLoader`. This is no longer the recommended approach; we suggest migrating to Data Loader.
 :::
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export a `loader` function, known as Data Loader, which executes before the corresponding route component renders to provide data for the component. Here is an example:
 
 ```bash
 .
@@ -74,7 +74,7 @@ In an SSR environment, the `loader` function only executes on the server side fo
 In future versions, Modern.js may support running `loader` functions on the server side even in CSR environments to improve performance and security. Therefore, it is advisable to keep the `loader` function pure, handling only data fetching scenarios.
 :::
 
-When navigating on the client side, based on [conventional routing](/guides/basic-features/routes), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
+When navigating on the client side, based on [conventional routing](/guides/basic-features/routes/routes), Modern.js supports parallel execution (requests) of all `loader` functions. For example, when visiting `/user/profile`, the `loader` functions under `/user` and `/user/profile` will execute in parallel, solving the request-render waterfall issue and significantly improving page performance.
 
 ## `loader` Function
 
@@ -82,7 +82,7 @@ The `loader` function has two parameters used for getting route parameters and r
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes#dynamic-routes), which passed as parameters to the `loader` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which passed as parameters to the `loader` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { LoaderFunctionArgs } from '@modern-js/runtime/router';
@@ -167,7 +167,7 @@ export async function loader() {
 
 ### Basic Usage
 
-In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes#error-handling) component:
+In a `loader` function, you can handle errors by using `throw error` or `throw response`. When an error is thrown in the `loader` function, Modern.js will stop executing the remaining code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes/routes#error-handling) component:
 
 ```tsx
 // routes/user/profile/page.data.ts

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

@@ -13,7 +13,7 @@ In Modern.js, you can use Data Action to address these scenarios.
 
 ## What is Data Action
 
-Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
+Modern.js recommends managing routes using [conventional routing](/guides/basic-features/routes/routes). Each route component (`layout.ts`, `page.ts`, or `$.tsx`) can have a same-named `.data` file. These files can export an `action` function, known as Data Action, which developers can call at an appropriate time:
 
 ```bash
 .
@@ -81,7 +81,7 @@ Similar to the `loader` function, the `action` function takes two parameters: `p
 
 ### params
 
-`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes#dynamic-routes), which are passed as parameters to the `action` function:
+`params` is the dynamic route segments when the route is a [dynamic route](/guides/basic-features/routes/routes#dynamic-routes), which are passed as parameters to the `action` function:
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router;

package/docs/en/guides/basic-features/debug/mock.mdx

@@ -70,7 +70,7 @@ module.exports = {
 
 ```ts
 export default {
-  'api/getInfo': (req, res) => {
+  '/api/getInfo': (req, res) => {
     setTimeout(() => {
       res.end('delay 2000ms');
     }, 2000);
@@ -83,6 +83,9 @@ export default {
 Under the `config/mock/index.ts`, you can also export the `config` to control the Mock service.
 
 ```ts
+import type { IncomingMessage } from 'node:http';
+import type { ServerResponse } from 'node:http';
+
 type MockConfig = {
   enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
 };

package/docs/en/guides/basic-features/debug/proxy.mdx

@@ -4,8 +4,6 @@ sidebar_position: 6
 
 # Network Proxy
 
-## Local Proxy
-
 Modern.js provides a way to configure the development proxy in [`tools.devServer`](/configure/app/tools/dev-server). For example, to proxy the local interface to an online address:
 
 ```ts title="modern.config.ts"
@@ -30,9 +28,3 @@ When access `http://localhost:8080/go/api`, the response content will be returne
 :::info
 For more detail, see [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
 :::
-
-## Global Proxy
-
-import GlobalProxy from "@site-docs-en/components/global-proxy"
-
-<GlobalProxy />

package/docs/en/guides/basic-features/debug/rsdoctor.mdx

@@ -26,14 +26,14 @@ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 export default {
   // ...
   tools: {
-    rspack(config, { appendPlugins }) {
+    bundlerChain(chain) {
       // Only register the plugin when RSDOCTOR is true, as the plugin will increase build time.
       if (process.env.RSDOCTOR) {
-        appendPlugins(
-          new RsdoctorRspackPlugin({
+        chain.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
+          {
             // Plugin options
-          }),
-        );
+          },
+        ]);
       }
     },
   },

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

@@ -5,6 +5,7 @@ sidebar_position: 15
 # Deploy Application
 
 Currently, Modern.js offers two deployment way:
+
 - You can host your application in a container that includes a Node.js environment on your own, which provides flexibility for the deployment of the application.
 - You can also deploy your application through a platform. Currently, Modern.js officially supports deployment on [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), and [Github pages](https://pages.github.com/).
 
@@ -12,7 +13,6 @@ Currently, Modern.js offers two deployment way:
 Currently, Modern.js only supports running in a Node.js environment. Support for more runtime environments will be provided in the future.
 :::
 
-
 ## Build Deployment Products
 
 Running the `modern deploy` command will automatically produce deployment products. This process includes optimizing Bundler build products and their dependencies, detecting the current deployment platform, and automatically generating deployment products that can run on that platform.
@@ -50,11 +50,12 @@ At this point, you can run the entire server by `node .output/index`, and the st
 
 :::info
 By default, when running Modern.js Server, it listens on port 8080. If you want to change the listening port, you can specify the `PORT` environment variable:
+
 ```
 PORT=3000 node .output/index
 ```
-:::
 
+:::
 
 ### Monorepo
 
@@ -66,7 +67,7 @@ Assume that the name in the `package.json` of the current project is `app`. Taki
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
 ```
@@ -77,7 +78,7 @@ If you use Rush as your Monorepo management tool, you can add the following comm
 {
   "scripts": {
     "build:packages": "rush rebuild --to-except app",
-    "deploy": "rushx build:packages && modern deploy",
+    "deploy": "rushx build:packages && modern deploy"
   }
 }
 ```
@@ -134,12 +135,12 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
 ```
 
 :::info
+
 1. Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
 2. You can refer to the [deployment project example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr).
 
 :::
 
-
 ### Monorepo
 
 :::info
@@ -172,10 +173,9 @@ Add the following script in `packages/app/package.json`, before executing the de
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
-
 ```
 
 Configure the build command in `netlify.toml`:
@@ -200,6 +200,7 @@ Vercel is a deployment platform for modern web applications that provides a rich
 ### Pure Front-end Project
 
 Add the `vercel.json` file to the root directory of the current project:
+
 ```bash
 ./
 ├── src
@@ -209,6 +210,7 @@ Add the `vercel.json` file to the root directory of the current project:
 ```
 
 Add the following content to `vercel.json`:
+
 ```json title="vercel.json"
 {
   "buildCommand": "modern deploy",
@@ -265,13 +267,13 @@ First, you need to configure the **Root Directory** as `packages/app` on the Ver
 
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
 
-Specify Node.js runtime as `18.x`:
+Specify Node.js runtime as `20.x`:
 
 ```json title="package.json"
 "engines": {
-  "node": "18.x"
+  "node": "20.x"
 }
-````
+```
 
 Add the following script to `packages/app/package.json` to run `build` command of the other repositories in the workspace before run the `deploy` command for the `app` repository:
 
@@ -279,7 +281,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
 ```
@@ -305,11 +307,11 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   //...
   server: {
-    baseUrl: "/<repository-name>"
+    baseUrl: '/<repository-name>',
   },
   output: {
-    assetPrefix: "/<repository-name>",
-  }
+    assetPrefix: '/<repository-name>',
+  },
 });
 ```
 
@@ -320,6 +322,7 @@ For branch deployment, follow these steps:
 1. In the GitHub repository, navigate to Settings > Pages > Source > Deploy from a branch
 2. Install the `gh-pages` as devDependency
 3. Add the following script to `package.json`
+
 ```
 "scripts": {
   //...
@@ -330,13 +333,13 @@ For branch deployment, follow these steps:
 4. Run `npm run deploy:gh-pages`
 
 :::info
+
 1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
 2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
-:::
+   :::
 
 For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
 
-
 ## Using Self-Built Node.js Server
 
 Typically, we recommend using the built-in Node.js server of Modern.js to deploy applications. It supports hosting both pure frontend and full-stack projects, ensuring consistent performance in both development and production environments.
@@ -381,10 +384,14 @@ const app = new Koa();
 app.use(async (ctx, next) => {
   if (ctx.path.startsWith('/static')) {
     ctx.type = mime.lookup(ctx.path);
-    ctx.body = fs.createReadStream(path.resolve(__dirname, `.output${ctx.path}`));
+    ctx.body = fs.createReadStream(
+      path.resolve(__dirname, `.output${ctx.path}`),
+    );
   } else if (ctx.path === '/') {
     ctx.type = 'html';
-    ctx.body = fs.createReadStream(path.resolve(__dirname, '.output/html/main/index.html'));
+    ctx.body = fs.createReadStream(
+      path.resolve(__dirname, '.output/html/main/index.html'),
+    );
   }
 });
 app.listen(3000);

package/docs/en/guides/basic-features/env-vars.mdx

@@ -143,7 +143,7 @@ export default defineConfig({
   source: {
     globalVars: {
       'process.env.VERSION': process.env.VERSION,
-    }.
+    },
   },
 });
 ```

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

@@ -40,7 +40,7 @@ Modern.js provides some components for rendering pages to help developers genera
 import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 ```
 
-- `Html`: provide the ability of native HTML Element and and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled as needed.
+- `Html`: provide the ability of native HTML Element and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled as needed.
 
 - `Body`: provide the ability of native Body Element and needs to contain the `<Root>` component internally. It also supports other elements as child elements at the same time, such as adding footers.
 

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

@@ -47,8 +47,8 @@ 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.disableSourceMap](/configure/app/output/disable-source-map).
-- Remove the folder corresponding to the HTML files through [html.disableHtmlFolder](/configure/app/html/disable-html-folder).
+- 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).
 
 ## Static Assets
 
@@ -112,7 +112,7 @@ export default {
     },
   },
   html: {
-    disableHtmlFolder: true,
+    outputStructure: 'flat',
   }
 };
 ```

package/docs/en/guides/basic-features/render/_meta.json

@@ -1 +1 @@
-["ssr", "streaming-ssr", "ssr-cache", "ssg", "before-render"]
+["overview", "ssr", "streaming-ssr", "ssr-cache", "ssg", "rsc", "before-render"]

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

@@ -5,12 +5,12 @@ In certain scenarios, applications need to perform preprocessing operations befo
 ## Defining a Runtime Plugin
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const myRuntimePlugin = (): RuntimePluginFuture => ({
+const myRuntimePlugin = (): RuntimePlugin => ({
   name: 'my-runtime-plugin',
-  setup: (api) => {
-    api.onBeforeRender((context) => {
+  setup: api => {
+    api.onBeforeRender(context => {
       // Logic to execute before rendering
       console.log('Before rendering:', context);
     });
@@ -35,23 +35,24 @@ export default defineRuntimeConfig({
 
 ## Use Case -- Global Data Injection
 
-Through the `context` parameter of the `onBeforeRender` hook, you can inject global data into your application. Application components can access this data using the `useRuntimeContext` Hook.
+Through the `context` parameter of the `onBeforeRender` hook, you can inject global data into your application. Application components can access this data using the `use(RuntimeContext)` Hook.
 
 :::info
 
 This feature is particularly useful in the following scenarios:
-* Applications requiring page-level preliminary data
-* Custom data injection workflows
-* Framework migration scenarios (e.g., migrating from Next.js)
+
+- Applications requiring page-level preliminary data
+- Custom data injection workflows
+- Framework migration scenarios (e.g., migrating from Next.js)
 
 :::
 
 **Defining a Data Injection Plugin**
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const dataInjectionPlugin = (): RuntimePluginFuture => ({
+const dataInjectionPlugin = (): RuntimePlugin => ({
   name: 'data-injection-plugin',
   setup: api => {
     api.onBeforeRender(context => {
@@ -67,10 +68,11 @@ export default dataInjectionPlugin;
 **Using Injected Data in Components**
 
 ```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
+import { use } from 'react';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export default function MyComponent() {
-  const context = useRuntimeContext();
+  const context = use(RuntimeContext);
   const { message } = context;
 
   return <div>{message}</div>;
@@ -82,9 +84,9 @@ export default function MyComponent() {
 In SSR scenarios, the browser can access data injected via `onBeforeRender` during server-side rendering. Developers can decide whether to re-fetch data on the browser side to override server data based on their requirements.
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const dataInjectionPlugin = (): RuntimePluginFuture => ({
+const dataInjectionPlugin = (): RuntimePlugin => ({
   name: 'data-injection-plugin',
   setup: api => {
     api.onBeforeRender(context => {
@@ -104,12 +106,3 @@ const dataInjectionPlugin = (): RuntimePluginFuture => ({
 
 export default dataInjectionPlugin;
 ```
-
-## Compatibility Notes
-
-In earlier versions of Modern.js, it was possible to add render preprocessing logic through the `init` hook in `routes/layout.tsx` and the `App.init` method. These approaches are still **supported**, but we **strongly recommend** implementing with Runtime plugins instead.
-
-:::warning
-
-In future versions, the `init` hook in `routes/layout.tsx` and the `App.init` method will be gradually **deprecated**. We recommend migrating to the Runtime plugin approach as soon as possible.
-:::

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

@@ -0,0 +1,51 @@
+---
+title: Rendering Mode Overview
+---
+
+# 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)
+- [Streaming Server-Side Rendering (Streaming SSR)](/guides/basic-features/render/streaming-ssr)
+- [React Server Components (RSC)](/guides/basic-features/render/rsc)
+- [Static Site Generation (SSG)](/guides/basic-features/render/ssg)
+- [Rendering Cache](/guides/basic-features/render/ssr-cache)