No SSR

No-SSR 组件将子组件的渲染从服务器端延迟到客户端。

包大小

简介

No-SSR 是一个实用组件，可防止其子组件在服务器端渲染。

此组件在多种情况下非常有用

为不支持服务器端渲染 (SSR) 的损坏依赖项创建应急方案
通过仅渲染首屏内容来改善首次绘制时间
减少服务器上的渲染时间
当服务器负载过重时，启用服务降级
通过仅渲染重要的内容（使用 defer 属性）来改善可交互时间 (TTI)

组件

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

No-SSR 组件的核心目的是将渲染从服务器延迟到客户端，如下面的演示所示

服务器和客户端

<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>

按 Enter 开始编辑

自定义

延迟客户端渲染

您还可以使用 No-SSR 来延迟特定组件在客户端的渲染——例如，在渲染特别复杂或数据量大的组件之前，让应用程序的其余部分加载完成。

以下演示展示了如何使用 defer 属性来优先渲染 No-SSR 组件嵌套之外的应用程序其余部分