@modern-js/main-doc 2.12.0 → 2.13.0

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

@@ -13,7 +13,7 @@ First need to execute `pnpm run new` to enable the SSG features:
 ? Enable features Enable SSG
 ```
 
-After execute script，register SSG plugin in `modern.config.ts`:
+After execute script, register SSG plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import ssgPlugin from '@modern-js/plugin-ssg';
@@ -106,7 +106,7 @@ export default defineConfig({
 });
 ```
 
-run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered.
+run `pnpm run build` and `pnpm run serve`, access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered.
 
 Looking at the bundle file, a new `main/about/index.html` file has been added in the `dist/` directory.
 

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

@@ -246,6 +246,21 @@ if (process.env.MODERN_TARGET === 'browser') {
 }
 ```
 
+After packaging in the development environment, SSR and CSR artifacts will be compiled into the following content. Therefore, there will be no more errors due to Web API in the SSR environment:
+
+```ts
+// SSR production
+if (false) {
+}
+
+// CSR production
+if (true) {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
 :::note
 For more information, see [environment variables](/guides/basic-features/env-vars).
 
@@ -253,7 +268,9 @@ For more information, see [environment variables](/guides/basic-features/env-var
 
 ### Use File Suffix
 
-In the second case, the Treeshaking method does not guarantee that the code is completely separated. Modern.js also supports the packaging file of SSR Bundle and CSR Bundle products through the file suffixed with `.node.`.
+However, in the second case, for example, when `fs-extra` is imported into the code, it internally uses the Node API with side effects. If it is directly referenced in the component, it will cause CSR loading errors.
+
+Env vars is not effective in this situation. Modern.js also supports distinguishing SSR Bundle and CSR Bundle packaging files through files with the `.node.` suffix.
 
 For example, the import of `fs-extra` in the code, when it is directly referenced to the component, will cause the CSR to load an error. You can create `.ts` and `.node.ts` files of the same name as a layer of proxy:
 
@@ -280,7 +297,27 @@ export const loader = () => {
 
 ### Independent File
 
-Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code.
+Both of the above methods can bring some mental burden to developers. In real business scenarios, we found that most of the mixed Node/Web code occurs in data requests.
+
+Therefore, Modern.js developed a [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code based on [Nested Routing](/guides/basic-features/routes).
+
+We can separate **data request** and **component code** by using independent files. Write component logic in `routes/page.tsx` and data request logic in `routes/page.loader.ts`.
+
+```ts title="routes/page.tsx"
+export default Page = () => {
+  return <div>Hello World<div>
+}
+```
+
+```ts title="routes/page.loader.tsx"
+import fse from 'fs-extra';
+export default () => {
+  const file = fse.readFileSync('./myfile');
+  return {
+    ...
+  };
+}
+```
 
 ## Remote Request
 
@@ -317,7 +354,7 @@ The streaming SSR of Modern.js is implemented based on React Router, and the mai
 
 ### Return async data
 
-```ts title='page.loader.ts'
+```ts title="page.loader.ts"
 import { defer, type LoaderFunctionArgs } from '@modern-js/runtime/router';
 
 interface User {
@@ -351,7 +388,7 @@ therefore, the parameter passed to `defer` is `{data: user}`.
 
 `defer` can also receive asynchronous data and synchronous data at the same time. For example:
 
-```ts title='page.loader.ts'
+```ts title="page.loader.ts"
 
 // skip some codes
 
@@ -388,7 +425,7 @@ export default ({ params }: LoaderFunctionArgs) => {
 
 Use the `Await` component to render the data returned asynchronously from the Data Loader. For example:
 
-```tsx title='page.tsx'
+```tsx title="page.tsx"
 import { Await, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 import type { Data } from './page.loader';
@@ -430,7 +467,7 @@ So, here we import like this: `import type { Data } from './page.loader'`;
 
 You can also get the asynchronous data returned by Data Loader through `useAsyncValue`. For example:
 
-```tsx title='page.tsx'
+```tsx title="page.tsx"
 import { useAsyncValue } from '@modern-js/runtime/router';
 
 // skip some codes
@@ -468,7 +505,7 @@ export default Page;
 The `errorElement` property of the `Await` component can be used to handle errors thrown when the Data Loader executes or when a child component renders.
 For example, we intentionally throw an error in the Data Loader function:
 
-```ts title='page.loader.ts'
+```ts title="page.loader.ts"
 import { defer } from '@modern-js/runtime/router';
 
 export default () => {
@@ -484,7 +521,7 @@ export default () => {
 
 Then use `useAsyncError` to get the error, and assign the component used to render the error to the `errorElement` property of the `Await` component:
 
-```tsx title='page.ts'
+```tsx title="page.ts"
 import { Await, useAsyncError, useLoaderData } from '@modern-js/runtime/router';
 import { Suspense } from 'react';
 

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

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # Alias
 
-Modern.js allow aliases in JS and CSS，and the following aliases are built in:
+Modern.js allow aliases in JS and CSS, and the following aliases are built in:
 
 ```js
 {

package/docs/en/guides/basic-features/env-vars.mdx

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 
-## Built-in Environment
+## Built-in Environment Variables
 
 ### ASSET_PREFIX
 
@@ -31,7 +31,7 @@ MODERN_ENV priority is higher than NODE_ENV.
 
 ### MODERN_TARGET
 
-Auto inject when use `@modern-js/runtime`，Used to distinguish between SSR and CSR environments. Developers can judge by themselves in the code, and dead code will be removed by default when building.
+Auto inject when use `@modern-js/runtime`, Used to distinguish between SSR and CSR environments. Developers can judge by themselves in the code, and dead code will be removed by default when building.
 
 ```ts title="App.tsx"
 function App() {
@@ -93,7 +93,7 @@ The `.env` file follows the following loading rules:
 
 When you need to use different config according to the environment, you can define environment variables in the `.env` file corresponding to the environment name, and manually set the execution environment when starting the project.
 
-For example, when starting a project with the following command，the `.env` and `.env.staging` will load:
+For example, when starting a project with the following command, the `.env` and `.env.staging` will load:
 
 ```shell
 MODERN_ENV=staging pnpm run dev
@@ -129,7 +129,7 @@ In custom HTML templates, you can also use such environment variables directly.
 
 ### Any Other Names
 
-If you need to use environment variables with any other names in your code，you can config [`source.globalVars`](/configure/app/source/global-vars), for example:
+If you need to use environment variables with any other names in your code, you can config [`source.globalVars`](/configure/app/source/global-vars), for example:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -171,4 +171,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above，at this time, we need use [`source.define`](/configure/app/source/define).
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above, at this time, we need use [`source.define`](/configure/app/source/define).

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

@@ -173,10 +173,6 @@ In the application root directory, create the `config/html/` directory, which su
     <%= meta %>
     <title><%= title %></title>
     <%= topTemplate %>
-
-    <script>
-      window.__assetPrefix__ = '<%= assetPrefix %>';
-    </script>
     <%= headTemplate %>
     {/* webpack inject css  */}
   </head>

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

@@ -2,6 +2,7 @@
 title: Routes
 sidebar_position: 1
 ---
+
 # Routes
 
 Modern.js build-in provides partial support for [React Router 6](https://reactrouter.com/en/main) and provides various types of routing modes. According to different [entry](/guides/concept/entries) types, routing is divided into three modes, namely **Conventional routing**, **Self-controlled routing** and **Other**.
@@ -57,8 +58,8 @@ Similarly, `routes/user/layout.tsx` will be used as a layout component for all c
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -106,8 +107,8 @@ In order to facilitate the introduction of the relationship between `<Layout>` a
 ```tsx
 <Layout>
   <UserLayout>
-    <UserPage>
-  <UserLayout>
+    <UserPage />
+  </UserLayout>
 </Layout>
 ```
 
@@ -158,10 +159,9 @@ The `routes/$.tsx` component is rendered when accessing any path that does not m
 import { useParams } from '@modern-js/runtime/router';
 // When the path is `/aaa/bbb`
 const params = useParams();
-params['*']  // => 'aaa/bbb'
+params['*']; // => 'aaa/bbb'
 ```
 
-
 ### Layout with No Path
 
 When a directory name begins with `__`, the corresponding directory name is not converted to the actual routing path, such as the following file directory:
@@ -230,15 +230,15 @@ When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` componen
 You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
 
 ```ts title="routes/user/page.loader.ts"
-import { redirect } from '@modern-js/runtime/router'
+import { redirect } from '@modern-js/runtime/router';
 
 export default () => {
   const user = await getUser();
-  if(!user){
+  if (!user) {
     return redirect('/login');
   }
   return null;
-}
+};
 ```
 
 ### ErrorBoundary
@@ -255,15 +255,15 @@ Within the `<ErrorBoundary>` component, you can use [useRouteError](/apis/app/ru
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
-export default const ErrorBoundary = () => {
+export const ErrorBoundary = () => {
   const error = useRouteError();
   return (
     <div>
-        <h1>{error.status}</h1>
-        <h2>{error.message}</h2>
+      <h1>{error.status}</h1>
+      <h2>{error.message}</h2>
     </div>
-  )
-}
+  );
+};
 ```
 
 ### Hooks before rendering
@@ -286,15 +286,13 @@ This feature is useful when the application requires pre-page data, custom data
 :::
 
 ```ts title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
   return {
     message: 'Hello World',
-  }
-}
+  };
+};
 ```
 
 ```tsx title="src/routes/page.tsx"
@@ -305,7 +303,7 @@ export default () => {
   const { message } = context.getInitData();
 
   return <div>{message}</div>;
-}
+};
 ```
 
 When working with SSR, the browser side can get the data returned by `init` during SSR, and the developer can decide whether to retrieve the data on the browser side to overwrite the SSR data, for example:
@@ -317,18 +315,18 @@ export const init = (context: RuntimeContext) => {
   if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
-    }
+    };
   } else {
     const { context } = runtimeContext;
     const data = context.getInitData();
     // If do not get the expected data
     if (!data.message) {
       return {
-        message: 'Hello World By Client'
-      }
+        message: 'Hello World By Client',
+      };
     }
   }
-}
+};
 ```
 
 ### Runtime Configuration
@@ -341,12 +339,34 @@ import type { AppConfig } from '@modern-js/runtime';
 export const config = (): AppConfig => {
   return {
     router: {
-      supportHtml5History: false
-    }
-  }
+      supportHtml5History: false,
+    },
+  };
 };
 ```
 
+### Prefetch
+
+When using convention-based routing, Modern.js will automatically split chunks according to the route, and when the user accesses a specific route, the corresponding resources will be loaded automatically, which can effectively reduce the first screen loading time. However, this also brings a problem, when the user accesses a route, if the asset corresponding to that route is not yet loaded, a white screen will appear.
+
+In this case you can show a custom `loading` component by defining a `loading` component before the static resource is loaded.
+
+To further improve the user experience and reduce time of loading, Modern.js supports defining the `prefetch` property on the Link component to load static resources and data in advance, with three optional values for the `prefetch` property:
+
+```
+<Link prefetch="intent" to="page">
+```
+
+:::info
+- This feature is currently only supported in Webpack projects, not in Rspack projects.
+- Prefetching of data will only prefetch the data returned from the data loader of the SSR project.
+
+:::
+
+- `none`, the default value, will not do prefetch, no additional behavior.
+- `intent`, the value we recommend for most scenarios, will automatically start loading the corresponding resources and the data defined in the data loader when you mouse over the Link, and will automatically unload it when the mouse is moved away. In our tests, even a direct click can reduce the loading time by about 200ms.
+- `render`, when the Link component renders, it will load the corresponding resources and the data defined in the data loader.
+
 ## Self-controlled routing
 
 With `src/App.tsx` as the agreed entry, Modern.js will not do additional operations with multiple routes, developers can use the React Router 6 API for development by themselves, for example:
@@ -367,7 +387,7 @@ export default () => {
 ```
 
 :::note
-Modern.js has a series of resource loading and rendering optimizations to the default convention-based routing, and provides out-of-the-box SSR capabilities,  when using self-directed routing, need to be packaged by the developer, and it is recommended that developers use convention-based routing.
+Modern.js has a series of resource loading and rendering optimizations to the default convention-based routing, and provides out-of-the-box SSR capabilities, when using self-directed routing, need to be packaged by the developer, and it is recommended that developers use convention-based routing.
 
 :::
 

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

@@ -132,9 +132,9 @@ The content of the file generated by Modern.js is as follows:
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import customBootstrap from '@_edenx_src/index.tsx';
-import App from '@_edenx_src/App';
-import { router, state } from '@edenx/runtime/plugins';
+import customBootstrap from '@_modern_js_src/index.tsx';
+import App from '@_modern_js_src/App';
+import { router, state } from '@modern-js/runtime/plugins';
 
 const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
 const MOUNT_ID = 'root';

package/docs/en/guides/get-started/introduction.mdx

@@ -9,7 +9,27 @@ sidebar_position: 1
 
 Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:
 
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/Solutions-en-0945.png)
+import { SolutionCards } from '@site/src/components/SolutionCards';
+
+<SolutionCards
+  cards={[
+    {
+      title: 'Modern.js Framework',
+      description: 'For web application development',
+      link: 'http://modernjs.dev/en/',
+    },
+    {
+      title: 'Modern.js Module',
+      description: 'For npm package development',
+      link: 'http://modernjs.dev/module-tools/en/',
+    },
+    {
+      title: 'Modern.js Doc',
+      description: 'For document site development',
+      link: 'http://modernjs.dev/doc-tools/',
+    },
+  ]}
+/>
 
 As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
 

package/docs/en/guides/get-started/quick-start.mdx

@@ -7,39 +7,22 @@ sidebar_position: 2
 
 ## Environment
 
-### Node.js
+import Prerequisites from "@site-docs-en/components/prerequisites"
 
-Requires [Node.js LTS](https://github.com/nodejs/Release) and ensures that the Node version is greater than or equal to 14.19.0, 16.x version is recommended.
-
-Modern.js recommend installing [nvm](https://github.com/nvm-sh/nvm#install--update-script) in the development environment and integrating [script to automatically switch node versions](https://github.com/nvm-sh/nvm#deeper-shell-integration) in the shell.
-
-Then there is a `.nvmrc` file with the content of `lts/fermium` or `lts/gallium` in the root directory of the repository, it will automatically install or switch to the correct Node.js version when entering the repository.
-
-### pnpm
-
-[pnpm](https://pnpm.io/installation) is recommended for package management.
-
-```bash
-npm install -g pnpm@7
-```
-
-:::note
-Modern.js also supports other package managers, such as `yarn` or `npm`.
-
-:::
+<Prerequisites />
 
 ## Installation
 
-Modern.js provides the `@modern-js/create` tool to create projects. Don't install globally, use `npx` to run on demand.
+Modern.js provides the `@modern-js/create` tool for creating new projects. You can use `npx` to run it.
 
-Projects can be created using an existing empty directory:
+You can create the project in an existing empty directory:
 
 ```bash
 mkdir myapp && cd myapp
 npx @modern-js/create
 ```
 
-Projects can also be created directly from the new directory:
+You can also directly create the project as a new folder:
 
 ```bash
 npx @modern-js/create myapp
@@ -161,4 +144,4 @@ Open http://localhost:8000/ in the browser and the content should be the same as
 
 ## Deploy
 
-After the local verification is completed, the products under `dist/` can be organized into the structure required by the server for deployment.
+Once the local verification is complete, the outputs under `dist` folder can be organized into the structure required by the server for deployment.

package/docs/en/guides/get-started/upgrade.mdx

@@ -25,24 +25,24 @@ You can see that the dependency in the project `package.json` has been changed t
 
 ## Specify version upgrade
 
-Modern.js all packages are published using the **unified version number**.
+All packages of Modern.js are published using the **unified version number**.
 
-According to the website Release Note, developers can also manually upgrade the project to the desired version.
+According to the website release note, developers can also manually upgrade the project to the desired version.
 
 :::tip
 When upgrading, you need to upgrade to all packages provided by the Modern.js, rather than upgrading a single dependency.
 
 :::
 
-## lock child dependency
+## Lock nested dependency
 
-When there is a problem with one of the child dependencies of the project, and the Modern.js cannot be updated immediately, you can use the package manager to lock the child dependency version.
+When there is a problem with one of the nested dependencies of the project, and the Modern.js cannot be updated immediately, you can use the package manager to lock the child dependency version.
 
 ### pnpm
 
 For projects using pnpm, add the following configuration to the `package.json` in the **project root directory** and re-execute `pnpm install`:
 
-```json
+```json title="package.json"
 {
   "pnpm": {
     "overrides": {
@@ -56,7 +56,7 @@ For projects using pnpm, add the following configuration to the `package.json` i
 
 For projects using Yarn, add the following configuration to the `package.json` in the **project root directory** and re-execute `yarn install`:
 
-```json
+```json title="package.json"
 {
   "resolutions": {
     "package-name": "^1.0.0"
@@ -68,7 +68,7 @@ For projects using Yarn, add the following configuration to the `package.json` i
 
 For projects using Npm, add the following configuration to the `package.json` in the **project root directory** and re-execute `npm install`:
 
-```json
+```json title="package.json"
 {
   "overrides": {
     "package-name": "^1.0.0"

package/docs/en/guides/topic-detail/framework-plugin/hook.mdx

@@ -32,7 +32,7 @@ pipeline.run(1); // 4
 pipeline.run(5); // 12
 ```
 
-In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result，the type is:
+In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result, the type is:
 
 ```ts
 (count: number, next: (nextCount: number) => number) => number;

package/docs/en/guides/topic-detail/generator/codesmith/api/json.mdx

@@ -35,7 +35,7 @@ Get the JSON file content.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 
 ### extend
 
@@ -43,7 +43,7 @@ Merge objects into a JSON file.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 - obj: `Record<string, any>`. Object to be merged.
 
 ### update
@@ -52,5 +52,5 @@ pdate object fields to JSON file.
 
 Parameter:
 
-- resource: `FsResource`. A file resource，get by `context.materials.default.get(<filename>)`.
+- resource: `FsResource`. A file resource, get by `context.materials.default.get(<filename>)`.
 - operation: `{ query: Record<string, any>; update: Record<string, any> }`. Update operation, use gesture to view [declaration-update](https://www.npmjs.com/package/declaration-update) in detail.

package/docs/en/guides/topic-detail/generator/config/app.mdx

@@ -75,7 +75,7 @@ BFF type (bffType), supports two options:
 
 ##### framework
 
-BFF runtime framework (framework)，supports two options:
+BFF runtime framework (framework), supports two options:
 
 - Express(express)
 

package/docs/en/guides/topic-detail/generator/config/monorepo.mdx

@@ -12,7 +12,7 @@ The Monorepo project supports the creation of sub-projects by using the new comm
 
 ### solution
 
-Subproject type(solution)，the different subproject type fields are:
+Subproject type(solution), the different subproject type fields are:
 
 - Application (mwa)
 - Application (Test) (mwa_test)

package/docs/en/guides/topic-detail/generator/plugin/api/file/addHelper.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # addHelper
 
-For text files, add a customized Help function of Handlebars，the specific viewable document[Custom Helpers](https://handlebarsjs.com/guide/#custom-helpers).
+For text files, add a customized Help function of Handlebars, the specific viewable document[Custom Helpers](https://handlebarsjs.com/guide/#custom-helpers).
 
 This method is available on the `onForged` time to live API parameter.
 

package/docs/en/guides/topic-detail/model/manage-effects.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: Management Effect
 ---
+
 # Management Effect
 
 The actions in the model must be pure functions and cannot have any side effects during execution. However, in real-world scenarios, we often encounter many side effects, such as: requesting data from an HTTP API to obtain state data, or modifying `localStorage` or sending events while updating the state. In Reduck, side effects are managed through the model's `effects` function.
@@ -88,7 +89,7 @@ For this type of side effect scenario, `handleEffect` stipulates that the state
 {
   result: null,
   error: null,
-  pending: false，
+  pending: false,
 }
 ```
 

package/docs/en/guides/topic-detail/model/model-communicate.mdx

@@ -188,7 +188,7 @@ const fooModel = model('foo').define((context, { use, onMount }) => {
   let actions;
 
   onMount(() => {
-    // after fooModel mounted，get actions
+    // after fooModel mounted, get actions
     [, actions] = use(fooModel);
   });
 

package/docs/en/tutorials/foundations/introduction.mdx

@@ -26,5 +26,3 @@ We have prepared a tutorial on creating a "contact list app" that you can follow
 - Container components
 - New portal
 - ...
-
-Translated with www.DeepL.com/Translator (free version)

package/docs/zh/apis/app/hooks/src/pages.mdx

@@ -85,7 +85,7 @@ pages 目录下的文件满足以下条件的不会被当做路由文件
 import React from 'react';
 import UserLayout from 'xxxx';
 
-export default const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
+export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
   return (
     <UserLayout>
       <Component {...pageProps} />

package/docs/zh/apis/app/runtime/core/use-loader.mdx

@@ -5,6 +5,10 @@ title: useLoader
 
 一个同构的 API，通常会用来做异步请求。当 SSR 的时候，服务端使用 `useLoader` 预加载数据，同时浏览器端也会复用这部分数据。
 
+:::tip
+在使用 Rspack 作为打包工具时，暂不支持使用 useLoader API。
+:::
+
 ## 使用姿势
 
 ```ts

package/docs/zh/apis/app/runtime/model/handle-effect.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 7
 title: handleEffect
 ---
+
 # handleEffect
 
-import ReduckTip from "@site-docs/components/reduck-tip"
+import ReduckTip from '@site-docs/components/reduck-tip';
 
 <ReduckTip />