9.md

← Pagina Inicial

Pré-renderização e busca de dados

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

Buscando dados no momento da solicitação

Se você precisar buscar dados no momento da solicitação, e não no tempo de compilação, tente a renderização Server-side:

Para usar a renderização do lado do servidor, você precisa exportar getServerSideProps em vez de getStaticProps da sua página.

Using getServerSideProps

Aqui está o código inicial para getServerSideProps. Não é necessário para o exemplo do nosso blog, por isso não o implementaremos.

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

Como getServerSideProps é chamado no momento da solicitação, seu parâmetro (context) contém parâmetros específicos da solicitação. Você pode aprender mais em nossa documentação.

Você deve usar getServerSideProps apenas se precisar renderizar previamente uma página cujos dados devem ser buscados no momento da solicitação. O tempo para o primeiro byte (TTFB) será mais lento que o getStaticProps porque o servidor deve calcular o resultado em cada solicitação e o resultado não pode ser armazenado em cache por uma CDN sem configuração extra.

Renderização Client-side

Se você não precisar pré-renderizar os dados, também poderá usar a seguinte estratégia (denominada Renderização no Client-side):

• Gera estaticamente (pré-renderiza) partes da página que não requerem dados externos.

• Quando a página for carregada, busque dados externos do cliente usando JavaScript e preencha as partes restantes.

Essa abordagem funciona bem para as páginas do painel do usuário, por exemplo. Como um painel é uma página privada específica do usuário, o SEO não é relevante e a página não precisa ser pré-renderizada. Os dados são atualizados com freqüência, o que requer a busca de dados no momento da solicitação.

SWR

A equipe por trás do Next.js criou um gancho React para busca de dados chamado SWR. É altamente recomendável que você esteja buscando dados no lado do cliente. Ele lida com armazenamento em cache, revalidação, rastreamento de foco, busca em intervalos e muito mais. Não abordaremos os detalhes aqui, mas aqui está um exemplo de uso:

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Check out the SWR documentation to learn more.

É isso aí!

Na próxima lição, criaremos páginas para cada postagem de blog usando rotas dinâmicas.

Novamente, você pode obter informações detalhadas sobre getStaticProps e getServerSideProps em nossa documentação.

← Pagina Inicial