Do you even need a data-fetching library?
Server Components can fetch data with no client library at all. Reach for one only when you need caching, background refetching, or sync.
Server first, library second
In Next.js App Router, a Server Component can call fetch directly and stream the result to the page, with no client library or hook involved. That covers most cases where you read data once and render it.
Can a Next.js Server Component fetch this data directly, or does it need to stay live and update after the page loads?
Is it static enough to fetch once with revalidate?
When you need a client library
Once the data has to stay fresh, refetch in the background, or sync across tabs, reach for a client library. These libraries lean on stale-while-revalidate (shows cached data instantly, then refetches in the background). TanStack Query gives fine-grained cache control. SWR is leaner for the common case.
Show me a concrete code comparison of TanStack Query, SWR, and a native Server Component fetch for [describe your data] in a Next.js App Router project.
Default to a Server Component fetch. Add a client library only when the data has to stay live after the page loads.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.
Next.js: Fetching data
DocumentationHow to fetch data in Server Components with no client library, the default this lesson recommends.
https://nextjs.org/docs/app/getting-started/fetching-data
TanStack Query
DocumentationCaching, refetching and sync for server state managed on the client.
https://tanstack.com/query
SWR
DocumentationVercel's leaner stale-while-revalidate data-fetching hook for the common case.
https://swr.vercel.app