Antes de falarmos sobre a busca de dados, vamos falar sobre um dos conceitos mais importantes no Next.js: pré-renderização.
Por padrão, o Next.js pré-renderiza todas as páginas. Isso significa que o Next.js gera HTML para cada página antecipadamente, em vez de fazer tudo pelo JavaScript do cliente. A pré-renderização pode resultar em melhor desempenho e SEO.
Cada HTML gerado é associado ao código JavaScript mínimo necessário para essa página. Quando uma página é carregada pelo navegador, seu código JavaScript é executado e torna a página totalmente interativa. (Esse processo é chamado de hydration.)
Você pode verificar se a pré-renderização está ocorrendo, executando as seguintes etapas:
-
Desative o JavaScript no seu navegador (veja como no Chrome) e…
-
Tente acessar esta página (o resultado final deste tutorial).
Você deve ver que seu aplicativo é renderizado sem JavaScript. Isso porque o Next.js pré-renderizou o aplicativo em HTML estático, permitindo que você veja a interface do aplicativo sem executar o JavaScript.
Nota: Você também pode tentar as etapas acima no
localhost, mas o CSS não será carregado se você desativar o JavaScript.
Se o seu aplicativo for um React.js simples (sem o Next.js.), não haverá pré-renderização, portanto, você não poderá vê-lo se desativar o JavaScript. Por exemplo:
-
Ative o JavaScript no seu navegador e confira esta página. Este é um aplicativo simples do React.js criado com o Create React App.
-
Agora, desative o JavaScript e acesse a mesma página novamente.
-
Você não verá mais o aplicativo. Em vez disso, ele dirá "You need to enable JavaScript to run this app." Isso ocorre porque o aplicativo não é pré-renderizado em HTML estático.
Aqui está um rápido resumo gráfico:
Em seguida, vamos falar sobre duas formas de pré-renderização em Next.js.
