← Pagina Inicial

Pré-renderização e busca de dados

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

Geração estática com e sem dados.

A geração estática pode ser feita com e sem dados.

Até o momento, todas as páginas que criamos não exigem a obtenção de dados externos. Essas páginas serão geradas estaticamente automaticamente quando o aplicativo for criado para produção.

No entanto, em algumas páginas, talvez você não consiga renderizar o HTML sem buscar primeiro alguns dados externos. Talvez você precise acessar o sistema de arquivos, buscar a API externa ou consultar seu banco de dados no momento da construção. O Next.js suporta este caso - Geração estática com dados - prontos para uso.

Geração estática com dados usando getStaticProps

Como funciona? Bem, no Next.js, quando você exporta um componente da página, também pode exportar uma função assíncrona chamada getStaticProps. Se você fizer isso, então:

• getStaticProps é executado em tempo de construção na produção e…

• Dentro da função, você pode buscar dados externos e transmiti-los como os props da página.

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

Essencialmente, o getStaticProps permite que você diga ao Next.js: “Ei, esta página possui algumas dependências de dados - portanto, quando você renderizar esta página no momento da criação, resolva-as primeiro!”

Nota: No modo de desenvolvimento, getStaticProps é executado em cada solicitação.

Vamos usar getStaticProps

É mais fácil aprender fazendo isso; portanto, a partir da próxima página, usaremos getStaticProps para implementar nosso blog.

← Pagina Inicial