No SSR

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

捆绑包大小

简介

No-SSR 是一个实用程序组件，可防止其子组件在服务器端渲染，而是将其渲染延迟到客户端。这在多种情况下都很有用，包括

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

下面的演示展示了此组件的工作原理

服务器和客户端

<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 键开始编辑

基础知识

导入

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

自定义

延迟客户端渲染

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

以下演示展示了如何使用 defer 属性来优先渲染应用程序的其余部分，而不是 No-SSR 中嵌套的内容

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<NoSsr />