0

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.

1
  • Se está demorando pra carregar a Home e cada componente faz sua própria chamada, você pode usar o SWR do Next.js pra aproveitar um cache de client-side e sua home nunca mais vai demorar swr.vercel.app/docs/getting-started Commented 1/09/2022 às 13:55

2 Respostas 2

0

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.

1
  • 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 Bot
    Commented 9/03/2022 às 15:15
0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .