Is it unwise to use @tanstack/react-query within a Next.js app?
I have an app that fetches data every time I click a tab. I'd like those fetches to happen far less frequently, particularly only when the respective tab-data changes.
6 Replies
deep-jade•10mo ago
It is not unwise. It works great with SSR too. It's easier to work with than fetch override caching frameworks like next use.
conscious-sapphireOP•10mo ago
May I trouble you to point me to a tutorial on how to use it?
deep-jade•10mo ago
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
deep-jade•10mo ago
You can use it as normal in client components.
If you want to precache data on the server and reuse it on the client it's a little extra management.
With SSR you can't export a global query client. Or the cache will be shared between users.
You have to depend on useQuery.
In server functions create a new client.
That's all in the docs.
sunny-green•10mo ago
I'd read thought the whole series on ssr up to this point
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
It'll take a bit to grok but you can figure it out. If you have flexiblity on what stack you can choose, you could also checkout Tanstack Router/Start or React Router v7
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
sunny-green•10mo ago
For your tab issue speciffly, we could probaly give you some better pointers with a stackblitz demo