Tornar cada componente cliente seguro para renderizar no servidor

Fixkamo-internal
Navios
26 de agosto de 2026 às 03:03 UTC
Autor
kamo
Enviar
e029a0f

Next server-renders client components, assim `window`, `document', `localStorage', `sessionStorage' e `navigator' não existem durante a renderização que produz o HTML. Lendo um em um corpo de componente lança ReflectionError no servidor, e um lance lá é uma página em branco em vez de uma degradada. Quatro componentes conseguiram. FlutuanteChatWindow read window.innerWidth/innerHeight in a useState inicial e novamente em suas restrições de arrastar; ChatBox computou sua maximização altura da janela. interiorHeight; Lightbox e AddToContactsDialog portalizado em documento. alguém sem guarda. Todos os quatro estão atrás de um ouvinte que só os monta depois de um ação do usuário, para que o servidor nunca alcança-los hoje — estes guardas são o que mantém detalhe de implementação do chamador em vez de uma suposição de carga. FlutuanteChatWindow foi também recomputado em cada renderização para um uso de valorO Estado descarta após o primeiro; agora é preguiçoso. Adiciona scripts/check-ssr-safe.mjs, que caminha cada arquivo 'use client' com o TypeScript API do compilador e relatórios lê que acontece durante renderização. Funciona no teste NPM. Fazer a análise certa levou três correções, tudo vale a pena gravar porque cada uma delas é uma maneira de escrever este cheque erroneamente: - Tratar qualquer Declaração de Função como "deferido" faz com que relate ZERO. Reagir componente É uma declaração de função, e seu corpo é executado durante renderização. Apenas um Em minúsculas é um ajudante invocado mais tarde. - «janela» e «documento» são identificadores comuns. Um atributo JSX chamado `window=`, uma tecla objeto `document:`, e um suporte desestruturado `{ window: editing }` são rótulos, não lê — quatro componentes reais usam exatamente esses. - O guarda idiomático não embrulha lexicalmente a leitura. «se (!montado) voltar nulo» senta várias instruções acima de `createPortal(x, document.body)`, então caminhando de O identificador nunca o encontra. Quatro componentes já estavam seguros desta forma, e um verificar que não pode vê-lo teria pessoas "fixando" código correto. Verificado contra controlos positivos plantados em ambas as direcções: um componente não protegido é reportado, um montado-guardado não é. tsc -- noEmit limpo sobre todos os quatro componentes e as suas importações transitivas; todos os 10 guardas passam. Isto limpa o bloqueador ao remover o portão de montagem MemberListProvider, que é o que mantém todo o aplicativo autenticado fora do HTML renderizado pelo servidor. Removendo-o é um mudança separada e ainda quer uma passagem de fumo rota, porque seria a primeira vez Estas rotas já foram renderizadas por servidores.

Todas as alterações

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços