Skip to content

Commit

Permalink
docs: fix ssr fallback docs (#6527)
Browse files Browse the repository at this point in the history
  • Loading branch information
zllkjc authored Nov 11, 2024
1 parent d5d78e8 commit 71f9c79
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,29 @@ If a Client Loader is defined for the route, it will be used to re-fetch the dat

### Component Rendering Error

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.
If the Data Loader executes correctly but the component rendering fails, SSR rendering will partially or completely fail, as shown in the following code:

```tsx
import { Await, useLoaderData } from '@modern-js/runtime/router';
import { Suspense } from 'react';

const Page = () => {
const data = useLoaderData();
const isNode = typeof window === 'undefined';
const undefinedVars = data.unDefined;
const definedVars = data.defined;

return (
<div>
{isNode ? undefinedVars.msg : definedVars.msg}
</div>
);
};

export default Page;
```

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.

:::tip
The behavior of component rendering errors is unaffected by `loaderFailureMode` and will not execute the Client Loader on the browser side.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,29 @@ Modern.js 也支持通过 [`server.ssr`](/configure/app/server/ssr) 配置项中

### 组件渲染报错

当组件渲染报错时,Modern.js 会自动降级到 CSR 模式,并重新发起数据请求。如果重新渲染仍然出错,则展示 `<ErrorBoundary>` 组件。
如果 Data Loader 执行正常,但组件渲染报错时,SSR 渲染将会部分或完全失败,例如以下代码:

```tsx
import { Await, useLoaderData } from '@modern-js/runtime/router';
import { Suspense } from 'react';

const Page = () => {
const data = useLoaderData();
const isNode = typeof window === 'undefined';
const undefinedVars = data.unDefined;
const definedVars = data.defined;

return (
<div>
{isNode ? undefinedVars.msg : definedVars.msg}
</div>
);
};

export default Page;
```

此时,Modern.js 会将页面降级为 CSR,并利用 Data Loader 中已有的数据渲染。如果重新渲染仍然出错,则展示 `<ErrorBoundary>` 组件。

:::tip
组件渲染报错的行为,不会受到 `loaderFailureMode` 的影响,也不会在浏览器端执行 Client Loader。
Expand Down

0 comments on commit 71f9c79

Please sign in to comment.