fix: adjust structure

Author: 2heal1

apps/website-new/docs/en/_meta.json renamed to apps/website-new/docs/en/_nav.json

@@ -13,24 +13,24 @@ In SSR scenarios, `useEffect` does not execute. This behavior means that under n
 
 To support this functionality, mainstream frameworks typically pre-fetch data using the `data loader` provided by React Router and inject it into the route component. The route component then retrieves the data using [useLoaderData](https://reactrouter.com/api/hooks/useLoaderData#useloaderdata) for rendering.
 
-This approach heavily relies on routing functionality and cannot be used directly with Module Federation.
+This approach heavily relies on routing functionality and cannot be used directly with {props.name || 'Module Federation'}.
 
-To solve this problem, Module Federation provides **component-level** data fetching capabilities, allowing developers to fetch data and render components in SSR scenarios.
+To solve this problem, {props.name || 'Module Federation'} provides **component-level** data fetching capabilities, allowing developers to fetch data and render components in SSR scenarios.
 
 :::tip What is component-level?
-The use of Module Federation can be broadly divided into two parts: components (functions) and applications. The difference between them is whether they include *routing* functionality.
+The use of {props.name || 'Module Federation'} can be broadly divided into two parts: components (functions) and applications. The difference between them is whether they include *routing* functionality.
 :::
 
 ## How to Use
 
 Different actions are required depending on the role.
 
 ### Producer
-::: info Note
-Producers can use [Rslib](../../basic/rsbuild#ssr) and [Modern.js](../../framework/modernjs) to generate components.
 
-However, it's important to note that because the data in "Data Fetching" is injected by the consumer, if a component uses "Data Fetching", its exported non-MF components cannot be isomorphic with the MF components.
-:::
+import React from 'react';
+import ProviderTip from '@components/en/data-fetch/provider-tip';
+
+{props.providerTip || React.createElement(ProviderTip)}
 
 Each exposed module can have a corresponding `.data` file with the same name. These files can export a loader function, which we call a Data Loader. It executes before the corresponding `expose` component renders, providing data to the component. Here is an example:
 
@@ -84,7 +84,7 @@ export default List;
 
 If you use Modern.js to develop a producer, and that producer's page is also accessed directly, you can use the [Data Loader](https://modernjs.dev/guides/basic-features/data/data-fetch.html) provided by Modern.js to inject data.
 
-Its usage is almost identical to Module Federation's, except for the function name. This makes it easy to consume the Data Loader in the producer. Here's an example:
+Its usage is almost identical to {props.name || 'Module Federation'}'s, except for the function name. This makes it easy to consume the Data Loader in the producer. Here's an example:
 
 *   Create a `page.data.ts` file in the producer's page directory and export a function named `loader`:
 
@@ -97,7 +97,7 @@ export const loader = fetchData
 export type {Data}
 ```
 
-*   Consume this data on the producer's `page`:
+* Consume this data on the producer's `page`:
 
 ```tsx title="page.tsx"
 import { useLoaderData } from '@modern-js/runtime/router';
@@ -121,48 +121,10 @@ export default Index;
 ```
 
 ### Consumer
-::: info Note
-In SSR scenarios, this can only be used with [Modern.js](../../framework/modernjs).
-:::
 
-In the consumer, we need to use the [createLazyComponent](../../../practice/bridge/react-bridge#createlazycomponent) API to load the remote component and fetch its data.
-
-```tsx
-import { getInstance } from '@module-federation/enhanced/runtime';
-import { createLazyComponent, ERROR_TYPE, lazyLoadComponentPlugin } from '@module-federation/bridge-react';
-
-const instance = getInstance();
-instance.registerPlugins([lazyLoadComponentPlugin()]);
-
-const List = instance.createLazyComponent({
-  loader: () => {
-    return import('remote/List');
-  },
-  loading: 'loading...',
-  export: 'default',
-  fallback: ({error,errorType,dataFetchMapKey}) => {
-    console.error(error)
-    if(errorType === ERROR_TYPE.LOAD_REMOTE){
-      return <div>load remote failed</div>
-    }
-    if(errorType === ERROR_TYPE.DATA_FETCH){
-      return <div>data fetch failed, the dataFetchMapKey key is: {dataFetchMapKey}</div>
-    }
-    return <div>error type is unknown</div>;
-  },
-});
-
-const Index = (): JSX.Element => {
-  return (
-    <div>
-      <h1>Basic usage with data fetch</h1>
-      <List />
-    </div>
-  );
-};
+import Consumer from '@components/en/data-fetch/consumer';
 
-export default Index;
-```
+{props.consumer || React.createElement(Consumer)}
 
 ### Loader Function
 
@@ -184,7 +146,7 @@ The loader function can be executed on the server or in the browser. A loader fu
 
 In CSR applications, the loader function is executed in the browser, so they are all Client Loaders by default.
 
-In SSR applications, the loader function is only executed on the server, so they are all Server Loaders by default. In SSR, Module Federation directly calls the corresponding loader function on the server. When switching routes in the browser, Module Federation sends an HTTP request to the SSR service, which also triggers the loader function on the server.
+In SSR applications, the loader function is only executed on the server, so they are all Server Loaders by default. In SSR, {props.name || 'Module Federation'} directly calls the corresponding loader function on the server. When switching routes in the browser, {props.name || 'Module Federation'} sends an HTTP request to the SSR service, which also triggers the loader function on the server.
 
 :::note NOTE
 
@@ -203,7 +165,7 @@ By default, in SSR applications, the loader function is only executed on the ser
 1.  To reduce network consumption in the browser by directly requesting the data source.
 2.  The application has a data cache in the browser and does not want to request data from the SSR service.
 
-Module Federation supports adding an additional `.data.client` file in SSR applications, which also exports a named loader. In this case, if the Data Loader on the server fails and falls back, or when switching routes in the browser, the application will execute this loader function in the browser like a CSR application, instead of sending another data request to the SSR service.
+{props.name || 'Module Federation'} supports adding an additional `.data.client` file in SSR applications, which also exports a named loader. In this case, if the Data Loader on the server fails and falls back, or when switching routes in the browser, the application will execute this loader function in the browser like a CSR application, instead of sending another data request to the SSR service.
 
 ```ts title="List.data.client.ts"
 import cache from 'my-cache';

apps/website-new/docs/en/guide/basic/data-fetch/index.mdx

@@ -2,7 +2,10 @@
 
 The `prefetch` function is used to pre-fetch resources and **data** for remote modules, thereby improving application performance and user experience. By pre-loading required content before a user accesses a feature, waiting times can be significantly reduced.
 
-> This API requires the [`lazyLoadComponentPlugin` to be registered](../../../practice/bridge/react-bridge#register-lazyloadcomponentplugin) before it can be used.
+import React from 'react';
+import PrefetchTip from '@components/en/data-fetch/prefetch-tip';
+
+{props.prefetchTip || React.createElement(PrefetchTip)}
 
 ## When to Use
 
@@ -36,39 +39,8 @@ interface FederationHost {
 
 Suppose we have a remote application `shop` that exposes a `Button` component, and this component is associated with a data fetch function.
 
-### Scenario 1: Prefetching Data Only
-
-When a user hovers over a link that will navigate to the shop page, we can prefetch the data needed for that page.
-
-```ts
-import { getInstance } from '@module-federation/runtime';
-
-const instance = getInstance();
-
-const handleMouseEnter = () => {
-  instance.prefetch({
-    id: 'shop/Button',
-    dataFetchParams: { productId: '12345' },
-  });
-};
-```
+import PrefetchDemo from '@components/en/data-fetch/prefetch-demo'
 
-### Scenario 2: Prefetching Data and Preloading Component Resources
-
-For further optimization, we can download the component's JS and CSS files at the same time as prefetching the data.
-
-```ts
-import { getInstance } from '@module-federation/runtime';
-
-const instance = getInstance();
-
-const handleMouseEnter = () => {
-  instance.prefetch({
-    id: 'shop/Button',
-    dataFetchParams: { productId: '12345' },
-    preloadComponentResource: true,
-  });
-};
-```
+{props.prefetchDemo || React.createElement(PrefetchDemo)}
 
 By using `prefetch` flexibly, you can finely control the timing of resource loading based on your application's specific scenarios and user behavior, thereby optimizing application performance.

apps/website-new/docs/en/guide/basic/data-fetch/prefetch.mdx

@@ -9,4 +9,4 @@ Failed to load resource during the runtime process, which may be caused by netwo
 
 ## Solutions
 
-check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](en/plugin/plugins/retry-plugin.html).
+check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](/plugin/plugins/retry-plugin.html).

apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx

@@ -1,5 +1,9 @@
 # 数据获取
 
+import React from 'react';
+import ProviderTip from '@components/zh/data-fetch/provider-tip';
+import Consumer from '@components/zh/data-fetch/consumer';
+
 :::tip
 Data Loader 同时支持 SSR 和 CSR 两种场景！
 
@@ -13,24 +17,21 @@ SSR 场景中， `useEffect` 不会执行，这一行为导致常规情况下，
 
 为了支持这一功能，主流框架一般会基于 React Router 提供的 `data loader` 预取数据，并注入给路由组件，路由组件通过 [useLoaderData](https://reactrouter.com/api/hooks/useLoaderData#useloaderdata) 获取数据并渲染。
 
-这一行为强依赖路由功能，在 Module Federation 下就无法正常使用。
+这一行为强依赖路由功能，在 {props.name || 'Module Federation'} 下就无法正常使用。
 
 为了解决这一问题，Module Federation 提供了**组件**级别数据获取能力，以便开发者可以在 SSR 场景下获取数据并渲染组件。
 
 :::tip 什么是组件级别？
-Module Federation 的使用大体分为两种部分：组件（函数）、应用。两者的区别在于是否带有*路由*功能。
+{props.name || 'Module Federation'} 的使用大体分为两种部分：组件（函数）、应用。两者的区别在于是否带有*路由*功能。
 :::
 
 ## 如何使用
 
 根据角色的不同，需要做不同的行为。
 
 ### 生产者
-::: info 注意
-生产者可以使用 [Rslib](../../basic/rsbuild#ssr) 和 [Modern.js](../../framework/modernjs) 来生成组件。
 
-不过需要注意的是，因为「数据获取」中的数据由消费者注入。因此如果在组件中使用了「数据获取」，那么其导出的非 MF 组件无法与 MF 组件保持同构。
-:::
+{props.providerTip || React.createElement(ProviderTip)}
 
 每个 expose 模块都可以有一个同名的 `.data` 文件。这些文件可以导出一个 loader 函数，我们称为 Data Loader，它会在对应的 `expose` 组件渲染之前执行，为组件提供数据。如下面示例：
 
@@ -80,11 +81,11 @@ const List = (props: {
 export default List;
 ```
 
-##### 生产者消费自身数据
+#### 生产者消费自身数据
 
 如果使用了 Modern.js 来开发生产者，并且该生产者页面也会单独访问。那么可以利用 Modern.js 提供的 [Data Loader](https://modernjs.dev/zh/guides/basic-features/data/data-fetch.html) 来注入数据。
 
-其用法与 Module Federation 除了函数名称外，基本一致。因此你可以很方便的在生产者消费 Data Loader，示例如下：
+其用法与 {props.name || 'Module Federation'} 除了函数名称外，基本一致。因此你可以很方便的在生产者消费 Data Loader，示例如下：
 
 * 在生产者页面创建 `page.data.ts` 文件，导出名为 `loader` 的函数：
 
@@ -120,71 +121,31 @@ export default Index;
 
 ```
 
-#### 消费者
-::: info 注意
-SSR 场景中，只能在 [Modern.js](../../framework/modernjs) 中使用。
-:::
-
-在消费者中，我们需要通过 [createLazyComponent](../../../practice/bridge/react-bridge#createlazycomponent) API 来加载远程组件，并获取数据。
-
-```tsx
-import { getInstance } from '@module-federation/enhanced/runtime';
-import { createLazyComponent, ERROR_TYPE, lazyLoadComponentPlugin } from '@module-federation/bridge-react';
-
-const instance = getInstance();
-instance.registerPlugins([lazyLoadComponentPlugin()]);
-
-const List = instance.createLazyComponent({
-  loader: () => {
-    return import('remote/List');
-  },
-  loading: 'loading...',
-  export: 'default',
-  fallback: ({error,errorType,dataFetchMapKey}) => {
-    console.error(error)
-    if(errorType === ERROR_TYPE.LOAD_REMOTE){
-      return <div>load remote failed</div>
-    }
-    if(errorType === ERROR_TYPE.DATA_FETCH){
-      return <div>data fetch failed, the dataFetchMapKey key is: {dataFetchMapKey}</div>
-    }
-    return <div>error type is unknown</div>;
-  },
-});
-
-const Index = (): JSX.Element => {
-  return (
-    <div>
-      <h1>Basic usage with data fetch</h1>
-      <List />
-    </div>
-  );
-};
+### 消费者
 
-export default Index;
-```
+{props.consumer || React.createElement(Consumer)}
 
-### loader 函数
+#### loader 函数
 
-#### 入参
+##### 入参
 
 默认会往 loader 函数传递参数，其类型为 `DataFetchParams`，包含以下字段：
 
 - `isDowngrade` (boolean): 表示当前执行上下文是否处于降级模式。例如，在服务端渲染 (SSR) 失败，在客户端渲染（CSR）中会重新往服务端发起请求，调用 loader 函数，此时该值为 `true`。
 
-除了默认的参数以外，还可以在 `createLazyComponent` 中传递 [dataFetchParams](../../../practice/bridge/react-bridge#datafetchparams) 字段，该字段会被透传给 loader 函数。
+除了默认的参数以外，还可以在 `createLazyComponent` 中传递 `dataFetchParams` 字段，该字段会被透传给 loader 函数。
 
-#### 返回值
+##### 返回值
 
 loader 函数的返回值只能是**可序列化的数据对象**。
 
-### 在不同环境使用 Data Loader
+#### 在不同环境使用 Data Loader
 
 loader 函数可能会在服务端或浏览器端执行。在服务端执行的 loader 函数，我们称为 Server Loader，在浏览器端执行的称为 Client Loader。
 
 在 CSR 应用中，loader 函数会在浏览器端执行，即默认都是 Client Loader。
 
-在 SSR 应用中，loader 函数只会在服务端执行，即默认都是 Server Loader。在 SSR Module Federation 会直接在服务端调用对应的 loader 函数。在浏览器端切换路由时，Module Federation 会发送一个 http 请求到 SSR 服务，同样在服务端触发 loader 函数。
+在 SSR 应用中，loader 函数只会在服务端执行，即默认都是 Server Loader。在 SSR {props.name || 'Module Federation'} 会直接在服务端调用对应的 loader 函数。在浏览器端切换路由时，Module Federation 会发送一个 http 请求到 SSR 服务，同样在服务端触发 loader 函数。
 
 :::note NOTE
 
@@ -196,14 +157,14 @@ SSR 应用的 loader 函数只在服务端执行可以带来以下好处：
 
 :::
 
-#### 在 SSR 应用中使用 Client Loader
+##### 在 SSR 应用中使用 Client Loader
 
 默认情况下，在 SSR 应用中，loader 函数只会在服务端执行。但有些场景下，开发者可能期望在浏览器端发送的请求不经过 SSR 服务，直接请求数据源，例如：
 
 1. 在浏览器端希望减少网络消耗，直接请求数据源。
 2. 应用在浏览器端有数据缓存，不希望请求 SSR 服务获取数据。
 
-Module Federation 支持在 SSR 应用中额外添加 .data.client 文件，同样具名导出 loader。此时 SSR 应用在服务端执行 Data Loader 报错降级，或浏览器端切换路由时，会像 CSR 应用一样在浏览器端执行该 loader 函数，而不是再向 SSR 服务发送数据请求。
+{props.name || 'Module Federation'} 支持在 SSR 应用中额外添加 .data.client 文件，同样具名导出 loader。此时 SSR 应用在服务端执行 Data Loader 报错降级，或浏览器端切换路由时，会像 CSR 应用一样在浏览器端执行该 loader 函数，而不是再向 SSR 服务发送数据请求。
 
 ```ts title="List.data.client.ts"
 import cache from 'my-cache';

apps/website-new/docs/zh/_meta.json renamed to apps/website-new/docs/zh/_nav.json

@@ -2,7 +2,10 @@
 
 `prefetch` 函数用于预取远程模块的资源和**数据**，从而提升应用的性能和用户体验。通过在用户访问某个功能之前提前加载所需内容，可以显著减少等待时间。
 
-> 该 API 需要先[注册 lazyLoadComponentPlugin 插件](../../../practice/bridge/react-bridge#注册-lazyloadcomponentplugin)，才可以使用。
+import React from 'react';
+import PrefetchTip from '@components/zh/data-fetch/prefetch-tip';
+
+{props.prefetchTip || React.createElement(PrefetchTip)}
 
 ## 何时使用
 
@@ -36,39 +39,8 @@ interface FederationHost {
 
 假设我们有一个远程应用 `shop`，它暴露了一个组件 `Button`，并且该组件关联了一个数据获取函数。
 
-### 场景 1: 仅预取数据
-
-当用户鼠标悬停在一个将要导航到购物页面的链接上时，我们可以预取该页面所需的数据。
-
-```ts
-import { getInstance } from '@module-federation/runtime';
-
-const instance = getInstance();
-
-const handleMouseEnter = () => {
-  instance.prefetch({
-    id: 'shop/Button',
-    dataFetchParams: { productId: '12345' },
-  });
-};
-```
+import PrefetchDemo from '@components/zh/data-fetch/prefetch-demo';
 
-### 场景 2: 预取数据并预加载组件资源
-
-为了进一步优化，我们可以在预取数据的同时，也把组件的 JS 和 CSS 文件下载下来。
-
-```ts
-import { getInstance } from '@module-federation/runtime';
-
-const instance = getInstance();
-
-const handleMouseEnter = () => {
-  instance.prefetch({
-    id: 'shop/Button',
-    dataFetchParams: { productId: '12345' },
-    preloadComponentResource: true,
-  });
-};
-```
+{props.prefetchDemo || React.createElement(PrefetchDemo)}
 
 通过灵活使用 `prefetch`，您可以根据应用的具体场景和用户行为，精细地控制资源的加载时机，从而优化应用性能。

apps/website-new/docs/zh/guide/basic/data-fetch/index.mdx

@@ -9,5 +9,4 @@ Runtime 运行时资源加载失败报错，可能原因为网络不稳定导致
 
 ## 解决方法
 
-检查资源地址是否正确，若资源地址正确，检查网络是否稳定。网络不稳定时可增加重试机制，参考 [Runtime 重试机制](zh/plugin/plugins/retry-plugin.html)。
- 
+检查资源地址是否正确，若资源地址正确，检查网络是否稳定。网络不稳定时可增加重试机制，参考 [Runtime 重试机制](/plugin/plugins/retry-plugin.html)。

apps/website-new/docs/zh/guide/basic/data-fetch/prefetch.mdx

@@ -408,7 +408,7 @@ type ErrorInfo = {
 ```tsx
 import React, { FC, memo, useEffect } from 'react';
 import { getInstance } from '@module-federation/enhanced/runtime';
-import { ,createLazyComponent, ERROR_TYPE } from '@module-federation/bridge-react';
+import { createLazyComponent, ERROR_TYPE } from '@module-federation/bridge-react';
 
 const instance = getInstance();
 const LazyComponent = instance.createLazyComponent({