@modern-js/main-doc 2.67.4 → 2.67.6

package/docs/en/guides/advanced-features/web-server.mdx

@@ -6,34 +6,229 @@ sidebar_position: 16
 
 Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
 
-Modern.js provides two types of APIs to extend the Web Server: **Middleware** and **Lifecycle Hooks**.
+## Starting a Custom Web Server
+
+:::info
+You must ensure that the Modern.js version is x.67.5 or above.
+:::
+
+To start a custom web server, the following steps need to be taken:
+1. Add and install the dependencies `@modern-js/server-runtime` and `ts-node` to `devDependencies`.
+2. Add `server` to the `include` section of `tsconfig`.
+3. Create a file `server/modern.server.ts` in the project directory, where you can write custom logic.
+
+## Capabilities of the Custom Web Server
+
+In the `server/modern.server.ts` file, you can add the following configurations to extend the Server:
+- **Middleware**
+- **Render Middleware**
+- **Server-side Plugin**
+
+In the **Plugin**, you can define **Middleware** and **RenderMiddleware**. The middleware loading process is illustrated in the following diagram:
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png"
+  style={{ width: '100%', maxWidth: '540px' }}
+/>
+
+### Basic Configuration
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  middlewares: [],
+  renderMiddlewares: [],
+  plugins: [],
+});
+```
+
+
+### Type Definition
+
+`defineServerConfig` type definition is as follows:
+
+```ts
+import type { MiddlewareHandler } from 'hono';
+
+type MiddlewareOrder = 'pre' | 'post' | 'default';
+type MiddlewareObj = {
+    name: string;
+    path?: string;
+    method?: 'options' | 'get' | 'post' | 'put' | 'delete' | 'patch' | 'all';
+    handler: MiddlewareHandler | MiddlewareHandler[];
+    before?: Array<MiddlewareObj['name']>;
+    order?: MiddlewareOrder;
+};
+type ServerConfig = {
+    middlewares?: MiddlewareObj[];
+    renderMiddlewares?: MiddlewareObj[];
+    plugins?: (ServerPlugin | ServerPluginLegacy)[];
+}
+```
+
+
+### Middleware
+
+Middleware supports executing custom logic before and after the **request handling** and **page routing** processes in Modern.js services.
+If custom logic needs to handle both API routes and page routes, Middleware is the clear choice.
 
 :::note
-Middleware and Hooks only take effect when users request page routes, and BFF routes won't pass through these APIs.
+If you only need to handle BFF API routes, you can determine whether a request is for a BFF API by checking if `req.path` starts with the BFF `prefix`.
 :::
 
-## Enabling Custom Web Server
+Usage is as follows:
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+export const handler: MiddlewareHandler = async (c, next) => {
+  const monitors = c.get('monitors');
+  const start = Date.now();
+
+  await next();
 
-Developers can execute the `pnpm run new` command in the project root directory to enable the "Custom Web Server" feature:
+  const end = Date.now();
+  // Report Duration
+  monitors.timing('request_timing', end - start);
+};
 
-```bash
-? Select operation: Create project element
-? Select element type: Create "Custom Web Server" source directory
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-timing',
+      handler,
+    },
+  ],
+});
 ```
 
-After executing the command, register the `@modern-js/plugin-server` plugin in `modern.config.ts`:
+:::warning
+You must execute the `next` function to proceed with the subsequent Middleware.
+:::
+
+
+### RenderMiddleware
+
+If you only need to handle the logic before and after page rendering, modern.js also provides rendering middleware, which can be used as follows:
 
-```ts title="modern.config.ts"
-import { serverPlugin } from '@modern-js/plugin-server';
+```ts title="server/modern.server.ts"
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+// Inject render performance metrics
+const renderTiming: MiddlewareHandler = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  const end = Date.now();
+  c.res.headers.set('server-timing', `render; dur=${end - start}`);
+};
 
-export default defineConfig({
-  plugins: [..., serverPlugin()],
+// Modify the Response Body
+const modifyResBody: MiddlewareHandler = async (c, next) => {
+  await next();
+
+  const { res } = c;
+  const text = await res.text();
+  const newText = text.replace('<body>', '<body> <h3>bytedance</h3>');
+
+  c.res = c.body(newText, {
+    status: res.status,
+    headers: res.headers,
+  });
+};
+
+export default defineServerConfig({
+  renderMiddlewares: [
+    {
+      name: 'render-timing',
+      handler: renderTiming,
+    },
+    {
+      name: 'modify-res-body',
+      handler: modifyResBody,
+    },
+  ],
 });
 ```
 
