@modern-js/main-doc 0.0.0-nightly-20240616170617 → 0.0.0-nightly-20240617060427

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/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/package.json

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