Unlocking the Power of TanStack Query in Next.js 13
The introduction of Server Components in React v18 and Next.js 13 has brought about a significant shift in data handling. Unlike client-side rendering, Server Components render pages on the server by default, making it essential to adapt your state management strategy. In this article, we’ll explore how to harness the capabilities of TanStack Query, a popular third-party library, to manage states in your Next.js app.
What is TanStack Query?
TanStack Query, formerly known as React Query, is a powerful state management solution that provides easy-to-use APIs for your app. It’s designed to simplify state updates in large-scale applications, offering features such as:
- Caching values to avoid refetching or recalculating
- Background refetching of stale data
- Updating stale state values off-screen
- Optimizing performance during pagination, filtering, and more
- Setting a time interval for data refetching
- Automatic garbage collection for server state
These features enhance both user and developer experience, making data handling more efficient.
Using TanStack Query with Next.js 12 or Earlier
To understand how TanStack Query works with client-side rendering, let’s create a demo project that illustrates data handling in Next.js 12 or earlier. We’ll set up a new Next.js project using the pages-based directory, which allows client-side rendering by default.
First, install TanStack Query and set up the basic configuration in the root file (_app.tsx). We’ll use the QueryClientProvider to wrap our entire app, and import ReactQueryDevtools for in-depth insights into data fetching and handling.
Next, we’ll create a simple fetch function that retrieves Pokémon names from the Pokémon API. This function will be passed to the useQuery Hook, which demonstrates how TanStack Query provides a better way to handle data.
Using TanStack Query with Next.js 13
With the introduction of Server Components, some may think that client-side libraries like TanStack Query are no longer necessary. However, TanStack Query offers more than just data fetching; it also handles caching, mutating requests, automatic background data refresh, and explicit handling of query states.
To make TanStack Query work with Next.js 13, we’ll use the experimental ReactQueryStreamedHydration API. This package allows us to fetch data on the server during the initial request, and then hydrate the UI.
Let’s build a simple app that displays a list of robots using the RoboHash API. We’ll create a Provider component that wraps the children prop with ReactQueryStreamedHydration, and use the useQuery Hook to fetch data on the server.
Building a Provider Component
We’ll create a separate folder called utils and add a file called Provider.tsx. In this file, we’ll wrap the children prop with ReactQueryStreamedHydration and add ReactQueryDevtools.
Creating the User Display Page
We’ll use the new App Router and TanStack Query to build a page that displays the list of robots. We’ll define a getUsers function that fetches data using the useQuery Hook, and use the useEffect Hook to demonstrate client-side updates.
Adding a Client-Side Counter Component
Optionally, we can build a purely client-side Counter component using the useState Hook. TanStack Query will ensure that everything runs smoothly.
Conclusion
In this article, we’ve seen how TanStack Query pairs well with the Next.js stack, providing a powerful state management solution that takes care of caching, routing, and data validation. Despite the changes in Next.js 13, the TanStack team has come up with a solution to fetch data on the server and hydrate the client side using ReactQueryStreamedHydration. If you’re starting a project with Next.js 13, Server Components provide a highly optimized way of fetching data, but TanStack Query offers more features and flexibility.