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).
Adiamento do lado do cliente
Server and Client
<Box p={2} bgcolor="primary.main" color="primary.contrastText">
Server and Client
</Box>
<NoSsr>
<Box p={2} bgcolor="secondary.main" color="primary.contrastText">
Client only
</Box>
</NoSsr>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.