Ao acessar a minha página web, há uma grande demora na renderização da home, então primeiro aparece o header e o footer e depois com demora vem a seção hero. Creio que isso seja pelo fato de todos os componentes da página principal estarem renderizando juntos. Na página principal há vários componentes que compõem as seções. Alguma solução para renderização assíncrona dos componentes que ainda não apareceram em tela? Estou usando nextjs.
2 Respostas
Geralmente diante dessa situação usamos Skeleton ou algum outro componente de Loading
como por exemplo o react-loader-spinner ou se preferir um Custom Loading
, feito por você mesmo.
E a demora para renderizar os componentes, talvez seja por causa das chamadas a api
ou algum outro serviço
que sua aplicação use.
-
Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.– Comunidade BotCommented 9/03/2022 às 15:15
Partindo do cenário hipotético onde seus componentes precisam ser renderizados apenas quando uma determinada chamada ou serviço for concluido, você pode fazer o controle da seguite forma.
O código abaixo tem como intuito controlar a renderização do html enquanto a chamada para a api estiver em execução. No momento que ela for concluida o estado loading do declarado no componente passa a ser false, e isso significará que request ja foi concluida e que seu html já pode ser montado com dados dependentes.
O bloco fictício que indica que o if (loading) return <span>carregando dados....</span>
pode ser substituido por qualquer código personalizado e apenas ele será mostrado para o usuário que estiver acessando aquela determinada página.
Complementando oque o kataik disse, isso pode ser substituido por um spinner ou outra alternativa qualquer.
export default function page() {
const [loading, setloading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
getApi();
}, []);
function getApi() {
const response = await fetch .... //sua função que busca dados na API.
setData(response);
setloading(false);
}
if (loading) return <span>carregando dados....</span>;
return (
<>
<Component01 data={data} />
<Component02 data={data} />
<Component03 data={data} />
<Component04 data={data} />
</>
);
}
Espero ter entendido e explicado corretamente sua dúvida.