← Pagina Inicial

Pré-renderização e busca de dados

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9

Duas formas de pré-renderização

O Next.js possui duas formas de pré-renderização: geração estática e renderização no servidor. A diferença está quando ele gera o HTML para uma página.

• Static Generation é o método de pré-renderização que gera o HTML no momento da construção. O HTML pré-renderizado é reutilizado em cada solicitação.

• A renderização Server-side é o método de pré-renderização que gera o HTML em cada solicitação.

No modo de desenvolvimento (quando você executa o npm run dev ou yarn dev), todas as páginas são renderizadas previamente em cada solicitação - mesmo para páginas que usam Static Generation.

Suporte por página

É importante ressaltar que o Next.js permite escolher qual formulário de pré-renderização usar para cada página. Você pode criar um aplicativo Next.js "híbrido" usando a Geração estática para a maioria das páginas e usando a renderização no servidor para outras.

Quando usar a geração estática vs Renderização Server-side

Recomendamos o uso de geração estática (com e sem dados) sempre que possível, porque sua página pode ser construída uma vez e veiculada pela CDN, o que torna muito mais rápido do que um servidor renderizar a página em todas as solicitações.

Você pode usar a geração estática para muitos tipos de páginas, incluindo:

• Páginas de marketing
• Postagens no blog
• Listagens de produtos de comércio eletrônico
• Ajuda e documentação

Você deve se perguntar: "Posso renderizar previamente esta página antes da solicitação do usuário?" Se a resposta for sim, você deve escolher Geração estática.

Por outro lado, a Geração estática não é uma boa ideia se você não puder pré-renderizar uma página antes da solicitação do usuário. Talvez sua página mostre dados atualizados com frequência e o conteúdo da página seja alterado a cada solicitação.

Nesse caso, você pode usar a renderização Server-Side. Será mais lento, mas a página pré-renderizada estará sempre atualizada. Ou você pode pular a pré-renderização e usar o JavaScript do lado do cliente para preencher os dados.

Vamos nos concentrar na geração estática

Nesta lição, focaremos na geração estática. Na próxima página, falaremos sobre geração estática com e sem dados.

← Pagina Inicial