Bom dia, estou criando um portfólio em Next, mas no carregamento da aplicação, nos primeiros segundos o site carrega só o HTML e cerca de 1 segundo depois o CSS, gostaria de saber como corrigir isso, estou utilizando styled-components para estilizar.
Fala mano. Não tenho certeza, mas acredito que seja porque o styled components não seja zero runtime. Quando a gente utiliza um framework com SSR tipo o nextjs, o nosso componente já tem que vir pronto do servidor, inclusive o seu css. Infelizmente o styled components tem um runtime ainda no cliente, pode ser por isso que você só ver o HTML no inicio e depois é carregado o seu CSS.
Pra resolver esse problema é necessário usar alguma solução que tenha essa característica, como o tawilnd. Também sei que tem uma solução CSS in JS muito parecida com o styled components que possui isso, se não me engano é o Vanilla Extract.
Espero que tenha ajudado.
Reforçando o que o kassio disse, o Tailwind pode ser uma alternativa muito promissora para o seu projeto! É uma ferramenta que está crescendo muito é muito importante um dev front end saber lidar com ela.
Estou usando ele em um pojeto pessoal grande e estou gostando muito!