@modern-js/main-doc 2.53.0 → 2.54.0

package/docs/en/configure/app/server/ssr.mdx

@@ -32,6 +32,8 @@ When the value type is `Object`, the following properties can be configured:
   However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true`.
 - `unsafeHeaders`: `string[] = []`, For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected.
 - `scriptLoading`: `'defer' | 'blocking' | 'module' | 'async'`, The configuration is the same as [html.scriptLoading](/configure/app/html/script-loading), supporting SSR injected script set to `async` loading. The priority is `ssr.scriptLoading` > `html.scriptLoading`.
+- `loaderFailureMode`: `'clientRender' | 'errorBoundary'`, The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended),
+it will default to rendering the [`Error`](/en/guides/basic-features/routes.html#errorboundary) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader).
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/guides/advanced-features/bff/index.mdx

@@ -4,7 +4,7 @@ title: BFF
 
 # BFF
 
-In the development of the concept of **front back separation**, the front-end part can do more and more things, and the front-end needs some UI-oriented data interfaces, so the industry introduced the concept of BFF (Backends for Frontends).
+BFF (Backends for Frontends) is an architectural pattern primarily used to address issues of data aggregation in front-end and back-end collaboration. Under the BFF architecture, front-end applications do not communicate directly with backend services. Instead, they interact with backend services through a dedicated BFF middleware layer, custom-made for the front end.
 
 The main problems it to solve include:
 

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

@@ -10,11 +10,11 @@ Code splitting is a common way to optimize frontend resource loading. This artic
 When using Modern.js [Conventional routing](/guides/basic-features/routes#conventional-routing). By default, code splitting is done according to the routing component, so you don't need to do it yourself.
 :::
 
-- `import`
+- dynamic `import`
 - `React.lazy`
 - `loadable`
 
-## import
+## Dynamic import
 
 use dynamic `import()`, the JS modules pass to this API will be bundled as a separate JS file, for example:
 
@@ -34,7 +34,7 @@ The officially way provides by React to split component code.
 For projects that use Traditional SSR（renderToString）, `React.lazy` is not supported. Please use the Loadable API instead.
 :::
 
-```ts
+```tsx
 import React, { Suspense } from 'react';
 
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -60,7 +60,7 @@ For details, see [React lazy](https://react.dev/reference/react/lazy).
 
 In Modern.js, you can use the Loadable API, which is exported from `@modern-js/runtime/loadable`. Here's an example:
 
-```ts
+```tsx
 import loadable from '@modern-js/runtime/loadable';
 
 const OtherComponent = loadable(() => import('./OtherComponent'));

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

@@ -15,6 +15,7 @@ If you have the following scenarios, developers can consider using SSR to render
 3. Websites with higher SEO requirements, such as corporate websites, blogs, etc.
 
 In Modern.js, SSR is also out-of-the-box. Developers do not need to write complex server-side logic for SSR, nor do they need to worry about the operation and maintenance of SSR, or create separate services.
+
 In addition to the out-of-the-box SSR service, to ensure the developer's development experience, we also have:
 
 - A complete SSR downgrade strategy to ensure that the page can run safely.

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

@@ -226,7 +226,7 @@ For example, the following directory structure:
     └── page.tsx
 ```
 
-When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
+When accessing any path that does not match(For example `/blog/a`), the `routes/blog/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
 
 ```tsx
 <RootLayout>

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

@@ -54,7 +54,7 @@ It mainly includes the following features:
 - 🪜 **Progressive**: Create projects with the most streamlined templates, gradually enable plugin features through the generator, and customize solutions.
 - 🏠 **Integration**: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.
 - 📦 **Out Of The Box**: Default TS support, built-in build, ESLint, debugging tools, fully functional and testable.
-- 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, Monorepo solutions, and other peripheral needs.
+- 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, and other peripheral needs.
 - 🕸 **Routing Modes**: Includes self-controlled routing, file-convention-based routing (nested routing), etc.
 
 ## Comparison with Others

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

@@ -22,8 +22,6 @@ Options:
 
 - Doc Site -- doc
 
-- Monorepo -- monorepo
-
 ### scenes
 
 Question: Please select the project scenario.
@@ -69,7 +67,3 @@ The value of the `name` field in the `package.json` file of the Npm module, whic
 ## Modern Doc
 
 <PackageManager />
-
-## Monorepo
-
-<PackageManager />

package/docs/en/guides/topic-detail/generator/new/use.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Usage
 
