非服务端渲染（SSR）

NoSsr 的目的是从服务器端渲染（SSR）里删除组件。

该组件可用于各种情况：

对于不支持服务端渲染的依赖包实施补救。
通过仅在首屏上呈现，来改善客户端上的首次绘制时间。
减少服务器上的渲染时间。
在过重的服务器负载下，您可以打开服务降级。
通过仅渲染重要的内容（使用 defer 属性），从而来改善交互时间。

捆绑包的大小

Client-side deferring

Server and Client

<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
  Server and Client
</Box>
<NoSsr>
  <Box
    sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
  >
    Client only
  </Box>
</NoSsr>

<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
  Server and Client
</Box>
<NoSsr>
  <Box
    sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
  >
    Client only
  </Box>
</NoSsr>

Press Enter to start editing

延迟帧数

在其核心中，NoSr 组件的目的是 推迟渲染。正如在前一个演示中所展示的那样，您可以使用它来将推迟从服务器到客户端的渲染。

但你也可以使用它来推迟客户端自身的渲染。您可以使用 defer 属性来等待一个屏幕帧后，再渲染子组件。 React 会做 2 次提交而不是 1 次。

Unstyled

📦 362 B gzipped

As the component does not have any styles, it also comes with the Base package.

import NoSsr from '@mui/base/NoSsr';

API

<NoSsr />