SWR and TanStack Query are client-side data-fetching libraries that cache, deduplicate, and automatically refresh requests so components don't each manage their own fetch logic.

Think of a shared office assistant who remembers what everyone last asked for and quietly checks for updates in the background, rather than each employee calling the same vendor separately every few minutes. Server Components handle most data fetching in Next.js, but not everything — when data depends on user interaction, real-time updates, or client-side state that changes after the page loads, you need client-side fetching, and these two libraries are the tools that make it clean and reliable.

When You Need Client-Side Fetching

Server Components fetch on the server, before the page loads. Use client-side fetching when:

Data depends on user interaction (search, filters, pagination)
Data should update in real-time or after actions
Data depends on client state (auth token, browser storage)
You need optimistic updates (update UI before server confirms)

SWR — Simple and Fast

SWR (Stale-While-Revalidate) from Vercel is minimal and fast. It fetches data, caches it, and revalidates it in the background:

bash

npm install swr

tsx

"use client";

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then(r => r.json());

function UserDashboard() {
    const { data: user, error, isLoading } = useSWR("/api/user/me", fetcher);
    
    if (isLoading) return <DashboardSkeleton />;
    if (error) return <ErrorMessage message="Failed to load user data" />;
    
    return (
        <div>
            <h1>Welcome, {user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}

SWR automatically:

Caches the response
Revalidates when the user refocuses the tab
Deduplicates identical requests
Retries on failure

SWR with Dynamic Keys

When the URL depends on state:

tsx

function SearchResults() {
    const [query, setQuery] = useState("");
    const debouncedQuery = useDebounce(query, 300);
    
    // Key is null when query is empty — SWR won't fetch
    const { data: results, isLoading } = useSWR(
        debouncedQuery ? `/api/search?q=${debouncedQuery}` : null,
        fetcher
    );
    
    return (
        <div>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            {isLoading && <Spinner />}
            {results?.map(r => <ResultCard key={r.id} result={r} />)}
        </div>
    );
}

SWR Mutation

After a user creates or updates data, tell SWR to refetch:

tsx

import useSWR, { useSWRConfig } from "swr";

function CourseList() {
    const { mutate } = useSWRConfig();
    const { data: courses } = useSWR("/api/courses", fetcher);
    
    async function handleDelete(id: string) {
        await fetch(`/api/courses/${id}`, { method: "DELETE" });
        
        // Revalidate the courses list
        mutate("/api/courses");
    }
    
    return (
        <div>
            {courses?.map(course => (
                <div key={course.id}>
                    {course.title}
                    <button onClick={() => handleDelete(course.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
}

TanStack Query (React Query) — Full-Featured

TanStack Query has more features: mutations with loading states, infinite scroll, prefetching, and sophisticated cache management.

bash

npm install @tanstack/react-query @tanstack/react-query-devtools

Setup

tsx

// src/providers/query-provider.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";

export function QueryProvider({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient({
        defaultOptions: {
            queries: {
                staleTime: 60 * 1000,   // data is fresh for 1 minute
                retry: 2,               // retry failed requests twice
            },
        },
    }));
    
    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
}

tsx

// src/app/layout.tsx
import { QueryProvider } from "@/providers/query-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <body>
                <QueryProvider>{children}</QueryProvider>
            </body>
        </html>
    );
}

useQuery — Fetching Data

tsx

"use client";

import { useQuery } from "@tanstack/react-query";

async function fetchCourses(category?: string): Promise<Course[]> {
    const url = category ? `/api/courses?category=${category}` : "/api/courses";
    const res = await fetch(url);
    if (!res.ok) throw new Error("Failed to fetch courses");
    return res.json();
}

function CourseCatalog() {
    const [category, setCategory] = useState("all");
    
    const { data: courses, isLoading, isError, error } = useQuery({
        queryKey: ["courses", category],    // cache key — changes when category changes
        queryFn: () => fetchCourses(category === "all" ? undefined : category),
        staleTime: 5 * 60 * 1000,          // fresh for 5 minutes
    });
    
    return (
        <div>
            <CategoryFilter value={category} onChange={setCategory} />
            
            {isLoading && <CourseGridSkeleton />}
            {isError && <ErrorMessage message={error.message} />}
            {courses && <CourseGrid courses={courses} />}
        </div>
    );
}

useMutation — Creating and Updating Data

tsx

import { useMutation, useQueryClient } from "@tanstack/react-query";

interface CreateCourseInput {
    title: string;
    description: string;
    price: number;
}

function CreateCourseForm() {
    const queryClient = useQueryClient();
    
    const mutation = useMutation({
        mutationFn: (input: CreateCourseInput) =>
            fetch("/api/courses", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(input),
            }).then(r => r.json()),
        
        onSuccess: (newCourse) => {
            // Invalidate and refetch the courses list
            queryClient.invalidateQueries({ queryKey: ["courses"] });
            
            // Or: add the new course to the cache immediately
            queryClient.setQueryData(["courses"], (old: Course[] = []) => [
                ...old,
                newCourse,
            ]);
        },
        
        onError: (error) => {
            console.error("Failed to create course:", error);
        },
    });
    
    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        mutation.mutate({
            title: formData.get("title") as string,
            description: formData.get("description") as string,
            price: Number(formData.get("price")),
        });
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input name="title" placeholder="Course title" required />
            <textarea name="description" placeholder="Description" />
            <input name="price" type="number" min="0" step="0.01" />
            
            <button type="submit" disabled={mutation.isPending}>
                {mutation.isPending ? "Creating..." : "Create Course"}
            </button>
            
            {mutation.isError && (
                <p className="text-red-600">Failed to create course</p>
            )}
            {mutation.isSuccess && (
                <p className="text-green-600">Course created!</p>
            )}
        </form>
    );
}

Infinite Queries

For "load more" buttons or infinite scroll:

tsx

import { useInfiniteQuery } from "@tanstack/react-query";
import { useInView } from "react-intersection-observer";

function InfinitePostList() {
    const { ref, inView } = useInView();
    
    const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
        queryKey: ["posts"],
        queryFn: ({ pageParam = 1 }) =>
            fetch(`/api/posts?page=${pageParam}&limit=10`).then(r => r.json()),
        getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.nextPage : undefined,
        initialPageParam: 1,
    });
    
    useEffect(() => {
        if (inView && hasNextPage) fetchNextPage();
    }, [inView, hasNextPage, fetchNextPage]);
    
    const posts = data?.pages.flatMap(page => page.posts) ?? [];
    
    return (
        <div>
            {posts.map(post => <PostCard key={post.id} post={post} />)}
            
            {/* Sentinel element — when visible, load more */}
            <div ref={ref}>
                {isFetchingNextPage && <Spinner />}
            </div>
        </div>
    );
}

SWR vs TanStack Query

	SWR	TanStack Query
Bundle size	~4kb	~13kb
Mutations	Basic	Full-featured with state
Devtools	None	Excellent devtools
Infinite queries	Good	Excellent
Learning curve	Low	Medium
Best for	Simple fetching	Complex data requirements

Start with SWR for simple cases. Reach for TanStack Query when you need sophisticated mutation handling, optimistic updates, or infinite scroll.

Next lesson: Optimistic updates and mutations — making UI feel instant.

💬 DiscussionPowered by GitHub Discussions

📱

Get this course's notes on Telegram!

Free cheat sheets, summaries & practice exercises

Get Notes Free →

22 minLesson 23 of 33

Course Contents(33 lessons)

▾

React Core Concepts

React 19 Fundamentals & JSX14 min

Components: Thinking in React18 min

Props & Component Composition16 min

useState: State Management20 min

useEffect: Side Effects Mastery22 min

Event Handling & Synthetic Events14 min

Advanced React Patterns

Context API & useContext20 min

useReducer for Complex State18 min

useMemo & useCallback: Performance16 min

useRef & Forwarding Refs16 min

Custom Hooks: Reusable Logic22 min

React.memo & Avoiding Re-renders18 min

Next.js App Router

Next.js 15 Architecture Overview16 min

Layouts & Nested Layouts18 min

Loading UI & Suspense16 min

Error Boundaries & not-found14 min

Route Groups & Parallel Routes18 min

Server & Client Components

The Server Component Mental Model20 min

When to Use Client Components16 min

Server Actions & Form Handling22 min

Streaming & Suspense Boundaries18 min

Data Fetching & Caching

Next.js Caching Strategies Explained24 min

SWR & React Query for Client Fetching22 min

Optimistic Updates & Mutations18 min

Authentication

Auth Overview: Sessions vs JWT vs OAuth18 min

NextAuth.js v5 Setup26 min

Protected Routes & Middleware20 min

Styling & UI

Tailwind CSS in Next.js16 min

Shadcn UI Component Library20 min

Dark Mode Implementation14 min

Testing & Deployment

Testing React with Vitest & Testing Library26 min

Deploy to Vercel: Production Setup18 min

Performance Optimization & Core Web Vitals22 min

Data Fetching & Caching

SWR & React Query for Client Fetching

SWR & React Query for Client-Side Fetching

SWR and TanStack Query are client-side data-fetching libraries that cache, deduplicate, and automatically refresh requests so components don't each manage their own fetch logic.

When You Need Client-Side Fetching

Server Components fetch on the server, before the page loads. Use client-side fetching when:

Data depends on user interaction (search, filters, pagination)
Data should update in real-time or after actions
Data depends on client state (auth token, browser storage)
You need optimistic updates (update UI before server confirms)

SWR — Simple and Fast

SWR (Stale-While-Revalidate) from Vercel is minimal and fast. It fetches data, caches it, and revalidates it in the background:

bash

npm install swr

tsx

"use client";

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then(r => r.json());

function UserDashboard() {
    const { data: user, error, isLoading } = useSWR("/api/user/me", fetcher);
    
    if (isLoading) return <DashboardSkeleton />;
    if (error) return <ErrorMessage message="Failed to load user data" />;
    
    return (
        <div>
            <h1>Welcome, {user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}

SWR automatically:

Caches the response
Revalidates when the user refocuses the tab
Deduplicates identical requests
Retries on failure

SWR with Dynamic Keys

When the URL depends on state:

tsx

function SearchResults() {
    const [query, setQuery] = useState("");
    const debouncedQuery = useDebounce(query, 300);
    
    // Key is null when query is empty — SWR won't fetch
    const { data: results, isLoading } = useSWR(
        debouncedQuery ? `/api/search?q=${debouncedQuery}` : null,
        fetcher
    );
    
    return (
        <div>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            {isLoading && <Spinner />}
            {results?.map(r => <ResultCard key={r.id} result={r} />)}
        </div>
    );
}

SWR Mutation

After a user creates or updates data, tell SWR to refetch:

tsx

import useSWR, { useSWRConfig } from "swr";

function CourseList() {
    const { mutate } = useSWRConfig();
    const { data: courses } = useSWR("/api/courses", fetcher);
    
    async function handleDelete(id: string) {
        await fetch(`/api/courses/${id}`, { method: "DELETE" });
        
        // Revalidate the courses list
        mutate("/api/courses");
    }
    
    return (
        <div>
            {courses?.map(course => (
                <div key={course.id}>
                    {course.title}
                    <button onClick={() => handleDelete(course.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
}

TanStack Query (React Query) — Full-Featured

TanStack Query has more features: mutations with loading states, infinite scroll, prefetching, and sophisticated cache management.

bash

npm install @tanstack/react-query @tanstack/react-query-devtools

Setup

tsx

// src/providers/query-provider.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";

export function QueryProvider({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient({
        defaultOptions: {
            queries: {
                staleTime: 60 * 1000,   // data is fresh for 1 minute
                retry: 2,               // retry failed requests twice
            },
        },
    }));
    
    return (
        <QueryClientProvider client={queryClient}>
            {children}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
}

tsx

// src/app/layout.tsx
import { QueryProvider } from "@/providers/query-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <body>
                <QueryProvider>{children}</QueryProvider>
            </body>
        </html>
    );
}

useQuery — Fetching Data

tsx

"use client";

import { useQuery } from "@tanstack/react-query";

async function fetchCourses(category?: string): Promise<Course[]> {
    const url = category ? `/api/courses?category=${category}` : "/api/courses";
    const res = await fetch(url);
    if (!res.ok) throw new Error("Failed to fetch courses");
    return res.json();
}

function CourseCatalog() {
    const [category, setCategory] = useState("all");
    
    const { data: courses, isLoading, isError, error } = useQuery({
        queryKey: ["courses", category],    // cache key — changes when category changes
        queryFn: () => fetchCourses(category === "all" ? undefined : category),
        staleTime: 5 * 60 * 1000,          // fresh for 5 minutes
    });
    
    return (
        <div>
            <CategoryFilter value={category} onChange={setCategory} />
            
            {isLoading && <CourseGridSkeleton />}
            {isError && <ErrorMessage message={error.message} />}
            {courses && <CourseGrid courses={courses} />}
        </div>
    );
}

useMutation — Creating and Updating Data

tsx

import { useMutation, useQueryClient } from "@tanstack/react-query";

interface CreateCourseInput {
    title: string;
    description: string;
    price: number;
}

function CreateCourseForm() {
    const queryClient = useQueryClient();
    
    const mutation = useMutation({
        mutationFn: (input: CreateCourseInput) =>
            fetch("/api/courses", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(input),
            }).then(r => r.json()),
        
        onSuccess: (newCourse) => {
            // Invalidate and refetch the courses list
            queryClient.invalidateQueries({ queryKey: ["courses"] });
            
            // Or: add the new course to the cache immediately
            queryClient.setQueryData(["courses"], (old: Course[] = []) => [
                ...old,
                newCourse,
            ]);
        },
        
        onError: (error) => {
            console.error("Failed to create course:", error);
        },
    });
    
    function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        mutation.mutate({
            title: formData.get("title") as string,
            description: formData.get("description") as string,
            price: Number(formData.get("price")),
        });
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input name="title" placeholder="Course title" required />
            <textarea name="description" placeholder="Description" />
            <input name="price" type="number" min="0" step="0.01" />
            
            <button type="submit" disabled={mutation.isPending}>
                {mutation.isPending ? "Creating..." : "Create Course"}
            </button>
            
            {mutation.isError && (
                <p className="text-red-600">Failed to create course</p>
            )}
            {mutation.isSuccess && (
                <p className="text-green-600">Course created!</p>
            )}
        </form>
    );
}

Infinite Queries

For "load more" buttons or infinite scroll:

tsx

import { useInfiniteQuery } from "@tanstack/react-query";
import { useInView } from "react-intersection-observer";

function InfinitePostList() {
    const { ref, inView } = useInView();
    
    const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
        queryKey: ["posts"],
        queryFn: ({ pageParam = 1 }) =>
            fetch(`/api/posts?page=${pageParam}&limit=10`).then(r => r.json()),
        getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.nextPage : undefined,
        initialPageParam: 1,
    });
    
    useEffect(() => {
        if (inView && hasNextPage) fetchNextPage();
    }, [inView, hasNextPage, fetchNextPage]);
    
    const posts = data?.pages.flatMap(page => page.posts) ?? [];
    
    return (
        <div>
            {posts.map(post => <PostCard key={post.id} post={post} />)}
            
            {/* Sentinel element — when visible, load more */}
            <div ref={ref}>
                {isFetchingNextPage && <Spinner />}
            </div>
        </div>
    );
}

SWR vs TanStack Query

	SWR	TanStack Query
Bundle size	~4kb	~13kb
Mutations	Basic	Full-featured with state
Devtools	None	Excellent devtools
Infinite queries	Good	Excellent
Learning curve	Low	Medium
Best for	Simple fetching	Complex data requirements

Start with SWR for simple cases. Reach for TanStack Query when you need sophisticated mutation handling, optimistic updates, or infinite scroll.

Next lesson: Optimistic updates and mutations — making UI feel instant.

💬 DiscussionPowered by GitHub Discussions

📱

Get this course's notes on Telegram!

Free cheat sheets, summaries & practice exercises

Get Notes Free →