@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

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

@@ -8,11 +8,7 @@ Modern.js provides out-of-the-box data fetching capabilities. Developers can use
 
 ## What is Data Loader
 
-:::note
-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
 .
@@ -39,15 +35,18 @@ export const loader = async (): Promise<ProfileData> => {
 ```
 
 :::warning Compatibility
+
 - In previous versions, Data Loader was defined in a `.loader` file. In the current version, we recommend defining it in a `.data` file, while maintaining compatibility with `.loader` files.
 - In `.loader` files, the Data Loader can be exported as default. In `.data` files, it should be named `loader` export.
+
 ```ts
-  // xxx.loader.ts
-export default () => {}
+// xxx.loader.ts
+export default () => {};
 
 // xxx.data.ts
-export const loader = () => {}
+export const loader = () => {};
 ```
+
 :::
 
 In the route component, you can use the `useLoaderData` function to fetch data:
@@ -74,7 +73,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 +81,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';
@@ -100,7 +99,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 `request` is an instance of [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request). A common use case is to get query parameters from `request`:
 
 ```tsx
-import { LoaderFunctionArgs } from '@modern-js/runtime/router;
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
@@ -146,20 +145,22 @@ In SSR applications, the `loader` function runs only on the server, hence it is
 
 :::note
 Having the `loader` function run only on the server in SSR applications brings several benefits:
+
 - **Simplifies usage**: Guarantees consistent data-fetching methods in SSR applications, so developers don't have to distinguish between client and server code.
 - **Reduces client bundle size**: Moves logic code and dependencies from the client to the server.
 - **Improves maintainability**: Less direct influence of data logic on front-end UI and avoids issues of accidentally including server dependencies in the client bundle or vice versa.
 
 :::
 
-We recommend using the `fetch` API in `loader` functions to make requests. Since `fetch` works similarly on the client and server, you can fetch data in a consistent manner whether in CSR or SSR:
+We recommend using the `fetch` API in `loader` functions to make requests. Modern.js provides a default polyfill for the `fetch` API, allowing it to be used on the server side. This means you can fetch data in a consistent manner whether in CSR or SSR:
 
 ```tsx
 export async function loader() {
   const res = await fetch('URL_ADDRESS');
+  const data = await res.json();
   return {
-    message: res.message
-  }
+    message: data.message,
+  };
 }
 ```
 
@@ -167,7 +168,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
@@ -204,14 +205,14 @@ In the following example, the page's status code will match this `response`, and
 // routes/user/profile/page.data.ts
 export async function loader() {
   const user = await fetchUser();
-  if(!user){
+  if (!user) {
     throw new Response('The user was not found', { status: 404 });
   }
   return user;
 }
 
 // routes/error.tsx
-import { useRouteError } from '@modern-js/runtime/router;
+import { useRouteError } from '@modern-js/runtime/router';
 const ErrorBoundary = () => {
   const error = useRouteError() as { data: string };
   return <div className="error">{error.data}</div>;
@@ -240,7 +241,7 @@ export function UserLayout() {
 }
 ```
 
-`useRouteLoaderData` accepts a parameter `routeId`. In conventional routing, Modern.js automatically generates the `routeId`, which is the path of the corresponding component relative to `src/routes`. In the example above, the `routeId` for fetching data from `routes/user/layout.tsx`'s loader is `user/layout`.
+`useRouteLoaderData` accepts a parameter `routeId`. In conventional routing, Modern.js automatically generates the `routeId`, which is the path of the corresponding component relative to `src/routes`. For example, in the example above, if a child component wants to get data returned by the loader in `routes/user/layout.tsx`, the `routeId` value is `user/layout`.
 
 In a multi-entry scenario, the `routeId` value needs to include the corresponding entry name, which is typically the directory name if not explicitly specified. For example, with the following directory structure:
 

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,35 +4,24 @@ 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:
+Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server). For example, to proxy the local interface to an online address:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  tools: {
-    devServer: {
+  dev: {
+    server: {
       proxy: {
-        '/go/api': {
-          target: 'http://www.example.com/',
-          changeOrigin: true,
-        },
+        '/go/api': 'http://www.example.com/',
       },
     },
   },
 });
 ```
 
-When access `http://localhost:8080/go/api`, the response content will be returned from [http://www.example.com/](http://www.example.com/).
+When accessing `http://localhost:8080/go/api`, the response content will be returned from [http://www.example.com/](http://www.example.com/).
 
 :::info
-For more detail, see [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
+For configuration format, please refer to: [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)