Sem SSR

O NoSsr remove intencionalmente componentes do contexto de Server Side Rendering (SSR).

Esse componente pode ser útil em várias situações:

Válvula de escape para dependências quebradas que não suportam SSR.
Melhorar o tempo para a primeira pintura no cliente renderizando somente a primeira parte da página (above the fold).
Reduzir o tempo de renderização no servidor.
Sob carga de servidor muito pesada, você pode ativar a degradação do serviço.
Melhorar o tempo de interação apenas renderizando o que é importante (com a propriedade defer).

A paleta com funções de estilo.

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

Adiamento de quadros

Em sua essência, o objetivo do componente NoSsr é adiar a renderização. Como está ilustrado na demonstração anterior, você pode usá-lo para adiar a renderização do servidor para o cliente.

Mas você também pode usá-lo para adiar a renderização dentro do próprio cliente. Você pode aguardar um quadro de tela com a propriedade defer para renderizar o children. React faz 2 commits em vez de 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

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<NoSsr />