@modern-js/main-doc 2.67.5 → 2.67.6

package/docs/zh/guides/advanced-features/bff/extend-server.mdx

@@ -2,31 +2,39 @@
 
 部分应用中，开发者可能希望对所有 BFF 函数做统一的处理，例如鉴权、日志、数据处理等。
 
-Modern.js 提供了两种方式，允许开发者根据运行时框架自由扩展 BFF Server。
+Modern.js 支持用户通过 [Middleware](/guides/advanced-features/web-server.html#middleware) 的方式来自由扩展 BFF Server。
 
-## 中间件
 
-开发者可以在编写 `api/_app.ts` 文件中编写中间件，用来扩展 BFF Server。以 Express 作为运行时框架为例，介绍如何手写一个中间件，添加权限校验：
+## 使用中间件
 
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/server';
-import { Request, Response, NextFunction } from 'express';
+开发者可以在 `server/modern.server.ts` 中通过 配置 middlewares 来使用中间件。下面介绍如何手写一个 BFF 中间件，添加权限校验：
 
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
-    if (req.url !== '/api/login') {
-      const sid = req?.cookies?.sid;
-      if (!sid) {
-        res.status(400);
-        res.json({ code: -1, message: 'need login' });
-      } else {
-        next();
-      }
-    } else {
-      next();
+
+```ts title="server/modern.server.ts"
+import {
+  type MiddlewareHandler,
+  defineServerConfig,
+} from '@modern-js/server-runtime';
+
+const requireAuthForApi: MiddlewareHandler = async (c, next) => {
+  if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
+    const sid = c.req.cookie('sid');
+    if (!sid) {
+      return c.json({ code: -1, message: 'need login' }, 400);
     }
-  });
+  }
+  await next();
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'require-auth-for-api',
+      handler: requireAuthForApi,
+    },
+  ]
 });
+
 ```
 
 
@@ -97,60 +105,4 @@ export default () => {
 
 ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
 
-以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式，实现了简易的登录功能。同样，可以在这个钩子文件中实现其他功能来扩展 BFF Server。
-
-:::info
-不同运行时框架中，中间件的写法不一定相同，详情可见[运行时框架](/guides/advanced-features/bff/frameworks)。
-
-:::
-
-## 定义 Server 实例
-
-除了中间件之外，还可以通过 `api/app.ts` 文件来定义 BFF Server 的实例。开发者需要默认导出一个能被运行时框架插件识别的实例。这里简单展示一下 Koa 和 Express 如何定义 Server 实例。
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/app.ts"
-import express from 'express';
-
-const app = express();
-app.use(async (req, res, next) => {
-  console.info(`access url: ${req.url}`);
-  next();
-});
-
-export default app;
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/app.ts"
-import koa from 'koa';
-
-const app = new Koa();
-app.use(async (ctx, next) => {
-  console.info(`access url: ${ctx.url}`);
-  await next();
-});
-
-export default app;
-```
-
-  </TabItem>
-</Tabs>
-
-在复杂的 BFF 逻辑中，定义 Server 实例可以更方便通过一个入口来组织代码逻辑，设计目录结构。在这个文件中，可以执行初始化逻辑，添加全局中间件，声明路由，甚至扩展原有框架。
-
-BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册，所以在这里你也可以拦截 BFF 函数定义的路由，进行预处理或是提前响应。
-
-:::note
-此时，如果应用中同时存在 `api/_app.ts`，则定义的中间件会被放在 `api/app.ts` 导出实例的最后执行。多数情况下，中间件就能覆盖大多数 BFF 函数的定制需求。只有当应用的服务端逻辑比较复杂时，才需要自定义 Server 实例。
-:::
-
-:::caution
-当应用中没有 `api/app.ts` 的时候，Modern.js 默认会添加 [koa-body](https://www.npmjs.com/package/koa-body)。当应用中存在 `api/app.ts` 时，如果开发者希望使用带有 Body 的 BFF 函数，需要**自行添加** `koa-body`。
-:::
+以上代码模拟了在 `server/Modern.server.ts` 中定义中间件的方式，实现了简易的登录功能。同样，可以在这个配置文件中实现其他功能来扩展 BFF Server。

package/docs/zh/guides/advanced-features/bff/frameworks.mdx

@@ -5,82 +5,22 @@ title: 运行时框架
 
 # 运行时框架
 
-Modern.js 的 BFF 支持不同的运行时框架，当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
-
-使用不同运行时框架时，有部分 API 会存在差异。
+Modern.js 以 [Hono.js](https://hono.dev/) 作为 BFF 和 Server 运行时框架，因此可以基于 Hono.js 生态[扩展 BFF Server](/guides/advanced-features/bff/extend-server.html)。
 
 ## 获取请求上下文
 
-在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/express'
-export const get = async () => {
-  const { req } = useContext();
-  console.info(`access url: ${req.url}`);
-  return 'Hello Modern.js'
-};
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
+在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，你可以通过 `useHonoContext` 来获取：
 
 ```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/koa'
+import { useHonoContext } from '@modern-js/plugin-bff/hono'
 export const get = async () => {
-  const ctx = useContext();
-  console.info(`access url: ${req.url}`);
+  const c = useHonoContext();
+  console.info(`access url: ${c.req.url}`);
   return 'Hello Modern.js'
 };
 ```
 
-  </TabItem>
-</Tabs>
-
 :::info
-详细内容可以参考 [useContext](/apis/app/runtime/bff/use-context)。
+详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
 :::
 
-## 使用中间件
-
-在 BFF 函数中，有时需要使用中间件，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/express';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware((req, res, next) => {
-    req.query.id = 'koa';
-    next();
-  });
-});
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/koa';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```
-
-  </TabItem>
-</Tabs>
-
-:::info
-详细内容可以参考 [hook](/apis/app/runtime/bff/hook)。
-:::

package/docs/zh/guides/advanced-features/page-performance/_meta.json

@@ -1 +1 @@
-["code-split", "inline-assets", "optimize-bundle"]
+["code-split", "inline-assets", "optimize-bundle", "react-compiler"]

package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx

@@ -0,0 +1,44 @@
+# React Compiler
+
+React Compiler 是 React 19 引入的一个实验性编译器，它可以自动优化你的 React 代码。
+
+在开始使用 React Compiler 之前，建议阅读 [React Compiler 文档](https://zh-hans.react.dev/learn/react-compiler)，以了解 React Compiler 的功能、当前状态和使用方法。
+
+## 如何使用
+
+在 Modern.js 中使用 React Compiler 的步骤如下：
+
+1. Modern.js 目前项目还未正式支持 React 19，可以在 React 17 或 18 项目中安装 `react-compiler-runtime@rc`，以允许编译后的代码在 19 之前的版本上运行。
+
+2. 目前 React Compiler 仅提供了 Babel 插件，你需要安装 `babel-plugin-react-compiler`。
+
+3. 在你的 Modern.js 配置文件中注册 Babel 插件：
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  tools: {
+    babel(_, { addPlugins }) {
+      addPlugins([
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+          },
+        ],
+      ]);
+    },
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+  ],
+});
+```
+
+> 详细代码可以参考：[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)

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

@@ -2,42 +2,230 @@
 sidebar_position: 16
 ---
 
-# 自定义 Web Server（不推荐）
+# 自定义 Web Server
 
-:::warning
-自定义 Web Server 兼容但不再推荐使用，扩展 Server 能力请移步 [自定义 Server](/guides/advanced-features/custom-server.html)，迁移指南参考 [迁移至新版自定义 Server](/guides/advanced-features/web-server.html#%E8%BF%81%E7%A7%BB%E8%87%B3%E6%96%B0%E7%89%88%E8%87%AA%E5%AE%9A%E4%B9%89-server)。
+Modern.js 将大部分项目需要的服务端能力都进行了封装，通常项目无需进行服务端开发。但在有些开发场景下，例如用户鉴权、请求预处理、添加页面渲染骨架等，项目仍需要对服务端进行定制。
+
+## 开启自定义 Web Server
+
+:::info
+必须确保 Modern.js 版本是 x.67.5 及以上。
 :::
 
-Modern.js 将大部分项目需要的服务端能力都进行了封装，通常项目无需进行服务端开发。但在有些开发场景下，例如用户鉴权、请求预处理、添加页面渲染骨架等，项目仍需要对服务端进行定制。
+开启自定义 Web Server 功能，需要执行以下步骤：
+1. devDependencies 增加 `@modern-js/server-runtime` 及 `ts-node`依赖并安装。
+2. `tsconfig` 的 `include` 中添加 `server`。
+3. 项目目录下创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+
+## 自定义 Web Server 能力
+
+`server/modern.server.ts` 文件中添加如下配置来扩展 Server：
+- **中间件（Middleware）**
+- **渲染中间件（RenderMiddleware）**
+- **服务端插件（Plugin）**
 
-Modern.js 提供了 **渲染中间件（Middleware）** 与**生命周期钩子（Hook）** 两类 API 来扩展 Web Server。
+其中 **Plugin** 中可以定义 **Middleware** 与 **RenderMiddleware**。 中间件加载流程如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png"
+  style={{ width: '100%', maxWidth: '540px' }}
+/>
+
+### 基本配置
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  middlewares: [], // 中间件
+  renderMiddlewares: [], // 渲染中间件
+  plugins: [], // 插件
+});
+```
+
+
+### 类型定义
+
+`defineServerConfig` 类型定义如下:
+
+```ts
+import type { MiddlewareHandler } from 'hono';
+
+type MiddlewareObj = {
+    name: string;
+    path?: string;
+    method?: 'options' | 'get' | 'post' | 'put' | 'delete' | 'patch' | 'all';
+    handler: MiddlewareHandler | MiddlewareHandler[];
+};
+type ServerConfig = {
+    middlewares?: MiddlewareObj[];
+    renderMiddlewares?: MiddlewareObj[];
+    plugins?: (ServerPlugin | ServerPluginLegacy)[];
+}
+```
+
+
+### Middleware
+
+Middleware 支持在 Modern.js 服务的**请求处理**与**页面路由**的流程前后，执行自定义逻辑。
+即自定义逻辑既要处理接口路由，也要作用于页面路由，那么 Middleware 是不二选择。
 
 :::note
