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).

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:

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.

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.

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.

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:

O que é Solid!

Autor: Victor Gabriel de Carvalho Paulino.