Data Fetching Patterns

Fetching in Server Components

In server components, you can use async/await directly. Call your database or API inside the component function and render the result.

async function Page() { const data = await fetchData(); return <div>{data.title}</div> }

Caching

Next.js caches fetch() responses by default. Use cache: "no-store" to opt out. Use revalidate to set ISR (Incremental Static Regeneration) timing.

Parallel Data Fetching

Use Promise.all to fetch multiple data sources concurrently. This avoids waterfall fetching and keeps your page fast.

Server Actions

Server Actions are async functions that run on the server. They're perfect for form submissions and mutations.