mediumFrontend

How do you fetch data in Next.js Client Components (SWR, React Query, use)?

Q: How do you fetch data in Next.js Client Components (SWR, React Query, use)?

**TL;DR.** In Client Components you fetch with libraries like **SWR** or **React Query** (caching, revalidation, mutations) or stream a Server Component promise into the ** use() ** hook. Prefer fetching in **Server Components** when possible; use client fetching for **highly interactive/real-time** data. SWR / React Query cache, revalidate, mutations, polling use(promise) server

907 views

Understand the problem

Client-side fetching when you need interactivity.

nextjsclient-fetchingswrreact-query

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

SWR for live client data

'use client';
import useSWR from 'swr';
const fetcher = (url: string) => fetch(url).then(r => r.json());

export function LivePrice({ id }: { id: string }) {
  const { data, error, isLoading } = useSWR('/api/price/' + id, fetcher,
    { refreshInterval: 5000 });          // poll every 5s, cached + deduped
  if (isLoading) return <Spinner />;
  return <span>{data.price}</span>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does fetch caching work in the Next.js App Router (force-cache, no-store, revalidate)?

How do you revalidate data after a mutation in Next.js?