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

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

@@ -0,0 +1,134 @@
+---
+title: Routing Integration
+---
+
+# Routing Integration
+
+## Enable Locale Path Prefixes
+
+After setting `localePathRedirect: true`, the plugin takes over language recognition and navigation in the URL. It does four things:
+
+1. **Recognizes the locale prefix in the URL**: When visiting `/zh/detail`, the plugin extracts `zh` from the path as the current language.
+2. **Automatically redirects paths without prefixes**: When visiting `/detail`, it first detects the language with the detector. If detection fails, it uses `fallbackLanguage`, then redirects to `/en/detail` or `/zh/detail`.
+3. **Synchronizes the URL when switching language**: If the current URL is `/en/detail`, calling `changeLanguage('zh')` automatically changes the URL to `/zh/detail`, instead of only changing i18next's internal language state.
+4. **Avoids duplicate path detection**: The plugin automatically removes `path` from the i18next detector `order`, because path language recognition is already handled by the plugin itself.
+
+```ts
+// modern.config.ts
+i18nPlugin({
+  localeDetection: {
+    localePathRedirect: true,
+    languages: ['zh', 'en'],
+    fallbackLanguage: 'en',
+  },
+});
+```
+
+**Result:**
+
+| Visited path | Result |
+| --- | --- |
+| `/about` | Redirects to `/en/about` |
+| `/en/about` | Visits normally, language is `en` |
+| `/zh/about` | Visits normally, language is `zh` |
+
+Some paths, such as API routes and static assets, do not need locale prefixes. Use `ignoreRedirectRoutes` to skip redirects. See [Locale Detection -> ignoreRedirectRoutes](./locale-detection.md#ignoreredirectroutes).
+
+## Route Configuration
+
+After enabling `localePathRedirect`, add a `[lang]` dynamic parameter in routes to receive the locale prefix.
+
+### File-system Routes
+
+Create a `[lang]` directory under `routes/`:
+
+```
+routes/
+└── [lang]/
+    ├── layout.tsx    <- You can read params.lang here.
+    ├── page.tsx
+    └── about/
+        └── page.tsx
+```
+
+Generated route structure:
+
+```
+/:lang          -> page.tsx
+/:lang/about    -> about/page.tsx
+```
+
+If you need to read the current language parameter in a layout or page:
+
+```tsx
+// routes/[lang]/layout.tsx
+import { Outlet, useParams } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  const { lang } = useParams();
+  // lang is the language code in the current URL, such as 'en' or 'zh'.
+  // Usually you do not need to use it manually. useModernI18n() manages it automatically.
+  return <Outlet />;
+}
+```
+
+### Custom Routes
+
+:::info
+Custom routes are only needed when you are not using the Modern.js file-system routing system. File-system routes are recommended for most projects.
+:::
+
+If you use a custom route file (`modern.routes.ts`), add the `:lang` parameter manually:
+
+```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 Component
+
+`I18nLink` is a locale-aware link component. It automatically adds the current locale prefix to the target path, so you do not need to concatenate it manually.
+
+```tsx
+import { I18nLink } from '@modern-js/plugin-i18n/runtime';
+
+function Navigation() {
+  return (
+    <nav>
+      <I18nLink to="/">Home</I18nLink>
+      <I18nLink to="/about">About</I18nLink>
+      <I18nLink to="/contact" replace>Contact</I18nLink>
+    </nav>
+  );
+}
+```
+
+**When the current language is `en`:**
+
+```
+<I18nLink to="/about">  ->  Actual link: /en/about
+<I18nLink to="/">       ->  Actual link: /en
+```
+
+**Notes:**
+
+```tsx
+// Correct: no need to add the locale prefix manually.
+<I18nLink to="/about">About</I18nLink>
+
+// Incorrect: do not add the locale prefix manually, or it becomes /en/en/about.
+<I18nLink to="/en/about">About</I18nLink>
+```
+
+`I18nLink` extends the `Link` component from `@modern-js/runtime/router` and supports all standard Link props such as `replace`, `state`, and `className`. For the full Props type, see [API Reference](./api.md#i18nlink-component).

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

@@ -0,0 +1,29 @@
+---
+title: Internationalization
+---
+
+# Internationalization
+
+import I18nPluginIntroduce from '@site-docs/components/international/introduce';
+
+<I18nPluginIntroduce />
+
+## Where to start?
+
+| What you want to do | Documentation |
+| --- | --- |
+| Integrate for the first time and run an example | [Quick Start](./international/quick-start.md) |
+| Learn all configuration options | [Configuration](./international/configuration.md) |
+| Detect language from URL / Cookie / Header | [Locale Detection](./international/locale-detection.md) |
+| Implement paths with locale prefixes, such as `/en/about` | [Routing Integration](./international/routing.md) |
+| Load translation resources from a remote service or platform | [Resource Loading -> Custom Backend](./international/resource-loading.md#custom-backend) |
+| SSR, multiple entries, or custom instances | [Advanced Usage](./international/advanced.md) |
+| Look up Hooks / components / type definitions | [API Reference](./international/api.md) |
+
+## Core Capabilities
+
+- **Locale detection**: Supports detection from URL path, Cookie, LocalStorage, request headers, browser settings, and other sources, with configurable priority.
+- **Resource loading**: Supports HTTP static files, file system loading for SSR, custom SDK functions, and chained backend progressive loading.
+- **Routing integration**: Automatically adds locale path prefixes such as `/en/about`, and provides the `I18nLink` component for locale-aware navigation.
+- **SSR support**: Detects the language on the server and injects it into the page so the client can reuse it directly and avoid language flicker.
+- **TypeScript support**: Provides complete type definitions and supports type-safe translation keys.

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

@@ -0,0 +1,50 @@
+---
+sidebar_position: 10
+---
+
+# Low-Level Tools
+
+## Usage
+
+Modern.js internally integrates tools such as [TypeScript](https://www.typescriptlang.org/), [Rspack](https://rspack.rs/), [PostCSS](https://postcss.org/), [SWC](https://swc.rs/) by default.
+
+Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
+
+Take configuring Rspack as an example, just add [tools.rspack](/configure/app/tools/rspack) to the modern.config.ts:
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  tools: {
+    rspack: config => {
+      // Modify Rspack configuration
+    },
+  },
+});
+```
+
+Configurations in the `tools` can be set to `Object` or `Function`.
+
+When the value is `Object`, it will be merged with the default configuration. For the specific merging strategy, refer to the configuration options document (see table below).
+
+When the value is `Function`, the first parameter is the default configuration value. You can directly modify this object without returning it, or you can return a new object or a merged object as the final result.
+
+## Low-level Configuration Details
+
+Currently provided is as follows:
+
+| Tools              | Config                                                               |
+| ------------------ | -------------------------------------------------------------------- |
+| 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/en/guides/advanced-features/page-performance/_meta.json

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

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

@@ -0,0 +1,81 @@
+---
+sidebar_position: 3
+---
+
+# Code Splitting
+
+Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:
+
+:::info
+When using Modern.js [Conventional routing](/guides/basic-features/routes/routes#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.
+:::
+
+- dynamic `import`
+- `React.lazy`
+- `loadable`
+
+## Dynamic import
+
+When using dynamic `import()`, the JS modules passed to this API will be bundled as a separate JS file. For example:
+
+```ts
+import('./math').then(math => {
+  console.log(math.add(16, 26));
+});
+```
+
+## React.lazy
+
+The official way provided by React to split component code.
+
+:::caution
+`React.lazy` is typically used together with `<Suspense>`, hence it is only available in CSR or React 18+ Streaming SSR.
+
+For projects that use Traditional SSR（renderToString）, `React.lazy` is not supported. Please use the Loadable API instead.
+:::
+
+```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>
+  );
+}
+```
+
+For details, see [React lazy](https://react.dev/reference/react/lazy).
+
+## Loadable
+
+In Modern.js, you can use the Loadable API, which is exported from `@modern-js/runtime/loadable`. Here's an example:
+
+```tsx
+import loadable from '@modern-js/runtime/loadable';
+
+const OtherComponent = loadable(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return <OtherComponent />;
+}
+```
+
+With the out-of-the-box support of `loadable` in SSR by Modern.js, you no longer need to add Babel plugins or inject scripts into HTML during SSR.
+
+However, it's important to note that any Loadable API in SSR does not support the use of `<Suspense>`.
+
+:::info
+If you want to use `<Suspense>` in CSR projects with React 17 and below, you can substitute `React.lazy` with `loadable.lazy`.
+:::
+
+For details, see [Loadable API](/apis/app/runtime/utility/loadable).

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

@@ -0,0 +1,163 @@
+---
+sidebar_position: 13
+---
+
+# Inline Static Assets
+
+Inline static assets refer to the practice of including the content of a static asset directly in a HTML or JS file, instead of linking to an external file. This can improve the performance of a website by reducing the number of HTTP requests that the browser has to make to load the page.
+
+However, static assets inlining also has some disadvantages, such as increasing the size of a single file, which may lead to slower loading. Therefore, in the actual scenario, it is necessary to decide whether to use static assets inlining according to the specific situation.
+
+Modern.js will automatically inline static assets that are less than 10KB, but sometimes you may need to manually control assets to force them to be inlined or not, and this document explains how to precisely control the inlining behavior of static assets.
+
+## Automatic Inlining
+
+By default, Modern.js will inline assets when the file size of is less than a threshold (the default is 10KB). When inlined, the asset will be converted to a Base64 encoded string and will no longer send a separate HTTP request. When the file size is greater than this threshold, it is loaded as a separate file with a separate HTTP request.
+
+The threshold can be modified with the [output.dataUriLimit](/configure/app/output/data-uri-limit) config. For example, set the threshold of images to 5000 Bytes, and set media assets not to be inlined:
+
+```ts
+export default {
+  output: {
+    dataUriLimit: {
+      image: 5000,
+      media: 0,
+    },
+  },
+};
+```
+
+## Force Inlining
+
+You can force an asset to be inlined by adding the `inline` query when importing the asset, regardless of whether the asset's size is smaller than the size threshold.
+
+```tsx
+import React from 'react';
+import img from '. /foo.png?inline';
+
+export default function Foo() {
+  return <img src={img} />;
+}
+```
+
+In the above example, the `foo.png` image will always be inlined, regardless of whether the size of the image is larger than the threshold.
+
+In addition to the `inline` query, you can also use the `__inline` query to force inlining of the asset:
+
+```tsx
+import img from '. /foo.png?__inline';
+```
+
+### Referenced from CSS file
+
+When you reference a static asset in your CSS file, you can also force inline the asset with the `inline` or `__inline` queries.
+
+```css
+.foo {
+  background-image: url('. /icon.png?inline');
+}
+```
+
+:::tip Do you really need to force inlining?
+Inline large assets will significantly increase the first paint time or first contentful paint time of a page, which will hurt user experience. And when you inline a static asset multiple times into a CSS file, the base64 content will be repeatedly injected, causing the bundle size to grow . Please use forced inlining with caution.
+:::
+
+## Force no inlining
+
+When you want to always treat some assets as separate files, no matter how small the asset is, you can add the `url` query to force the asset not to be inlined.
+
+```tsx
+import React from 'react';
+import img from '. /foo.png?url';
+
+export default function Foo() {
+  return <img src={img} />;
+}
+```
+
+In the above example, the `foo.png` image will always be loaded as a separate file, even if the size of the image is smaller than the threshold.
+
+In addition to the `url` query, you can also use the `__inline=false` query to force the asset not to be inlined:
+
+```tsx
+import img from '. /foo.png?__inline=false';
+```
+
+### Referenced from CSS file
+
+When you reference a static asset in your CSS file, you can also force the asset not to be inlined with `url` or `__inline=false` queries.
+
+```css
+.foo {
+  background-image: url('. /icon.png?url');
+}
+```
+
+:::tip Do you really need to exclude assets from inlining?
+Excluding assets from inlining will increase the number of assets that the Web App needs to load. This will reduce the efficiency of loading assets in a weak network environment or in scenarios where HTTP2 is not enabled. Please use force no Inline with caution.
+
+:::
+
+## Inline JS files
+
+In addition to inlining static assets into JS files, Modern.js also supports inlining JS files into HTML files.
+
+Just enable the [output.inlineScripts](/configure/app/output/inline-scripts) config, and the generated JS files will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
+
+```ts
+export default {
+  output: {
+    inlineScripts: true,
+  },
+};
+```
+
+:::tip
+Inline JS files may cause the single HTML file to be too large, and it will break the HTTP caching. Please use it with caution.
+:::
+
+## Inline CSS files
+
+You can also inline CSS files into HTML files.
+
+Just enable the [output.inlineStyles](/configure/app/output/inline-styles) config, the generated CSS file will not be written into the output directory, but will be directly inlined to the corresponding in the HTML file.
+
+```ts
+export default {
+  output: {
+    inlineStyles: true,
+  },
+};
+```
+
+## Add Type Declaration
+
+When you use URL queries such as `?inline` and `?url` in TypeScript code, TypeScript may prompt that the module is missing a type definition:
+
+```
+TS2307: Cannot find module './logo.png?inline' or its corresponding type declarations.
+```
+
+To fix this, you can add type declarations for these URL queries, please create `src/global.d.ts` file and add the following type declarations:
+
+```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/en/guides/advanced-features/page-performance/optimize-bundle.mdx

@@ -0,0 +1,101 @@
+---
+sidebar_position: 13
+---
+
+# Bundle Size Optimization
+
+Bundle size optimization is an important part of optimizing your production environment because it directly affects the user experience. In this document, we will introduce some common bundle size optimization methods in Modern.js.
+
+## Reduce duplicate dependencies
+
+In real projects, there will be some third-party dependencies installed with multiple versions. Duplicate dependencies can lead to larger bundles and slower builds.
+
+We can detect or eliminate duplicate dependencies with some community tools.
+
+- If you are using `pnpm >= 7.26.0`, you can use the [pnpm dedupe](https://pnpm.io/cli/dedupe) command to upgrade and eliminate duplicate dependencies.
+
+```bash
+pnpm dedupe
+```
+
+- If you are using `pnpm < 7.26.0`, you can use [pnpm-deduplicate](https://github.com/ocavue/pnpm-deduplicate) to analyze all duplicate dependencies, then update dependencies or declare [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) to merge duplicated dependencies.
+
+```bash
+npx pnpm-deduplicate --list
+```
+
+- If you are using `yarn`, you can use [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate) to automatically merge duplicated dependencies:
+
+```bash
+npx yarn-deduplicate && yarn
+```
+
+## Use lightweight libraries
+
+It is recommended to using lightweight libraries in your project, such as replacing [moment](https://momentjs.com/) with [day.js](https://day.js.org/).
+
+If you want to find out the large libraries in the project, you can add the `BUNDLE_ANALYZE=true` environment variable when building:
+
+```bash
+BUNDLE_ANALYZE=true pnpm build
+```
+
+This will generate a bundle analysis report to help you identify large dependencies.
+
+## Adjust Browserslist
+
+Modern.js will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.
+
+Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.html) config is:
+
+```js
+['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
+```
+
+For example, if you only need to be compatible with browsers above Chrome 100, you can change it to:
+
+```js
+['Chrome >= 100'];
+```
+
+:::tip
+Please read the [Browserslist configuration](/guides/advanced-features/compatibility.html) chapter to know more about the usage of Browserslist.
+:::
+
+## Usage polyfill
+
+When it is clear that third-party dependencies do not require additional polyfills, you can set [output.polyfill](/configure/app/output/polyfill.html) to `usage`.
+
+In `usage` mode, Modern.js analyzes the syntax used in the source code and injects the required polyfill code on demand to reduce the size of polyfill.
+
+```js
+export default {
+  output: {
+    polyfill: 'usage',
+  },
+};
+```
+
+:::tip
+Please read the [Browser Compatibility](/guides/advanced-features/compatibility) chapter to know more about the usage of Browserslist.
+:::
+
+## Image Compression
+
+In general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in Modern.js:
+
+```ts title="modern.config.ts"
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
+
+export default {
+  builderPlugins: [pluginImageCompress()],
+};
+```
+
+See details in [plugin-image-compress](https://github.com/rspack-contrib/rsbuild-plugin-image-compress).
+
+## Split Chunk
+
+A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
+
+A variety of [chunk splitting strategies](https://v2.rsbuild.rs/guide/optimization/code-splitting) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.

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

@@ -0,0 +1,54 @@
+# React Compiler
+
+The React Compiler is an experimental compiler introduced in React 19 that can automatically optimize your React code.
+
+Before starting to use the React Compiler, it is recommended to read the [React Compiler documentation](https://zh-hans.react.dev/learn/react-compiler) to understand its features, current status, and usage.
+
+## How to Use
+
+### React 19
+
+If you are using React 19, Modern.js has built-in support for React Compiler, and no additional configuration is required.
+
+### React 18
+
+If you are using React 18, you need to configure it as follows:
+
+1. Install `react-compiler-runtime` to allow the compiled code to run on versions before 19:
+
+```bash
+npm install react-compiler-runtime
+```
+
+2. Install `babel-plugin-react-compiler`:
+
+```bash
+npm install babel-plugin-react-compiler
+```
+
+3. Register the Babel plugin in your Modern.js configuration file:
+
+```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()],
+});
+```
+
+> For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)

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

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

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

@@ -0,0 +1,19 @@
+# Logs Events
+
+Log events are distributed by Modern.js as events of type `log`.
+
+## Built-in Events
+
+Based on server-side runtime logic, Modern.js provides the following log events:
+
+| Stage           | Message                                      | 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 |
+
+## Built-in Monitor
+
+import InternalLogger from '@site-docs-en/components/internal-logger.mdx';
+
+<InternalLogger />

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

@@ -0,0 +1,41 @@
+# Metrics Events
+
+Metric events are distributed by Monitors as events of type `timing` or `counter`.
+
+## Built-in Events
+
+When SSR is enabled, we need to monitor server-side phase durations and have the capability to diagnose server-side issues.
+
+Based on server-side runtime logic, Modern.js provides the following metric events:
+
+| Key                      | Description              |
+| ------------------------ | ------------------------ |
+| server-handle-request    | Modern.js Server request handling duration                          |
+| ssr-render-shell         | [SSR] When using Streaming SSR, React renders a shell for early streaming. This marks shell rendering completion time |
+| ssr-render-html          | [SSR] Time taken by React to render component tree to HTML (typically under 50ms) |
+| server-middleware        | Total execution time of Modern.js custom server middlewares         |
+| server-loader            | Server-side Data Loader total duration                          |
+| server-loader-#id        | Individual Data Loader durations on server-side                 |
+| server-loader-navigation | Server-side Data Loader duration during client navigation       |
+
+Modern.js server workflow diagram:
+
+![server](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/edenx-website/e374def0-c179-40aa-9cfe-e82e181663b1.jpeg)
+
+## Built-in Monitor
+
+import InternalMetrics from '@site-docs-en/components/internal-metrics.mdx';
+
+<InternalMetrics />
+
+## Server-Timing
+
+Modern.js injects phase metrics as Server-Timing headers into HTML responses.
+
+Developers can retrieve these metrics using the [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance) in browsers:
+
+```ts
+const navigation = performance.getEntriesByType('navigation')[0];
+const serverTiming = navigation.serverTiming;
+console.log(serverTiming);
+```