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