Como previnir que seu site carregue sem estilos utilizando Next.JS
Em algum momento, navegando pela web utilizando Firefox, você já reparou em um site que primeiro mostra o HTML puro, sem estilos, para depois aplicá-los?
Site: https://adactio.com/
Video:
É um comportamento que dificilmente nós vemos nos sites em que navegamos, porém é um bug conhecido a no mínimo 6 anos na comunidade que utiliza firefox, como da para ver no fórum:
Se repararmos o mesmo exemplo, agora no Google Chrome, não acontece esse comportamento:
Esse erro, se da por conta de como o Firefox lida com o carregamento de links css externos junto do carregamento de Javascrips.
Como no site de exemplo, a grande maioria dos sites que apresentam esse comportamento, fazendo o carregamento de seus estilos via tag <link/>:
.html
<link rel="stylesheet" href="/global.css">E o carregamento do JS do site nos sites mais atuais, é sempre async ou defer, fazendo com que o Firefox carregue de forma também async/defer (por padrão) o seu CSS, mostrando primeiro o HTML e depois aplicando o css carregando de for não blocante.
Hoje a solução encontrada é fazer com que o Firefox carregue ao menos uma tag script/link de forma syncrona, ou seja, para que dê tempo suficiente do CSS ser importado, enquanto o browser termina o parse daquela tag script.
Exemplo de tag script simples:
.html
<script>0</script>Esse bug foi discutido também no repositório do NextJS: