O que é Data Fetching e como utilizar?
![A imagem mostra desenvolvedores discutindo o projeto. Leia o artigo e saiba mais sobre data fetching.](https://brasistec.com.br/wp-content/uploads/2022/06/data-fetching-770x400.png)
O que é Data Fetching e como utilizar?
Data Fetching é o processo de buscar dados de uma fonte, normalmente um servidor que responde através da API. Neste artigo, iremos abordar algumas formas de utilizar o data fetching no lado do servidor e no lado do cliente para API externa e para a API interna do NextJS.
Renderizando páginas no lado do servidor
Abaixo, iremos comentar sobre algumas funções que o NextJS disponibiliza para renderizarmos as nossas páginas.
getStaticProps
É uma função que é executada durante o processo de build da aplicação para gerar as páginas estáticas.
Esta função também possui uma propriedade chamada revalidate, que podemos definir para renderizar o conteúdo em produção, caso haja alguma alteração dos dados.
Quando utilizar?
- Para carregar os dados da página durante o build da aplicação a fim de melhorar o SEO;
- Para manter os dados em cache;
- Quando queremos que os arquivos html e json gerados pela execução da função sejam armazenados em um CDN para melhorar o desempenho.
Desvantagem
Porém, a sua desvantagem é que o conteúdo pode se tornar obsoleto.
getStaticPaths
Para utilizarmos getStaticProps a fim renderizar páginas com URLs dinâmicas, devemos usá-la em conjunto com a função getStaticPaths.
getStaticPaths é responsável por gerar as rotas dinâmicas da aplicação e só utilizamos ela com getStaticProps. Assim, não podemos utilizá-la com getServerSideProps, pois o getServerSideProps já gera as rotas automaticamente.
Normalmente, fazemos um fetch dentro de getStaticPaths e criamos as rotas com base nas propriedades dos dados retornados. Por exemplo, uma rota que contenha a propriedade id ou o nome do produto.
getServerSideProps
Essa função é executada no momento em que a página é solicitada pelo usuário.
Quando utilizar?
- Quando queremos carregar os dados durante cada requisição da página.
Desvantagem
O tempo para o First Byte (TTFB) será maior do que o getStaticProps. Isso porque o servidor deve calcular o resultado para cada requisição. Até poderíamos armazenar o resultado em um cache por um CDN, porém, seria uma configuração extra.
Agora, se os dados atualizam com muita frequência e se não existe a necessidade de pré-renderizar a página para o SEO, podemos optar por realizar o data fetching no lado do cliente. Um bom exemplo disso seria um dashboard onde as informações são específicas para cada usuário e, por isso, não precisam ser pré-renderizadas e os dados atualizam a todo momento.
Criação do Data Fetching
Não existe muito segredo para criar data fetching para uma API externa, basta chamarmos ela normalmente com a seguinte sintaxe (tanto para a renderização no lado do cliente quanto para o lado do servidor).
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-1.png)
Lado do Cliente
Quando queremos realizar o data fetching para a API interna do NextJS no lado do cliente, devemos adicioná-lo dentro de um useEffect e a url da requisição passa a ser /api/arquivo:
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-2.png)
O carregamento dos dados normalmente é realizado através do useEffect (ciclo de vida). Isso porque, com ele, temos o controle sob algum erro ou chamada indesejada que possa aparecer na aplicação. Dessa forma, nos garante que os dados só carreguem durante a inicialização da página.
swr
Existe uma outra forma de se realizar o data fetching no lado do cliente no NextJs e é através de um react hook chamado swr.
O swr utiliza uma estratégia que, no primeiro momento, exibe os dados (obsoletos) em cache para o usuário enquanto ele está revalidando os dados para obter as informações atualizadas.
Este hook é muito recomendado pelo NextJS para realizar o carregamento dos dados. Além disso, possui muitos outros recursos, como rastreamento de foco, representação em intervalos, entre outros.
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-3.png)
Lado do Servidor
Agora, para realizar um data fetching para API interna do NextJS no lado do servidor, ao invés de fazer uma requisição para API/arquivo, iremos utilizar urlDoSite/api/arquivo.
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-4.png)
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-5.png)
Nos exemplos acima, temos um problema de desempenho. Isso porque estamos fazendo uma requisição desnecessária. Dessa forma, não faz sentido realizar um fetch para a API interna, pois as funções de renderização do NextJs são executadas no servidor, assim como a api interna. Portanto, estaríamos fazendo uma requisição do servidor para o mesmo servidor, para acessar o método get da API e obter os dados.
Para resolver este problema, poderíamos simplesmente mover todo o código relacionado ao get da API para a função getStaticProps. Porém, é mais elegante e reutilizável criar uma função com esse código e exportá-la da API ou de uma pasta lib na raiz do projeto.
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-6.png)
![](https://luby.com.br/wp-content/uploads/2022/06/data-fetching-7.png)
Nestes exemplos, já não temos mais a requisição extra. Não precisa ser necessariamente uma API externa, como mostrado no exemplo, poderia ser uma lógica que acessa o banco de dados ou algum arquivo do sistema que gostaríamos de acessar com o file system.
Conclusão
O data fetching é muito importante para o SEO, temos que ter conhecimento das melhores práticas para realizá-lo tanto no lado do cliente como no lado do servidor.
Dessa forma, devemos analisar melhor a nossa aplicação e verificar qual é o melhor tipo de renderização para cada página.
Veja também:
Autor: Victor Gabriel de Carvalho Paulino.