Next.js Data

12 examples to get you started with Next.js Data -- 8 basic and 4 intermediate.

Fetch data directly inside async Server Components with built-in caching and deduplication.

Mutate data from the server using "use server" functions -- no API routes needed.

Refresh cached data on demand or on a timer with revalidatePath, revalidateTag, and ISR.

Stream server-rendered content progressively using React Suspense boundaries and loading.tsx.

Understand the four caching layers in Next.js -- request memoization, data cache, full route cache, and router cache.

Read and manipulate URL query parameters with useSearchParams (client) and the searchParams prop (server).

Read and set cookies and headers on the server with the cookies() and headers() APIs from next/headers.

Fetch multiple data sources in parallel to eliminate waterfalls and speed up server rendering.

Process large datasets, paginated APIs, and streaming data with async generators in Server Components and Route Handlers.

Build a single fetch utility that every client component references — consistent error handling, auth headers, base URL, and caching in one place.

Build a centralized API client with Axios — interceptors for auth, error handling, retries, and request/response transforms in one configured instance.

A condensed summary of the 25 most important best practices drawn from every page in this section.