-Once enabled, a `server/index.ts` file will be automatically created in the project directory where custom logic can be implemented.
 
-## Custom Web Server Capabilities
+### Plugin
+
+Modern.js supports adding the aforementioned middleware and rendering middleware for the Server in custom plugins, which can be used as follows:
+
+
+```ts title="server/plugins/server.ts"
+import type { ServerPluginLegacy } from '@modern-js/server-runtime';
+
+export default (): ServerPluginLegacy => ({
+  name: 'serverPlugin',
+  setup(api) {
+    return {
+      prepare(serverConfig) {
+        const { middlewares, renderMiddlewares } = api.useAppContext();
+
+        // Inject server-side data for page dataLoader consumption
+        middlewares?.push({
+          name: 'server-plugin-middleware',
+          handler: async (c, next) => {
+            c.set('message', 'hi modern.js');
+            await next();
+            // ...
+          },
+        });
+
+        // redirect
+        renderMiddlewares?.push({
+          name: 'server-plugin-render-middleware',
+          handler: async (c, next) => {
+            const user = getUser(c.req);
+            if (!user) {
+              return c.redirect('/login');
+            }
+
+            await next();
+          },
+        });
+        return serverConfig;
+      },
+    };
+  },
+});
+```
+
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+import serverPlugin from './plugins/serverPlugin';
+
+export default defineServerConfig({
+  plugins: [serverPlugin()],
+});
+```
+
+
+```ts title="src/routes/page.data.ts"
+import { useHonoContext } from '@modern-js/server-runtime';
+import { defer } from '@modern-js/runtime/router';
+
+export default () => {
+  const ctx = useHonoContext();
+  // SSR scenario consumes data injected by the Server Side
+  const message = ctx.get('message');
+
+  // ...
+};
+
+```
+
+
+## Legacy API (Deprecated)
+
+:::warning
+The legacy API is compatible but no longer recommended. For extending server capabilities, please refer to [Custom Web Server](/guides/advanced-features/web-server.html#custom-web-server). For migration guidelines, see [Migrating to the New Version of Custom Web Server](/guides/advanced-features/web-server.html#migrate-to-the-new-version-of-custom-web-server).
+:::
 
 ### Unstable Middleware
 
@@ -96,3 +291,172 @@ Best practices when using Hooks:
 :::info
 For detailed API and more usage, see [Hook](/apis/app/runtime/web-server/hook).
 :::
+
+
+## Migrate to the New Version of Custom Web Server
+
+### Migration Background
+
+Modern.js Server is continuously evolving to provide more powerful features. We have optimized the definition and usage of middleware and Server plugins.
+While the old custom Web Server approach is still compatible, we strongly recommend migrating according to this guide to fully leverage the advantages of the new version.
+
+### Migration Steps
+
+1. Upgrade Modern.js version to x.67.5 or above.
+2. Configure middleware or plugins in `server/modern.server.ts` according to the new definition method.
+3. Migrate the custom logic in `server/index.ts` to middleware or plugins, and update your code with reference to the differences between `Context` and `Next`.
+
+### Context Differences
+
+In the new version, the middleware handler type is Hono's `MiddlewareHandler`, meaning the `Context` type is `Hono Context`. The differences from the old custom Web Server's `Context` are as follows:
+
+
+#### UnstableMiddleware
+
+
+```ts
+type Body = ReadableStream | ArrayBuffer | string | null;
+
+type UnstableMiddlewareContext<
+  V extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  request: Request;
+  response: Response;
+  get: Get<V>;
+  set: Set<V>;
+  // Current Matched Routing Information
+  route: string;
+  header: (name: string, value: string, options?: { append?: boolean }) => void;
+  status: (code: number) => void;
+  redirect: (location: string, status?: number) => Response;
+  body: (data: Body, init?: ResponseInit) => Response;
+  html: (
+    data: string | Promise<string>,
+    init?: ResponseInit,
+  ) => Response | Promise<Response>;
+};
+```
+
+Differences between UnstableMiddleware Context and Hono Context:
+
+| UnstableMiddleware       | Hono                          | Description                                                                      |
+| :----------------------- | :---------------------------- | :------------------------------------------------------------------------ |
+| `c.request`              | `c.req.raw`                   | Refer to [HonoRequest raw](https://hono.dev/docs/api/request#raw) documentation         |
+| `c.response`             | `c.res`                       | Refer to [Hono Context res](https://hono.dev/docs/api/context#res) documentation       |
+| `c.route`                | `c.get('route')`              | Get application context information.                                                          |
+| `loaderContext.get`      | `honoContext.get`             | After injecting data using `c.set`, consume in dataLoader: the old version uses `loaderContext.get`, refer to the new version in [Plugin](/guides/advanced-features/web-server.html#plugin) example    |
+
+
+#### Middleware
+
+```ts
+type MiddlewareContext = {
+  response: {
+    set: (key: string, value: string) => void;
+    status: (code: number) => void;
+    getStatus: () => number;
+    cookies: {
+      set: (key: string, value: string, options?: any) => void;
+      clear: () => void;
+    };
+    raw: (
+      body: string,
+      { status, headers }: { status: number; headers: Record<string, any> },
+    ) => void;
+    locals: Record<string, any>;
+  };
+  request: {
+    url: string;
+    host: string;
+    pathname: string;
+    query: Record<string, any>;
+    cookie: string;
+    cookies: {
+      get: (key: string) => string;
+    };
+    headers: IncomingHttpHeaders;
+  };
+  source: {
+    req: IncomingMessage;
+    res: ServerResponse;
+  };
+};
+
+```
+
+Differences between Middleware `Context` and Hono `Context`:
+| UnstableMiddleware       | Hono                          | Description                                                                  |
+| :----------------------- | :---------------------------- | :--------------------------------------------------------------------------- |
+| `c.request.cookie`         | `c.req.cookie()`              | Refer to [Hono Cookie Helper](https://hono.dev/docs/helpers/cookie) documentation |
+| `c.request.pathname`       | `c.req.path`                  | Refer to [HonoRequest path](https://hono.dev/docs/api/request#path) documentation |
+| `c.request.url`            | -                             | Hono `c.req.url` provides the full request URL, calculate manually from URL |
+| `c.request.host`           | `c.req.header('Host')`        | Obtain host through header                                                  |
+| `c.request.query`          | `c.req.query()`               | Refer to [HonoRequest query](https://hono.dev/docs/api/request#query) documentation |
+| `c.request.headers`        | `c.req.header()`              | Refer to [HonoRequest header](https://hono.dev/docs/api/request#header) documentation |
+| `c.response.set`           | `c.res.headers.set`           | Example: `c.res.headers.set('custom-header', '1')`                          |
+| `c.response.status`        | `c.status`                    | Example: `c.status(201)`                                                    |
+| `c.response.cookies`       | `c.header`                    | Example: `c.header('Set-Cookie', 'user_id=123')`                            |
+| `c.response.raw`           | `c.res`                       | Refer to [Hono Context res](https://hono.dev/docs/api/context#res) documentation |
+
+#### Hook
+
+```ts
+type HookContext = {
+  response: {
+    set: (key: string, value: string) => void;
+    status: (code: number) => void;
+    getStatus: () => number;
+    cookies: {
+      set: (key: string, value: string, options?: any) => void;
+      clear: () => void;
+    };
+    raw: (
+      body: string,
+      { status, headers }: { status: number; headers: Record<string, any> },
+    ) => void;
+  };
+  request: {
+    url: string;
+    host: string;
+    pathname: string;
+    query: Record<string, any>;
+    cookie: string;
+    cookies: {
+      get: (key: string) => string;
+    };
+    headers: IncomingHttpHeaders;
+  };
+};
+
+type AfterMatchContext = HookContext & {
+  router: {
+    redirect: (url: string, status: number) => void;
+    rewrite: (entry: string) => void;
+  };
+};
+
+type AfterRenderContext = {
+  template: {
+    get: () => string;
+    set: (html: string) => void;
+    prependHead: (fragment: string) => void;
+    appendHead: (fragment: string) => void;
+    prependBody: (fragment: string) => void;
+    appendBody: (fragment: string) => void;
+  };
+};
+```
+
+Hook Context is mostly consistent with Middleware Context, so we need to pay extra attention to the additional parts of different Hooks.
+
+| UnstableMiddleware       | Hono                          | Description                           |
+| :----------------------- | :---------------------------- | :------------------------------------ |
+| `router.redirect`        | `c.redirect`                  | Refer to [Hono Context redirect](https://hono.dev/docs/api/context#redirect) documentation      |
+| `router.rewrite`         | -                             | No corresponding capability provided at the moment                                                   |
+| template API             | `c.res`                       | Refer to [Hono Context res](https://hono.dev/docs/api/context#res) documentation               |
+
+
+### Differences in Next API
+
+In Middleware and Hooks, the render function executes even without invoking `next`.
+In the new design, subsequent Middleware will only execute if the `next` function is invoked.

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

@@ -149,9 +149,10 @@ Having the `loader` function run only on the server in SSR applications brings s
 - **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. Modern.js provides a default polyfill for the `fetch` API, allowing it to be used on the server. This means 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. Since `fetch` works similarly on the client and server, you can fetch data in a consistent manner whether in CSR or SSR:
 
 ```tsx
 export async function loader() {

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

@@ -285,6 +285,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
 ```
 
 Add the following content to the `packages/app/vercel.json` file:
+
 ```json title="vercel.json"
 {
   "buildCommand": "npm run deploy",
@@ -298,7 +299,7 @@ Just submit your code and deploy it using the Vercel platform.
 
 If you're creating a GitHub Pages for a repository without a custom domain, the page URL will follow this format: `http://<username>.github.io/<repository-name>`. Therefore, you need to add the following configuration in `modern.config.ts`:
 
-```
+```ts
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
@@ -331,7 +332,6 @@ For branch deployment, follow these steps:
 :::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).
@@ -407,7 +407,7 @@ Nginx is a high-performance HTTP and reverse proxy server that can handle static
 
 If your project is a purely front-end project, you can also deploy the application through Nginx. Here is an example of an Nginx configuration to demonstrate how to host the output of a purely front-end project.
 
-```conf title="nginx.conf"
+```nginx title="nginx.conf"
 # user [user] [group];
 worker_processes 1;
 

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

@@ -8,7 +8,7 @@ Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML
 
 ## JSX Syntax
 
-According to Modern.js conventions, you can create a `Document.[jt]sx` file under `src/` or the entry directory and default export a component". The rendering result of this component can be used as the HTML template of the entry.
+According to Modern.js conventions, you can create a `Document.[jt]sx` file under `src/` or the entry directory and default export a component. The rendering result of this component can be used as the HTML template of the entry.
 
 For example, consider the following directory structure:
 
@@ -218,9 +218,9 @@ The implementation of custom HTML fragments is to merge the fragments with the b
 
 :::
 
-### Custom the entire HTML Template
+### Customize the entire HTML Template
 
-In some cases, HTML fragments may be is not better meet the customization requirements. Modern.js provides a fully customized way.
+In some cases, HTML fragments may not offer enough control. Modern.js provides a fully customized way.
 
 :::caution Note
 It is generally not recommended to directly override the default HTML template, as some functional options may be lost. If it is truly necessary to customize the entire HTML template, it is recommended to modify based on the built-in template as needed.

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

@@ -96,34 +96,6 @@ dist
     └── qux.[hash].mp4
 ```
 
-## Node.js Output Directory
-
-When you enable SSR or SSG features in Modern.js, Modern.js will generate a Node.js bundle after the build and output it to the `bundles` directory.
-
-```bash
-dist
-├── bundles
-│   └── [name].js
-├── static
-└── html
-```
-
-Node.js files usually only contain JS files, no HTML or CSS. Also, JS file names will not contain hash.
-
-You can modify the output path of Node.js files through the [output.distPath.server](/configure/app/output/dist-path) config.
-
-For example, output Node.js files to the `server` directory:
-
-```ts
-export default {
-  output: {
-    distPath: {
-      server: 'server',
-    },
-  },
-};
-```
-
 ## Flatten the Directory
 
 Sometimes you don't want the dist directory to have too many levels, you can set the directory to an empty string to flatten the generated directory.

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

@@ -1,6 +1,6 @@
 # Server-Side Rendering
 
-Server-Side Rendering (SSR) involves rendering the HTML content of a webpage-side and then sending the fully-rendered page to the browser. The browser only needs to display the page without additional rendering.
+Server-Side Rendering (SSR) involves rendering the HTML content of a webpage server-side and then sending the fully-rendered page to the browser. The browser only needs to display the page without additional rendering.
 
 The main advantages are:
 
@@ -320,4 +320,4 @@ In this case, the `epicMiddleware` instance is created outside the component, an
 
 This code does not cause issues on the client-side. However, in SSR, the Middleware instance remains non-disposable. Each time the component renders, calling `epicMiddleware.run(rootEpic)` adds new event bindings internally, causing the entire object to grow continuously, ultimately affecting application performance.
 
-Such issues are not easily noticed in CSR. When transitioning from CSR to SSR, if you're unsure whether your application has such hidden pitfalls, consider stress testing the application.
+Such issues are not easily noticed in CSR. When transitioning from CSR to SSR, if you're unsure whether your application has such hidden pitfalls, consider stress testing the application.

package/docs/en/guides/concept/entries.mdx

@@ -76,7 +76,7 @@ By default, Modern.js scans the files under `src/` before starting the project,
 
 :::tip
 
-- You can custom the recognition directory for page entries by using [source.entriesDir](/configure/app/source/entries-dir).
+- You can customize the recognition directory for page entries by using [source.entriesDir](/configure/app/source/entries-dir).
 - If you need to customize the entry points, please refer to [Custom Entries](#custom-entries).
 
 :::

package/docs/en/plugin/cli-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 This document details the API for Modern.js CLI plugins. CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
 
+:::info
+
+CLI plugins need to be configured via the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+:::
+
 ## Plugin Basic Structure
 
 A typical CLI plugin structure is as follows:

package/docs/en/plugin/runtime-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 Modern.js's Runtime Plugins allow you to extend and modify the behavior of your application during its React code execution.  With Runtime Plugins, you can easily perform initialization tasks, implement React Higher-Order Component (HOC) wrapping, and more.
 
+:::info
+
+Runtime plugins need to be configured via the [`plugins`](/configure/app/runtime/plugins) field in `src/modern.runtime.ts`.
+
+:::
+
 ## Plugin Structure
 
 A typical Runtime Plugin looks like this:
@@ -150,16 +156,35 @@ Allows you to wrap the application's root component with a custom React componen
 You can combine multiple hooks to implement more complex functionality. For example, you can use `onBeforeRender` to fetch data and then use `wrapRoot` to pass the data to the entire application via Context:
 
 ```ts
-api.onBeforeRender(async (context) => {
-  const data = await fetchData(context.req);
-  context.data = data;
-});
-
-api.wrapRoot((App) => {
-  return (props) => (
-    <DataContext.Provider value={props.data}>
-      <App {...props} />
-    </DataContext.Provider>
-  );
-});
+import { RuntimePluginFuture, RuntimeReactContext } from '@modern-js/runtime';
+import { useContext, createContext } from 'react';
+
+export const ThemeContext = createContext<{ theme: string } | null>(null);
+
+export const themePlugin = (): RuntimePluginFuture => {
+  return {
+    name: 'theme-plugin',
+    setup: api => {
+      api.onBeforeRender(async context => {
+        const userPreference = await fetch('/api/user/theme-settings').then(
+          res => res.json(),
+        );
+        context.data = {
+          theme: userPreference.theme,
+        };
+      });
+
+      api.wrapRoot(App => {
+        return props => {
+          const context = useContext(RuntimeReactContext);
+          return (
+            <ThemeContext.Provider value={context.data}>
+              <App {...props} />
+            </ThemeContext.Provider>
+          );
+        };
+      });
+    },
+  };
+};
 ```

package/docs/en/tutorials/first-app/c04-routes.mdx

@@ -118,10 +118,11 @@ import { Radio } from 'antd';
 
 Then modify the top of the UI to add a set of radio group:
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
   return (
     <div>
+      // [!code highlight:6]
       <div className="h-16 p-2 flex items-center justify-center">
         <Radio.Group onChange={handleSetList} value={currentList}>
           <Radio value="/">All</Radio>
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 Finally, add local state and related logic to the Layout component:
 
-```tsx {2-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   const navigate = useNavigate();
   const location = useLocation();
   const [currentList, setList] = useState(location.pathname || '/');

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -7,7 +7,7 @@ In the previous chapter, we learned how to add client route.
 
 In this chapter, we will learn how to add **Loader** to the routing component.
 
-By far, we have provided data to components through hardcoding. If you want to get data from the remote, you usually use `useEffect` to do it. But when SSR is enabled, `useEffect` will not be executed at the server level, so this SSR can only render a very limited UI.
+So far, we have provided data to components through hardcoding. If you want to get data from the remote, you usually use `useEffect` to do it. But when SSR is enabled, `useEffect` will not be executed at the server level, so this SSR can only render a very limited UI.
 
 Modern.js provides the ability of Data Loader to support homogeneous data acquisition in components to maximize the value of SSR.
 
@@ -56,11 +56,13 @@ Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avo
 
 Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
-```tsx {1,2,5,13}
+```tsx
+// [!code highlight:2]
 import { useLoaderData } from '@modern-js/runtime/router';
 import type { LoaderData } from './page.data';
 
 function Index() {
+  // [!code highlight:1]
   const { data } = useLoaderData() as LoaderData;
 
   return (
@@ -68,6 +70,7 @@ function Index() {
       <Helmet>
         <title>All</title>
       </Helmet>
+      // [!code highlight:1]
       <List
         dataSource={data}
         renderItem={info => <Item key={info.name} info={info} />}