← Pagina Inicial

Pré-renderização e busca de dados

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

Detalhes de getStaticProps

Você pode obter informações detalhadas sobre getStaticProps em nossa documentação. Mas aqui estão algumas informações essenciais que você deve saber sobre getStaticProps.

Buscar API externa ou banco de dados de consulta

Em nossa lib/posts.js, implementamos getSortedPostsData, que busca dados do sistema de arquivos. Mas você pode buscar os dados de outras fontes, como um terminal de API externo, e funcionará perfeitamente:

import fetch from 'node-fetch'

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

Você também pode consultar o banco de dados diretamente:

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

Isso é possível porque o getStaticProps é executado apenas no server-side. Ele nunca será executado no client-side. Ele nem será incluído no pacote JS do navegador. Isso significa que você pode escrever código como consultas diretas ao banco de dados sem que elas sejam enviadas para os navegadores.

Desenvolvimento vs Produção

• No desenvolvimento (npm run dev or yarn dev), getStaticProps é executado em todas as solicitações.

`- In production, getStaticProps runs at build time.

Como ele deve ser executado no tempo de compilação, você não poderá usar dados disponíveis apenas durante o tempo de solicitação, como parâmetros de consulta ou cabeçalhos HTTP.

Permitido apenas em uma página

getStaticProps pode ser exportado apenas de uma página. Você não pode exportá-lo de arquivos que não são de página.

Um dos motivos dessa restrição é que o React precisa ter todos os dados necessários antes da renderização da página.

E se eu precisar buscar dados no momento da solicitação?

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.

Em casos como esse, você pode tentar a renderização Server-side ou ignorar a pré-renderização. Vamos falar sobre essas estratégias antes de prosseguirmos para a próxima lição.

← Pagina Inicial