[Dúvida] Carregamento da aplicação Next

Olá Victor.

Tudo bem?

Esse comportamento é comum quando o CSS é carregado de forma assíncrona, o que pode causar um breve momento em que o HTML é renderizado antes do CSS ser aplicado.

Analise o seu código e veja se não tem nenhuma inconsistência, no código ou algo assim.

Uma solução para corrigir isso é utilizar o conceito de "Critical CSS". O Critical CSS é o CSS mínimo necessário para renderizar a parte visível da página inicial. Você pode incorporar esse CSS crítico diretamente no HTML da página inicial, evitando assim o atraso no carregamento do CSS completo.

Existem algumas ferramentas e bibliotecas disponíveis para ajudar na geração do Critical CSS, como o "Penthouse" e o "Critical". Essas ferramentas analisam sua página e geram automaticamente o CSS crítico necessário.

Aqui está um exemplo de como você pode usar o "Critical" no seu projeto NextJS:

1. Instale a biblioteca "critical" usando o npm ou yarn:

npm install critical

1. Importe a biblioteca no arquivo da sua página inicial (geralmente chamado de "index.js" ou "Home.js"):

import { getCriticalCSS } from 'critical';

1. Dentro da função de renderização da sua página inicial, chame a função getCriticalCSS passando o URL da sua página e algumas opções:

const Home = () => {
  useEffect(() => {
    getCriticalCSS('https://seusite.com', {
      inline: true,
      minify: true,
    }).then((css) => {
      // Aqui você pode aplicar o CSS crítico diretamente na página
      const style = document.createElement('style');
      style.innerHTML = css;
      document.head.appendChild(style);
    });
  }, []);

  return (
    // ...
  );
};

Dessa forma, o CSS crítico será gerado e aplicado diretamente na página inicial, evitando o atraso no carregamento do CSS completo.

Espero ter ajudado e bons estudos!