-Middleware 与 Hook 只会在用户请求页面路由时生效，BFF 路由不会经过这些 API。
+如果仅需要处理 BFF 接口路由，可以通过检查 `req.path` 是否以 BFF `prefix` 开头，来判断是否为 BFF 接口请求。
 :::
 
-## 开启自定义 Web Server
+使用姿势如下：
 
-开发者可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Server」功能：
+```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();
 
-```bash
-? 请选择你想要的操作 创建工程元素
-? 请选择创建元素类型 新建「自定义 Web Server」源码目录
+  await next();
+
+  const end = Date.now();
+  // 上报耗时
+  monitors.timing('request_timing', end - start);
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-timing',
+      handler,
+    },
+  ],
+});
 ```
 
-执行命令后，在 `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件:
+:::warning
+必须执行 `next` 函数才会执行后续的 Middleware。
+:::
+
 
-```ts title="modern.config.ts"
-import { serverPlugin } from '@modern-js/plugin-server';
+### RenderMiddleware
 
-export default defineConfig({
-  plugins: [..., serverPlugin()],
+如果只需要处理页面渲染的前后执行逻辑，modern.js 也提供了渲染中间件，使用姿势如下：
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+// 注入 render 性能指标
+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}`);
+};
+
+// 修改响应体
+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,
+    },
+  ],
 });
 ```
 
-开启功能后，项目目录下会自动创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。
 
-## 自定义 Web Server 能力
+### Plugin
+
+Modern.js 支持在自定义插件中为 Server 添加上述 Middleware 及 RenderMiddleware，使用姿势如下：
+
+
+```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();
+
+        // 注入服务端数据，供页面 dataLoader 消费
+        middlewares?.push({
+          name: 'server-plugin-middleware',
+          handler: async (c, next) => {
+            c.set('message', 'hi modern.js');
+            await next();
+            // ...
+          },
+        });
+
+        // 重定向
+        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 场景消费服务端注入的数据
+  const message = ctx.get('message');
+
+  // ...
+};
+
+```
+
+
+## 旧版 API（废弃）
+
+:::warning
+旧版 API 兼容但不再推荐使用，扩展 Server 能力请移步 [自定义 Web Server](/guides/advanced-features/web-server.html)，迁移指南参考 [迁移至新版自定义 Web Server](/guides/advanced-features/web-server.html#迁移至新版自定义-web-server)。
+:::
 
 ### Unstable Middleware
 
@@ -68,10 +256,6 @@ export const unstableMiddleware: UnstableMiddleware[] = [time];
 
 ### Hook
 
-:::warning
-我们推荐使用 UnstableMiddleware 代替 Hook。
-:::
-
 Modern.js 提供的 Hook 用于控制 Web Server 中的特定逻辑，所有的页面请求都会经过 Hook。
 
 目前提供了两种 Hook，分别是 `AfterMatch` 和 `AfterRender`，开发者可以在 `server/index.ts` 中这样写：
@@ -102,12 +286,12 @@ export const afterRender: AfterRenderHook = (ctx, next) => {
 :::
 
 
-## 迁移至新版自定义 Server
+## 迁移至新版自定义 Web Server
 
 ### 迁移背景
 
 Modern.js Server 在不断演进，为了提供更强大的功能，我们对中间件和 Server 插件的定义和使用方式进行了优化。
-虽然旧版自定义 Web Server 写法仍被兼容，但我们强烈建议您按照本指南进行迁移，以充分利用新版的优势。
+虽然旧版 API 仍被兼容，但我们强烈建议您按照本指南进行迁移，以充分利用新版的优势。
 
 ### 迁移步骤
 
@@ -152,7 +336,7 @@ UnstableMiddleware `Context` 和 Hono `Context` 的具体差异：
 | `c.request`              | `c.req.raw`                   | 参考 [HonoRequest raw](https://hono.dev/docs/api/request#raw) 文档         |
 | `c.response`             | `c.res`                       | 参考 [Hono Context res](https://hono.dev/docs/api/context#res) 文档       |
 | `c.route`                | `c.get('route')`              | 获取应用上下文信息                                                          |
-| `loaderContext.get`      | `honoContext.get`             | 通过 `c.set` 注入数据后 dataLoader 中消费：旧版通过 `loaderContext.get` 获取，新版参考 [Plugin](/guides/advanced-features/custom-server.html#使用姿势-2) 示例    |
+| `loaderContext.get`      | `honoContext.get`             | 通过 `c.set` 注入数据后 dataLoader 中消费：旧版通过 `loaderContext.get` 获取，新版参考 [Plugin](/guides/advanced-features/web-server.html#使用姿势-2) 示例    |
 
 #### Middleware
 

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

@@ -110,7 +110,6 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
 
 :::info
 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
-
 :::
 
 在 Netlify 平台上添加项目，部署即可。
@@ -197,6 +196,7 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 ### 纯前端项目
 
 在当前项目的根目录添加 `vercel.json` 文件：
+
 ```bash
 ./
 ├── src
