Next.js é uma estrutura robusta que permite aos desenvolvedores criar rapidamente aplicativos React renderizados no lado do servidor. Tem várias características essenciais. Um de seus principais recursos é a capacidade de buscar dados facilmente e disponibilizá-los prontamente para os componentes.

A busca de dados é um recurso essencial que permite aos desenvolvedores recuperar e exibir dados em um site/aplicativo da web. Existem algumas maneiras diferentes de buscar dados no Next.js, cada uma com suas vantagens e casos de uso. Este artigo explorará diferentes maneiras de buscar dados em Next.js.

Fazendo uso do gancho useEffect para buscar dados

O useEffect gancho é um React hook usado para executar efeitos colaterais, como chamadas de API em componentes. Você pode usar o gancho useEffect para buscar dados em Next.js.

Esse gancho é útil para páginas que precisam de dados dinâmicos, como páginas de perfil de usuário que mostram informações específicas do usuário que está conectado.

Para usar o gancho useEffect, você primeiro o importa para o componente de sua escolha, busca os dados e renderiza sua página usando-os.

Por exemplo:

importar { useEffect, useState } de'reagir';
exportarpadrãofunçãoLar() {
const [data, setData] = useState("");
 useEffect(() => {
 buscar(' https://api.example.com/data');
 .então( (resposta) => resposta.json() )
 .então( (dados) => setData (dados) )
 }, []); 
retornar (


 {data.name}
 </div>
 )
}

Este bloco de código usa o gancho useEffect para buscar dados de uma API. If passa dois parâmetros para o hook useEffect: uma função para buscar os dados e um array de dependências. Em caso de sucesso, ele usa setData() para atualizar o estado do componente com os dados que a solicitação de busca retorna.

A matriz de dependência que você passa para o gancho useEffect deve conter o valor do qual o efeito depende. O componente executará novamente o efeito somente quando o valor na matriz de dependência for alterado. Se a matriz de dependência estiver vazia, como neste exemplo, o efeito será executado apenas na primeira renderização.

Lidando com a revalidação automática usando SWR

O SWR A biblioteca (stale-while-revalidate) é uma biblioteca de gancho React para lidar com a busca de dados. Você deve configurar a biblioteca SWR primeiro, para usá-lo em seu aplicativo Next.

Um dos principais recursos da biblioteca SWR é sua capacidade de automatizar a revalidação de dados. Esse recurso é essencial quando os dados são atualizados com frequência e você precisa que eles estejam sempre atualizados. Essa funcionalidade garante que seu aplicativo sempre tenha acesso aos dados mais atuais, tornando-o mais dinâmico e responsivo aos seus usuários.

A biblioteca SWR faz uma nova solicitação de busca para uma API quando um usuário se concentra novamente em uma página ou alterna entre as guias. Quando um usuário sai de uma página, os dados exibidos na tela tornam-se obsoletos. Quando eles retornam à página, a biblioteca SWR envia uma nova solicitação de busca à API e compara os novos dados aos dados obsoletos para determinar se eles foram alterados.

Para impedir que a biblioteca SWR execute esta ação, você pode usar o revalidateOnFocus opção.

Igual a:

const { dados, erro, isLoading } = useSWR(' https://api.example.com/data', buscador, {
 revalidateOnFocus: falso,
})

Definir a propriedade revalidateOnFocus como false garantirá que a biblioteca SWR não revalide seus dados toda vez que você focar novamente na página.

A biblioteca SWR também revalida os dados sempre que um usuário se reconecta à Internet. Essa ação pode ser muito útil em determinadas situações e funciona automaticamente.

Para desativar a ação, você pode usar o revalidateOnReconnect opção:

const { dados, erro, isLoading } = useSWR(' https://api.example.com/data', buscador, {
 revalidateOnReconnect: falso,
})

Para desativar a revalidação automática de seus dados, defina as propriedades revalidateOnFocus e revalidateOnRecconect como false.

Usando a biblioteca Isomorphic-Unfetch para executar solicitações de busca

O isomórfico-unfetch library é uma biblioteca pequena e leve que pode executar solicitações de busca em um aplicativo Next.js. A biblioteca é uma excelente alternativa ao nativo buscar API. É simples de usar, o que o torna perfeito para desenvolvedores iniciantes em fazer solicitações de busca.

Você pode usar isomorphic-unfetch como um polyfill para navegadores mais antigos que não suportam a API de busca nativa. A biblioteca isomorphic-unfetch é minimalista e adequada para trabalhar em pequenos aplicativos.

Para usar isomorphic-unfetch em um aplicativo Next.js, instale a biblioteca executando o seguinte comando:

npm install isomorphic-unfetch

Você pode importar a biblioteca e usá-la em seu componente para buscar dados, assim:

importar Buscar de'isomorphic-unfetch'
importar {useState, useEffect} de'reagir'
exportarpadrãofunçãoLar() {
const [data, setData] = useState(nulo)
 useEffect(() => {
 Buscar(' https://api.example.com/data')
 .então( (resposta) => resposta.json)
 .então( (dados) => setData (dados) )
 }, [])

se (!dados) retornar<div>Carregando...div>
retornar (


{data.name}</h1>
 </div>
 )
}

A função isomorphic-unfetch funciona tanto no lado do cliente quanto no lado do servidor.

Busca eficiente de dados com Next.js

A busca de dados é um recurso importante no desenvolvimento de aplicativos. O Next.js fornece várias maneiras de buscar dados, cada uma com suas vantagens e compensações.

Ao decidir o método a ser usado, considere as vantagens e desvantagens e certifique-se de usar uma técnica com a qual se sinta confortável.