@modern-js/main-doc 2.61.0 → 2.62.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -113,7 +113,29 @@ If a Client Loader is defined for the route, it will be used to re-fetch the dat
113
113
 
114
114
  ### Component Rendering Error
115
115
 
116
- If a component throws an error during rendering, Modern.js automatically falls back to CSR mode and re-fetches the data. If re-rendering fails again, the `<ErrorBoundary>` component will be displayed.
116
+ If the Data Loader executes correctly but the component rendering fails, SSR rendering will partially or completely fail, as shown in the following code:
117
+
118
+ ```tsx
119
+ import { Await, useLoaderData } from '@modern-js/runtime/router';
120
+ import { Suspense } from 'react';
121
+
122
+ const Page = () => {
123
+ const data = useLoaderData();
124
+ const isNode = typeof window === 'undefined';
125
+ const undefinedVars = data.unDefined;
126
+ const definedVars = data.defined;
127
+
128
+ return (
129
+ <div>
130
+ {isNode ? undefinedVars.msg : definedVars.msg}
131
+ </div>
132
+ );
133
+ };
134
+
135
+ export default Page;
136
+ ```
137
+
138
+ In this case, Modern.js will fallback the page to CSR and use the existing data from the Data Loader to render. If the rendering still fails, the `<ErrorBoundary>` component will be rendered.
117
139
 
118
140
  :::tip
119
141
  The behavior of component rendering errors is unaffected by `loaderFailureMode` and will not execute the Client Loader on the browser side.
@@ -12,7 +12,7 @@ In this document, you can learn about the main technology stack involved in the
12
12
 
13
13
  Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
14
14
 
15
- Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue3).
15
+ Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://rsbuild.dev/guide/framework/vue).
16
16
 
17
17
  ## Routing
18
18
 
@@ -118,7 +118,29 @@ Modern.js 也支持通过 [`server.ssr`](/configure/app/server/ssr) 配置项中
118
118
 
119
119
  ### 组件渲染报错
120
120
 
121
- 当组件渲染报错时,Modern.js 会自动降级到 CSR 模式,并重新发起数据请求。如果重新渲染仍然出错,则展示 `<ErrorBoundary>` 组件。
121
+ 如果 Data Loader 执行正常,但组件渲染报错时,SSR 渲染将会部分或完全失败,例如以下代码:
122
+
123
+ ```tsx
124
+ import { Await, useLoaderData } from '@modern-js/runtime/router';
125
+ import { Suspense } from 'react';
126
+
127
+ const Page = () => {
128
+ const data = useLoaderData();
129
+ const isNode = typeof window === 'undefined';
130
+ const undefinedVars = data.unDefined;
131
+ const definedVars = data.defined;
132
+
133
+ return (
134
+ <div>
135
+ {isNode ? undefinedVars.msg : definedVars.msg}
136
+ </div>
137
+ );
138
+ };
139
+
140
+ export default Page;
141
+ ```
142
+
143
+ 此时,Modern.js 会将页面降级为 CSR,并利用 Data Loader 中已有的数据渲染。如果重新渲染仍然出错,则展示 `<ErrorBoundary>` 组件。
122
144
 
123
145
  :::tip
124
146
  组件渲染报错的行为,不会受到 `loaderFailureMode` 的影响,也不会在浏览器端执行 Client Loader。
@@ -12,7 +12,7 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
12
12
 
13
13
  Modern.js 使用 [React 18](https://react.dev/) 来构建用户界面,同时也兼容 React 17。
14
14
 
15
- Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue,可以参考 [Rsbuild - Vue](https://rsbuild.dev/zh/guide/framework/vue3)。
15
+ Modern.js 底层的 Rsbuild 支持构建 Vue 应用,如果你需要使用 Vue,可以参考 [Rsbuild - Vue](https://rsbuild.dev/zh/guide/framework/vue)。
16
16
 
17
17
  ## 路由
18
18
 
package/package.json CHANGED
@@ -15,17 +15,17 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.61.0",
18
+ "version": "2.62.0",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.61.0"
25
+ "@modern-js/sandpack-react": "2.62.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@rspress/shared": "1.35.3",
28
+ "@rspress/shared": "1.35.4",
29
29
  "@types/fs-extra": "9.0.13",
30
30
  "@types/node": "^16",
31
31
  "classnames": "^2",
@@ -33,7 +33,7 @@
33
33
  "fs-extra": "^10",
34
34
  "react": "^18.3.1",
35
35
  "react-dom": "^18.3.1",
36
- "rspress": "1.35.3",
36
+ "rspress": "1.35.4",
37
37
  "ts-node": "^10.9.1",
38
38
  "typescript": "^5"
39
39
  },