-In Web App, Npm Module and Monorepo projects, we provide the `new` command to create project elements, enable features and create sub-project.
+In Web App, Npm Module projects, we provide the `new` command to create project elements, enable features and create sub-project.
 
 ## Web App
 

package/docs/zh/configure/app/server/ssr.mdx

@@ -32,6 +32,8 @@ export default defineConfig({
   开发者在保证项目中没有使用 useLoader Api 情况下, 可通过配置 `disablePrerender=true`来减少一次渲染。
 - `unsafeHeaders`: `string[] = []`, 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置。
 - `scriptLoading`: `'defer' | 'blocking' | 'module' | 'async'`, 配置同 [html.scriptLoading](/configure/app/html/script-loading)，支持 ssr 注入的 script 设置为 async 加载方式。优先级为 `ssr.scriptLoading` > `html.scriptLoading`
+- `loaderFailureMode`: `'clientRender' | 'errorBoundary'`, 默认配置为 `'errorBoundary'`，当 [data loader](/guides/basic-features/data/data-fetch.html#data-loader推荐) 中出错时，默认会渲染路由 [`Error`](/guides/basic-features/routes.html#错误处理) 组件，
+配置为 `'clientRender'` 时，有一个 data loader 抛错，就降级到客户端渲染，可以与 [Client Loader](/guides/basic-features/data/data-fetch.html#client-loader) 配合使用。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -3,9 +3,9 @@ title: BFF
 ---
 # BFF
 
-在**前后端分离**概念出现后一段时间发展中，前端部分能够做的事越来越多，前端需要一些面向 UI 的数据接口，因此业界引入了 BFF（Backends for Frontends）这一概念。
+BFF（Backends for Frontends）是一种架构模式，主要用于解决前后端协作中的数据聚合问题。在 BFF 架构下，前端应用程序不直接与后端服务通信，而是通过一个专门为前端定制的BFF中间层与后端服务交互。
 
-它主要为了解决的问题包括：
+它的适用场景包括：
 
 - 根据自身业务需求，对更底层 API 的聚合、映射、裁剪、代理。
 - 对一些特定场景的数据进行缓存，提高性能，进而提升用户体验。

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

@@ -4,17 +4,17 @@ sidebar_position: 3
 
 # 代码分割
 
-代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
+代码分割（code splitting）是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
 
 :::info
 使用 Modern.js [约定式路由](/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，无需自行进行代码分割。
 :::
 
-- `import`
+- 动态 `import`
 - `React.lazy`
 - `loadable`
 
-## import
+## 动态 import
 
 使用动态 `import()` 语法，传入的 JS 模块将会被被打包到单独的 JS 文件中。例如：
 
@@ -34,7 +34,7 @@ React 官方提供的组件代码分割的方式。
 对于使用传统 SSR（字符串渲染）的项目，不支持 `React.lazy`，请使用 Loadable API。
 :::
 
-```ts
+```tsx
 import React, { Suspense } from 'react';
 
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
@@ -60,7 +60,7 @@ function MyComponent() {
 
 在 Modern.js 中，可以从 `@modern-js/runtime/loadable` 中导出使用 Loadable API，示例如下：
 
-```ts
+```tsx
 import loadable from '@modern-js/runtime/loadable';
 
 const OtherComponent = loadable(() => import('./OtherComponent'));

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -137,7 +137,7 @@ export default defineConfig<'rspack'>({
 
 :::tip Nightly 版本介绍
 每天，Rspack 会自动构建基于最新代码的 nightly 版本，用于测试和及早发现错误。
-通常情况下，这些版本是可用的。如果发现问题，我们会及时进行修复。但是，如果 Rspack 有一些 break change，需要 Modern.js 同步修改代码，那么我们建议等待下一个 Modern.js 版本再进行更新。
+通常情况下，这些版本是可用的。如果发现问题，我们会及时进行修复。但如果 Rspack 有一些 breaking change、需要 Modern.js 同步修改代码，那么我们建议等待下一个 Modern.js 版本再进行更新。
 :::
 
 如果想了解其他包管理工具锁定依赖版本的示例，可以参考：[锁定子依赖](/guides/get-started/upgrade.html#%E9%94%81%E5%AE%9A%E5%AD%90%E4%BE%9D%E8%B5%96)。

package/docs/zh/guides/advanced-features/ssr/index.mdx

@@ -1,6 +1,6 @@
 # 服务端渲染
 
-通过在服务器端将网页的 HTML 内容渲染成完整的网页，然后将生成的网页发送到客户端，客户端只需要显示网页即可，不需要再进行额外的渲染。
+通过在服务器端将网页的 HTML 内容渲染成完整的网页（Server-Side Rendering，简称 SSR），然后将生成的网页发送到客户端，客户端只需要显示网页即可，不需要再进行额外的渲染。
 
 它主要的优势在于
 
@@ -15,6 +15,7 @@
 3. 对 SEO 要求较高的网站，如企业官网、博客等。
 
 在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。
+
 除了开箱即用的 SSR 服务，为了保证开发者的开发体验，我们还具备：
 
 - 完备的 SSR 降级策略，保证页面能够安全运行。

package/docs/zh/guides/advanced-features/ssr/usage.mdx

@@ -19,7 +19,7 @@ export default defineConfig({
 
 ## SSR 时的数据获取
 
-Modern.js 中提供了 Data Loader，方便开发者在 SSR、CSR 下同构的获取数据。每个路由模块，如 `layout.tsx` 和 `page.tsx` 都可以定义自己的 Data Loader：
+Modern.js 中提供了 Data Loader，方便开发者在 SSR、CSR 下同构地获取数据。每个路由模块，如 `layout.tsx` 和 `page.tsx` 都可以定义自己的 Data Loader：
 
 ```ts title="src/routes/page.data.ts"
 export const loader = () => {
@@ -129,7 +129,7 @@ CSR 中这类问题不易被发觉，因此从 CSR 切换到 SSR 时，如果不
 
 ## 收敛服务端数据
 
-为了保持 SSR 阶段请求的数据，可以在浏览器端直接使用，Modern.js 会将渲染过程中收集的数据与状态注入到 HTML 内。但是，CSR 应用常常存在接口数据量大、组件状态未收敛的情况，这时如果直接使用 SSR，渲染得到的 HTML 体积可能会存在过大的问题。此时，SSR 不仅无法为应用带来用户体验上的提升，反而可能起到相反的作用。
+为了使浏览器端能够直接使用 SSR 阶段请求的数据，Modern.js 会将渲染过程中收集的数据与状态注入到 HTML 内。但是，CSR 应用常常存在接口数据量大、组件状态未收敛的情况，这时如果直接使用 SSR，渲染得到的 HTML 体积可能会存在过大的问题。此时，SSR 不仅无法为应用带来用户体验上的提升，反而可能起到相反的作用。
 
 因此，使用 SSR 时，**开发者需要为应用做合理的瘦身**：
 

package/docs/zh/guides/basic-features/data/data-fetch.mdx

@@ -14,7 +14,7 @@ Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过
 Modern.js 推荐使用约定式路由做路由的管理，通过 Modern.js 的[约定式（嵌套）路由](/guides/basic-features/routes#约定式路由)，每个路由组件(`layout.ts` 或 `page.ts`)可以有一个同名的 `data` 文件，该 `data` 文件可以导出一个 `loader` 函数，函数会在组件渲染之前执行，为路由组件提供数据。
 
 :::info
-Modern.js v1 支持通过 [useLoader](#useloader（旧版）) 获取数据，这已经不是我们推荐的用法，除迁移过程外，不推荐两者混用。
+Modern.js v1 支持通过 [useLoader](#useloader（旧版）) 获取数据，这已经不是我们推荐的用法。除迁移过程外，不推荐两者混用。
 
 :::
 
@@ -379,7 +379,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 1. 在 SSR 降级时，不希望框架向 SSR 服务发送请求获取数据，希望能直接请求后端服务。
 2. 在客户端有一些缓存，不希望请求 SSR 服务获取数据。
 
-这些场景下，我们可以使用 Client Loader， 添加 Client Loader 后，在以下的场景，会调用 Client Loader 中的代码，而不再像 SSR 服务发送请求：
+这些场景下，我们可以使用 Client Loader。添加 Client Loader 后，会调用 Client Loader 中的代码，而不再像 SSR 服务发送请求：
 
 1. SSR 降级为 CSR 后，在客户端获取数据时，会执行 Client Loader 代替框架发送请求到 Data Loader（Server） 获取数据。
 2. SSR 项目进行 SPA 跳转时，获取数据，会执行 Clinet Loader。

package/docs/zh/guides/basic-features/data/data-write.mdx

@@ -83,8 +83,7 @@ Modern.js 中提供 Data Action 主要是为了使 UI 和服务器的状态能
 
 ![state manage](https://lf3-static.bytednsdoc.com/obj/eden-cn/ulkl/ljhwZthlaukjlkulzlp/action-state-manage1.png)
 
-如果项目中组件共享的数据主要服务端的状态，则无需在项目引入客户端状态管理库，使用 Data Loader 请求数据，通过 [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md) 在子组件中共享数据，
-通过 Data Action 修改和同步服务端的状态。
+如果项目中组件共享的数据主要来自于服务端的状态，则无需在项目引入客户端状态管理库。可以使用 Data Loader 请求数据，通过 [`useRouteLoaderData`](/guides/basic-features/data/data-fetch.md) 在子组件中共享数据，使用 Data Action 修改和同步服务端的状态。
 
 
 

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

@@ -2,7 +2,7 @@
 sidebar_position: 5
 ---
 
-# 数据模拟
+# 数据模拟（Mock）
 
 Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。
 

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

@@ -230,7 +230,7 @@ export default () => {
     └── page.tsx
 ```
 
-当访问任何匹配不到的路径时(如 `/blog/a`)，都会渲染 `routes/$.tsx` 组件，因为这里有 `layout.tsx`，渲染的 UI 如下：
+当访问任何匹配不到的路径时(如 `/blog/a`)，都会渲染 `routes/blog/$.tsx` 组件，因为这里有 `layout.tsx`，渲染的 UI 如下：
 
 ```tsx
 <RootLayout>
@@ -352,7 +352,7 @@ Modern.js 建议必须有根 Layout 和根 Loading。
 
 ### 路由重定向
 
-可以通过创建 [`Data Loader`](/guides/basic-features/data/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.data.ts` 文件：
+可以使用 [`Data Loader`](/guides/basic-features/data/data-fetch) 文件做路由的重定向。如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.data.ts` 文件：
 
 ```ts title="routes/user/page.data.ts"
 import { redirect } from '@modern-js/runtime/router';
@@ -492,7 +492,7 @@ export const init = (context: RuntimeContext) => {
 
 ### 预加载
 
-在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片，当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
+在约定式路由下， Modern.js 会根据路由，自动地对路由进行分片。当用户访问具体的路由时，会自动加载对应的分片，这样可以有效地减少首屏加载的时间。但这也带来了一个问题，当用户访问一个路由时，如果该路由对应的分片还未加载完成，就会出现白屏的情况。
 这种情况下你可以通过定义 `Loading` 组件，在静态资源加载完成前，展示一个自定义的 `Loading` 组件。
 
 为了进一步提升用户体验，减少 loading 的时间，Modern.js 支持在 Link 组件上定义 `prefetch` 属性，可以提前对静态资源和数据进行加载：
@@ -550,7 +550,7 @@ export default () => {
 ```
 
 :::note
-Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力，而这些能力，在使用自控路由时，都需要开发者自行封装，推荐开发者使用约定式路由。
+Modern.js 默认对约定式路由做了一系列资源加载及渲染上的优化，并且提供了开箱即用的 SSR 能力。而在使用自控路由时，这些能力都需要开发者自行封装。我们推荐开发者使用约定式路由。
 :::
 
 ## 其他路由方案

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

@@ -52,7 +52,7 @@ Modern.js 能为开发者提供极致的**开发体验（Development Experience
 - 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
 - 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
 - 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
-- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
+- 🌏 **周边生态**：自研状态管理、微前端、模块打包等周边需求。
 - 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
 
 ## 和其他框架的对比

package/docs/zh/guides/topic-detail/generator/create/config.mdx

@@ -23,8 +23,6 @@ sidebar_position: 3
 
 - 文档站 -- doc
 
-- Monorepo -- monorepo
-
 ### scenes
 
 问题：请选择项目场景
@@ -70,7 +68,3 @@ Npm 模块的 `package.json` 的 name 字段值，该配置值为字符串类型
 ## 文档站
 
 <PackageManager />
-
-## Monorepo
-
-<PackageManager />

package/docs/zh/guides/topic-detail/generator/new/use.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 使用
 
-在 Web 应用、 Npm 模块和 Monorepo 项目中，我们提供了 `new` 命令用于创建项目元素、开启功能和创建子项目。
+在 Web 应用、 Npm 模块中，我们提供了 `new` 命令用于创建项目元素、开启功能和创建子项目。
 
 ## Web 应用
 

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.53.0",
+  "version": "2.54.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.53.0"
+    "@modern-js/sandpack-react": "2.54.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.53.0"
+    "@modern-js/builder-doc": "^2.54.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.53.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.53.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.54.0",
+    "@modern-js/builder-doc": "2.54.0"
   },
   "scripts": {
     "dev": "rspress dev",