Gavin Grant

 apps, and there are multiple ways to do it. In this post, we’ll compare 

—highlighting their key differences, advantages, and best use cases for getting data efficiently.

I'm in the process of building a new web app with Next.js to add to 

 and was evaluating different ways of fetching data. This is what my research uncovered.

 is built into modern browsers and Node.js environments, making it the simplest and most lightweight option for making HTTP requests.

No need to install external dependencies.

Works in both client-side and server-side environments.

Supports streaming and progressive responses.

No built-in support for request cancellation.

Requires manual error handling (e.g., checking 

While Fetch is simple and built-in, some developers prefer a more feature-rich alternative like Axios.

 is a popular third-party library that simplifies HTTP requests and provides more features compared to 

Example: Fetching Data with Axios in Next.js

Supports request cancellation using AbortController. 

Supports interceptors for request/response modifications.

Requires installing an additional package (

For most simple use cases, Fetch or Axios will get the job done. However, for more complex data fetching needs, TanStack Query offers powerful caching and synchronization features.

 (formerly React Query) is a powerful library for data fetching, caching, and background updates in React applications. It simplifies API requests by handling caching, retries, and synchronization out of the box.

Example: Fetching Data with TanStack Query in Next.js

Automatic caching, background refetching, and data synchronization.

Built-in retry, deduplication, and error handling.

Reduces boilerplate by managing loading, error, and success states.

Supports pagination, infinite scrolling, and optimistic updates.

Works well with server-side rendering (SSR) and React Suspense.

Learning curve for configuration and setup.

Primarily designed for React—less useful for the non-React parts of a Next.js app.

The best choice for fetching data depends on your needs:

 if you want a lightweight, built-in solution without extra dependencies.

 if you need better error handling, request cancellation, and interceptors.

 for advanced data fetching with caching, background updates, and synchronization.

 provides an efficient and scalable solution. However, if your use case is simple and doesn’t require complex state handling, 

 for more information on data fetching and caching for this specific framework.