@@ -206,6 +206,7 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 ```
 
 在 `vercel.json` 中添加以下内容：
+
 ```json title="vercel.json"
 {
   "buildCommand": "modern deploy",
@@ -219,7 +220,6 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 
 :::info
 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
-
 :::
 
 ### 全栈项目
@@ -314,6 +314,7 @@ Github Pages 支持两种部署方式，通过分支部署或通过 Github Actio
 4. 执行 `npm run deploy:gh-pages`。
 
 :::info
+
 1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`，Modern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
 2. 可以参考项目[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
 
@@ -393,7 +394,7 @@ Nginx 是一个高性能的 HTTP 和反向代理服务器，它可以处理静
 
 如果你的项目是纯前端项目，也可以通过 Nginx 来部署应用，以下提供一个 Nginx 配置的示例来演示如何托管一个纯前端项目的产物。
 
-```conf title="nginx.conf"
+```nginx title="nginx.conf"
 # user [user] [group];
 worker_processes 1;
 

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

@@ -96,34 +96,6 @@ dist
     └── qux.[hash].mp4
 ```
 
-## Node.js 产物目录
-
-当你在 Modern.js 中开启了 SSR 或 SSG 等服务端功能时，Modern.js 会在构建后生成一份 Node.js 产物，并输出到 `bundles` 目录下：
-
-```bash
-dist
-├── bundles
-│   └── [name].js
-├── static
-└── html
-```
-
-Node.js 产物通常只包含 JS 文件，不包含 HTML、CSS 等文件。此外，Node 产物的 JS 文件名称也不会自动生成哈希值。
-
-你可以通过 [output.distPath.server](/configure/app/output/dist-path) 配置项来修改 Node 产物的输出路径。
-
-比如，将 Node.js 产物输出到 `server` 目录：
-
-```ts
-export default {
-  output: {
-    distPath: {
-      server: 'server',
-    },
-  },
-};
-```
-
 ## 扁平化产物目录
 
 有时候你不想产物目录有太多层级，可以将目录设置为空字符串，使生成的产物目录扁平化。

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

@@ -118,8 +118,9 @@ import { Radio } from 'antd';
 
 然后将 UI 最顶部进行修改，增加一组单选框
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   return (
     <div>
       <div className="h-16 p-2 flex items-center justify-center">
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 最后在 Layout 组件里增加局部状态和相关逻辑：
 
-```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/zh/tutorials/first-app/c05-loader.mdx

@@ -56,11 +56,13 @@ Data Loader 并非只为 SSR 工作。在 CSR 项目中，Data Loader 也可以
 
 Modern.js 也提供了一个叫 `useLoaderData` 的 hooks API，我们修改 `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} />}