非服务端渲染(SSR)
NoSsr 的目的是从服务器端渲染(SSR)里删除组件。
该组件可用于各种情况:
- 对于不支持服务端渲染的依赖包实施补救。
- 通过仅在首屏上呈现,来改善客户端上的首次绘制时间。
- 减少服务器上的渲染时间。
- 在过重的服务器负载下,您可以打开服务降级。
- 通过仅渲染重要的内容(使用
defer
属性),从而来改善交互时间。
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: 'primary.contrastText',
}}
>
Client only
</Box>
</NoSsr>
延迟帧数
在其核心中,NoSr 组件的目的是 推迟渲染。 正如在前一个演示中所展示的那样,您可以使用它来将推迟从服务器到客户端的渲染。
但你也可以使用它来推迟客户端自身的渲染。 您可以使用 defer
属性来等待一个屏幕帧后,再渲染子组件。 React 会做 2 次提交 而不是 1 次。