@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/zh/guides/advanced-features/international/routing.mdx

@@ -0,0 +1,134 @@
+---
+title: 路由集成
+---
+
+# 路由集成
+
+## 启用语言路径前缀
+
+设置 `localePathRedirect: true` 后，插件会接管 URL 中的语言识别和跳转，具体做以下四件事：
+
+1. **识别 URL 里的语言前缀**：访问 `/zh/detail` 时，插件从路径中提取 `zh` 作为当前语言
+2. **无前缀路径自动重定向**：访问 `/detail` 时，先通过 detector 检测语言，检测不到则用 `fallbackLanguage`，然后重定向到 `/en/detail` 或 `/zh/detail`
+3. **切换语言时同步更新 URL**：当前在 `/en/detail`，调用 `changeLanguage('zh')` 后 URL 自动变为 `/zh/detail`，而不只是改 i18next 内部的语言状态
+4. **避免路径被重复检测**：插件会自动从 i18next detector 的 `order` 中移除 `path`，因为路径语言识别已由插件自己处理，不需要 i18next 再检测一遍
+
+```ts
+// modern.config.ts
+i18nPlugin({
+  localeDetection: {
+    localePathRedirect: true,
+    languages: ['zh', 'en'],
+    fallbackLanguage: 'en',
+  },
+});
+```
+
+**效果：**
+
+| 访问路径 | 结果 |
+| --- | --- |
+| `/about` | 重定向到 `/en/about` |
+| `/en/about` | 正常访问，语言为 `en` |
+| `/zh/about` | 正常访问，语言为 `zh` |
+
+某些路径（如 API 路由、静态资源）不需要语言前缀，可以通过 `ignoreRedirectRoutes` 跳过重定向，详见[语言检测 → ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes)。
+
+## 路由配置
+
+启用 `localePathRedirect` 后，需要在路由中添加 `[lang]` 动态参数来接收语言前缀。
+
+### 约定式路由
+
+在 `routes/` 目录下创建 `[lang]` 目录：
+
+```
+routes/
+└── [lang]/
+    ├── layout.tsx    ← 可在此读取 params.lang
+    ├── page.tsx
+    └── about/
+        └── page.tsx
+```
+
+生成的路由结构：
+
+```
+/:lang          → page.tsx
+/:lang/about    → about/page.tsx
+```
+
+如果需要在布局或页面中读取当前语言参数：
+
+```tsx
+// routes/[lang]/layout.tsx
+import { Outlet, useParams } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  const { lang } = useParams();
+  // lang 为当前 URL 中的语言代码，如 'en'、'zh'
+  // 通常不需要手动使用，useModernI18n() 会自动管理
+  return <Outlet />;
+}
+```
+
+### 自定义路由
+
+:::info
+自定义路由仅在不使用 Modern.js 约定路由系统时才需要。大多数项目推荐使用约定式路由。
+:::
+
+如果使用自定义路由文件（`modern.routes.ts`），需要手动添加 `:lang` 参数：
+
+```tsx
+// modern.routes.ts
+import { Route, Routes, Outlet } from '@modern-js/runtime/router';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path=":lang" element={<Outlet />}>
+        <Route index element={<Home />} />
+        <Route path="about" element={<About />} />
+      </Route>
+    </Routes>
+  );
+}
+```
+
+## I18nLink 组件
+
+`I18nLink` 是语言感知的链接组件，会自动在目标路径前添加当前语言前缀，无需手动拼接。
+
+```tsx
+import { I18nLink } from '@modern-js/plugin-i18n/runtime';
+
+function Navigation() {
+  return (
+    <nav>
+      <I18nLink to="/">首页</I18nLink>
+      <I18nLink to="/about">关于</I18nLink>
+      <I18nLink to="/contact" replace>联系</I18nLink>
+    </nav>
+  );
+}
+```
+
+**当前语言为 `en` 时：**
+
+```
+<I18nLink to="/about">  →  实际链接：/en/about
+<I18nLink to="/">       →  实际链接：/en
+```
+
+**注意事项：**
+
+```tsx
+// ✅ 正确：不需要手动添加语言前缀
+<I18nLink to="/about">关于</I18nLink>
+
+// ❌ 错误：不要手动添加语言前缀，会导致 /en/en/about
+<I18nLink to="/en/about">关于</I18nLink>
+```
+
+`I18nLink` 继承自 `@modern-js/runtime/router` 的 `Link` 组件，支持 `replace`、`state`、`className` 等所有标准 Link props，完整 Props 类型见 [API 参考](./api.md#i18nlink-组件)。

package/docs/zh/guides/advanced-features/international.mdx

@@ -0,0 +1,29 @@
+---
+title: 国际化
+---
+
+# 国际化
+
+import I18nPluginIntroduce from '@site-docs/components/international/introduce';
+
+<I18nPluginIntroduce />
+
+## 从哪里开始？
+
+| 想做的事 | 文档 |
+| --- | --- |
+| 首次接入，跑通示例 | [快速开始](./international/quick-start.md) |
+| 了解完整的配置选项 | [配置说明](./international/configuration.md) |
+| 根据 URL / Cookie / Header 自动判断语言 | [语言检测](./international/locale-detection.md) |
+| 实现 `/en/about` 这类带语言前缀的路径 | [路由集成](./international/routing.md) |
+| 从远程服务或平台加载翻译资源 | [资源加载 → 自定义后端](./international/resource-loading.md#sdk-后端) |
+| SSR 场景、多入口、自定义实例 | [高级用法](./international/advanced.md) |
+| 查询 Hook / 组件 / 类型定义 | [API 参考](./international/api.md) |
+
+## 核心能力
+
+- **语言检测**：支持 URL 路径、Cookie、LocalStorage、请求头、浏览器设置等多种检测方式，可自由组合优先级
+- **资源加载**：支持 HTTP 静态文件、文件系统（SSR）、SDK 自定义函数三种后端，以及链式后端渐进加载
+- **路由集成**：自动添加语言路径前缀（`/en/about`），提供 `I18nLink` 组件处理语言感知导航
+- **SSR 支持**：服务端检测语言并注入到页面，客户端直接使用，避免语言闪烁
+- **TypeScript 支持**：完整类型定义，支持翻译键类型安全检查

package/docs/zh/guides/advanced-features/low-level.mdx

@@ -0,0 +1,48 @@
+---
+sidebar_position: 10
+---
+
+# 配置底层工具
+
+## 使用方式
+
+Modern.js 内部默认集成了 [TypeScript](https://www.typescriptlang.org/)、[Rspack](https://rspack.rs/)、[PostCSS](https://postcss.org/)、[SWC](https://swc.rs/) 等工具。通常情况下，默认配置能够满足大多业务开发需求。当有特殊需求时，可以通过底层配置来实现。
+
+以配置 Rspack 为例，只需要在 `modern.config.ts` 中添加 [`tools.rspack`](/configure/app/tools/rspack) 即可：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  tools: {
+    rspack: config => {
+      // 修改 Rspack 配置
+    },
+  },
+});
+```
+
+`tools` 命名空间下的配置都可以设置为 `Object` 或者 `Function`。
+
+值为 `Object` 时，会与内部默认配置进行合并，具体合并策略参考对应的配置选项文档（见下表）。
+
+值为 `Function` 时，第一个参数为内部的默认配置对象，可以直接修改这个对象不做返回，也可以返回一个新的对象或者合并后的对象作为最终结果。
+
+## 底层配置明细
+
+目前提供的底层配置如下表：
+
+| 底层工具           | 配置                                                                 |
+| ------------------ | -------------------------------------------------------------------- |
+| Rspack             | [tools.rspack](/configure/app/tools/rspack)                          |
+| Bundler Chain      | [tools.bundlerChain](/configure/app/tools/bundler-chain)             |
+| SWC                | [tools.swc](/configure/app/tools/swc)                                |
+| TypeScript Checker | [tools.tsChecker](/configure/app/tools/ts-checker)                   |
+| PostCSS            | [tools.postcss](/configure/app/tools/postcss)                        |
+| Less               | [tools.less](/configure/app/tools/less)                              |
+| Sass               | [tools.sass](/configure/app/tools/sass)                              |
+| CSS Extract        | [tools.cssExtract](/configure/app/tools/css-extract)                 |
+| CSS Loader         | [tools.cssLoader](/configure/app/tools/css-loader)                   |
+| Style Loader       | [tools.styleLoader](/configure/app/tools/style-loader)               |
+| Lightning CSS      | [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) |
+| Minify CSS         | [tools.minifyCss](/configure/app/tools/minify-css)                   |
+| Autoprefixer       | [tools.autoprefixer](/configure/app/tools/autoprefixer)              |
+| HTML Plugin        | [tools.htmlPlugin](/configure/app/tools/html-plugin)                 |

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

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

package/docs/zh/guides/advanced-features/page-performance/code-split.mdx

@@ -0,0 +1,81 @@
+---
+sidebar_position: 3
+---
+
+# 代码分割
+
+代码分割（code splitting）是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
+
+:::info
+使用 Modern.js [约定式路由](/guides/basic-features/routes/routes#约定式路由)时，默认会根据路由组件做代码分割，无需自行进行代码分割。
+:::
+
+- 动态 `import`
+- `React.lazy`
+- `loadable`
+
+## 动态 import
+
+使用动态 `import()` 语法，传入的 JS 模块将会被打包到单独的 JS 文件中。例如：
+
+```ts
+import('./math').then(math => {
+  console.log(math.add(16, 26));
+});
+```
+
+## React.lazy
+
+React 官方提供的组件代码分割的方式。
+
+:::caution
+`React.lazy` 通常配合 `<Suspense>` 使用，因此仅在 CSR 或 React 18+ 的 Streaming SSR 中可用。
+
+对于使用传统 SSR（字符串渲染）的项目，不支持 `React.lazy`，请使用 Loadable API。
+:::
+
+```tsx
+import React, { Suspense } from 'react';
+
+const OtherComponent = React.lazy(() => import('./OtherComponent'));
+const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
+
+function MyComponent() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <section>
+          <OtherComponent />
+          <AnotherComponent />
+        </section>
+      </Suspense>
+    </div>
+  );
+}
+```
+
+`React.lazy` 更多用法请见 [React 官网文档](https://zh-hans.react.dev/reference/react/lazy)。
+
+## Loadable
+
+在 Modern.js 中，可以从 `@modern-js/runtime/loadable` 中导出使用 Loadable API，示例如下：
+
+```tsx
+import loadable from '@modern-js/runtime/loadable';
+
+const OtherComponent = loadable(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return <OtherComponent />;
+}
+```
+
+Modern.js 开箱即用的支持在 SSR 中使用 `loadable`，无需再添加 Babel 插件，或是在 SSR 时向 HTML 中注入脚本。
+
+但需要注意的是，任何 Loadable API 在 SSR 中都不支持配合 `<Suspense>` 使用。
+
+:::info
+如果希望在 React 17 及以下的 CSR 项目中使用 `<Suspense>`，可以用 [loadable.lazy](https://loadable-components.com/docs/suspense/) 代替 `React.lazy`。
+:::
+
+更多用法请见 [Loadable API](/apis/app/runtime/utility/loadable)。

package/docs/zh/guides/advanced-features/page-performance/inline-assets.mdx

@@ -0,0 +1,162 @@
+---
+sidebar_position: 13
+---
+
+# 静态资源内联
+
+静态资源内联是一种优化网页性能的方法，它指的是将静态资源直接内联到 HTML 或 JS 文件中，而不是使用外部文件引用的方式。这样做的好处是减少了浏览器发起的请求数，从而提高页面的加载速度。
+
+不过，静态资源内联也有一些缺点，比如增加了单个文件的体积，可能会导致加载变慢。所以在实际应用中，需要根据具体情况来决定是否使用静态资源内联。
+
+Modern.js 默认会自动内联体积小于 10KB 的静态资源，但有时候你可能需要手动控制某些特殊资源，让其强制内联或者强制不内联，这篇文档阐述了如何进行精确地控制静态资源内联行为。
+
+## 自动内联
+
+默认情况下，当图片、字体、媒体等类型的文件体积小于阈值（默认为 10KB）时，Modern.js 会将资源进行内联处理，资源内联后，会被转换成一个 Base64 编码的字符串，不再会发送独立的 HTTP 请求。当文件体积大于或等于该阈值时，则会被作为单独的资源文件，通过独立的 HTTP 请求来加载。
+
+自动内联的体积阈值可以通过 [output.dataUriLimit](/configure/app/output/data-uri-limit) 配置项修改。例如，修改图片资源的阈值为 5000 字节，设置视频资源不内联：
+
+```ts
+export default {
+  output: {
+    dataUriLimit: {
+      image: 5000,
+      media: 0,
+    },
+  },
+};
+```
+
+## 强制内联
+
+你可以通过在引入资源时添加 `inline` URL 参数来强制内联该资源，无论该资源的体积是否小于阈值。
+
+```tsx
+import React from 'react';
+import img from './foo.png?inline';
+
+export default function Foo() {
+  return <img src={img} />;
+}
+```
+
+在上面这个例子中，`foo.png` 图片将始终被内联，无论该图片的大小是否大于阈值。
+
+除了 `inline` 参数以外，你也可以使用 `__inline` 参数来强制内联该资源：
+
+```tsx
+import img from './foo.png?__inline';
+```
+
+### 从 CSS 文件中引用
+
+当你在 CSS 文件中引用静态资源时，同样可以通过 `inline` 或 `__inline` 参数来强制内联资源。
+
+```css
+.foo {
+  background-image: url('./icon.png?inline');
+}
+```
+
+:::tip 你真的需要强制内联吗？
+内联体积过大的资源时，会显著增加页面的白屏时间或首次可交互时间，这会损害用户体验。并且当你将一个静态资源多次内联到 CSS 文件中时，base64 内容会重复注入，导致产物体积增大。因此，请酌情使用强制内联。
+:::
+
+## 强制不内联
+
+当你想把一些资源始终作为单独的资源文件来处理，无论该资源的体积多小时，你可以添加 `url` URL 参数来强制不内联该资源。
+
+```tsx
+import React from 'react';
+import img from './foo.png?url';
+
+export default function Foo() {
+  return <img src={img} />;
+}
+```
+
+在上面这个例子中，`foo.png` 图片将始终通过单独的资源文件加载，无论该图片的大小是否小于阈值。
+
+除了 `url` 参数以外，你也可以使用 `__inline=false` 参数来强制不内联该资源：
+
+```tsx
+import img from './foo.png?__inline=false';
+```
+
+### 从 CSS 文件中引用
+
+当你在 CSS 文件中引用静态资源时，同样可以通过 `url` 或 `__inline=false` 参数来强制不内联资源。
+
+```css
+.foo {
+  background-image: url('./icon.png?url');
+}
+```
+
+:::tip 你真的需要把资源排除内联吗？
+将资源排除内联将增加 Web App 需要加载的资源数量，这对于弱网环境，或是未开启 HTTP2 的场景下，将会降低资源加载效率，因此，请酌情使用强制不内联。
+:::
+
+## 内联 JS 文件
+
+除了将静态资源文件内联到 JS 文件里，Modern.js 也支持将 JS 文件内联到 HTML 文件中。
+
+只需要开启 [output.inlineScripts](/configure/app/output/inline-scripts) 配置项，构建生成的 JS 文件将不会被写入产物目录下，而是会直接内联到对应的 HTML 文件中。
+
+```ts
+export default {
+  output: {
+    inlineScripts: true,
+  },
+};
+```
+
+:::tip
+内联 JS 文件可能会导致 HTML 单文件体积过大，并且不利于静态资源缓存，请酌情使用。
+:::
+
+## 内联 CSS 文件
+
+你也可以将 CSS 文件内联到 HTML 文件中。
+
+只需要开启 [output.inlineStyles](/configure/app/output/inline-styles) 配置项，构建生成的 CSS 文件将不会被写入产物目录下，而是会直接内联到对应的 HTML 文件中。
+
+```ts
+export default {
+  output: {
+    inlineStyles: true,
+  },
+};
+```
+
+## 添加类型声明
+
+当你在 TypeScript 代码中使用 `?inline` 和 `?url` 等 URL 参数时，TypeScript 可能会提示该模块缺少类型定义：
+
+```
+TS2307: Cannot find module './logo.png?inline' or its corresponding type declarations.
+```
+
+此时你需要为这些 URL 参数添加类型声明，请在项目中创建 `src/global.d.ts` 文件，并添加以下类型声明：
+
+```ts
+declare module '*?inline' {
+  const content: string;
+  export default content;
+}
+
+declare module '*?inline' {
+  const content: string;
+  export default content;
+}
+
+declare module '*?__inline' {
+  const content: string;
+  export default content;
+}
+
+declare module '*?inline=false' {
+  const content: string;
+  export default content;
+}
+```

package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx

@@ -0,0 +1,101 @@
+---
+sidebar_position: 13
+---
+
+# 产物体积优化
+
+产物体积的优化在生产环境中是非常重要的，因为它直接影响到了线上的用户体验。在这篇文档中，我们将介绍在 Modern.js 中一些常见的产物体积优化方式。
+
+## 减少重复依赖
+
+在业务项目中，会存在某些第三方依赖被安装了多个版本的现象。重复依赖会导致包体积变大、构建速度变慢。
+
+我们可以通过社区中的一些工具来检测或消除重复依赖。
+
+- 如果你在使用 `pnpm >= 7.26.0`，可以使用 pnpm 自带的 [pnpm dedupe](https://pnpm.io/cli/dedupe) 命令来升级和消除其中的重复依赖。
+
+```bash
+pnpm dedupe
+```
+
+- 如果你在使用 `pnpm < 7.26.0` 版本，可以使用 [pnpm-deduplicate](https://github.com/ocavue/pnpm-deduplicate) 来分析出所有的重复依赖，并通过升级依赖或声明 [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) 进行版本合并。
+
+```bash
+npx pnpm-deduplicate --list
+```
+
+- 如果你在使用 `yarn`，可以使用 [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate) 来自动合并重复依赖：
+
+```bash
+npx yarn-deduplicate && yarn
+```
+
+## 使用更轻量的库
+
+建议将项目中体积较大的三方库替换为更轻量的库，比如将 [moment](https://momentjs.com/) 替换为 [day.js](https://day.js.org/)。
+
+如果你需要找出项目中体积较大的三方库，可以在执行构建时添加 `BUNDLE_ANALYZE=true` 环境变量：
+
+```bash
+BUNDLE_ANALYZE=true pnpm build
+```
+
+这将生成一个打包分析报告，帮助你识别体积较大的依赖。
+
+## 提升 Browserslist 范围
+
+Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
+
+Modern.js 默认的 [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.html) 配置为：
+
+```js
+['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
+```
+
+比如只兼容 Chrome 100 以上的浏览器，可以改成：
+
+```js
+['Chrome >= 100'];
+```
+
+:::tip
+请阅读 [Browserslist 配置](/guides/advanced-features/compatibility.html) 章节来了解更多关于 Browserslist 的用法。
+:::
+
+## 按需引入 polyfill
+
+在明确第三方依赖不需要额外 polyfill 的情况下，你可以将 [output.polyfill](/configure/app/output/polyfill.html) 设置为 `usage`。
+
+在 `usage` 模式下，Modern.js 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
+
+```js
+export default {
+  output: {
+    polyfill: 'usage',
+  },
+};
+```
+
+:::tip
+请阅读 [浏览器兼容性](/guides/advanced-features/compatibility) 章节来了解更多关于 polyfill 的用法。
+:::
+
+## 使用图片压缩
+
+在一般的前端项目中，图片资源的体积往往是项目产物体积的大头，因此如果能尽可能精简图片的体积，那么将会对项目的打包产物体积起到明显的优化效果。你可以在 Modern.js 中注册插件来启用图片压缩功能:
+
+```js title="modern.config.ts"
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
+
+export default {
+  builderPlugins: [pluginImageCompress()],
+};
+```
+
+详见 [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)。
+
+## 代码拆包
+
+良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
+
+在 Modern.js 中内置了[多种拆包策略](https://v2.rsbuild.rs/zh/guide/optimization/code-splitting)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。

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

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

package/docs/zh/guides/advanced-features/server-monitor/_meta.json

@@ -0,0 +1 @@
+["monitors", "logger", "metrics"]

package/docs/zh/guides/advanced-features/server-monitor/logger.mdx

@@ -0,0 +1,21 @@
+# 日志事件
+
+日志事件是由 Modern.js 分发的，类型为 `log` 的事件。
+
+## 内置事件
+
+基于服务端运行逻辑，Modern.js 在内部提供了以下日志事件：
+
+| 阶段          | 消息                                         | Level |
+| ------------- | -------------------------------------------- | ----- |
+| RENDER_HTML   | App Render To HTML                           | error |
+| RENDER_STREAM | An error occurs during streaming SSR         | error |
+| RENDER_SHELL  | An error occurs during streaming render shell | error |
+
+## 内置 Monitor
+
+import InternalLogger from '@site-docs/components/internal-logger.mdx';
+
+<InternalLogger />
+
+

package/docs/zh/guides/advanced-features/server-monitor/metrics.mdx

@@ -0,0 +1,42 @@
+# 指标事件
+
+指标事件是由 Monitors 分发，类型为 `timing` 或 `counter` 的事件。
+
+## 内置事件
+
+当项目开启 SSR 时，我们需要关注 Server 端各阶段耗时，并且有能力对 Server 端的问题进行定位。
+
+基于服务端运行逻辑，Modern.js 在内部提供了以下指标事件：
+
+| Key                      | 描述             |
+| ------------------------ | ---------------  |
+| server-handle-request    | Modern.js Server 处理请求单次耗时                                                           |
+| ssr-render-shell         | [SSR]在使用 Streaming SSR 时， React 将渲染一个套壳(shell)优先传输。这里表明套壳渲染完成时间                              |
+| ssr-render-html          | [SSR] React 将组件树渲染成 html 所消耗的时间，通常不会超过 50ms                                                         |
+| server-middleware        | Modern.js 自定义 Server `Middleware` 执行总时                                                                           |
+| server-loader            | Server 端整体 Data Loader 耗时                                                                                     |
+| server-loader-#id        | Server 端各个 Data Loader 耗时                                                                                      |
+| server-loader-navigation | 前端导航时，服务端 Data Loader 的整体耗时                                                                              |
+
+Modern.js 服务端流程如图所示：
+
+![server](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/edenx-website/e374def0-c179-40aa-9cfe-e82e181663b1.jpeg)
+
+
+## 内置 Monitor
+
+import InternalMetrics from '@site-docs/components/internal-metrics.mdx';
+
+<InternalMetrics />
+
+## Server-Timing
+
+在 Modern.js 中，服务端还会额外将各阶段指标作为 Server-Timing 注入到 HTML 响应头中。
+
+在浏览器中，开发者可以通过 [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance) 获取：
+
+```ts
+const navigation = performance.getEntriesByType('navigation')[0];
+const serverTiming = navigation.serverTiming;
+console.log(serverTiming);
+```