Back to Cheatsheets
Next.js

Data Fetching

Server components and data fetching

Server Components

3 items
CommandDescription
async function Page()
Async component
const data = await fetch(url)
Direct fetch
no useEffect needed
Fetch runs on server

Caching

3 items
CommandDescription
fetch(url, { cache: "force-cache" })
Static (default)
fetch(url, { cache: "no-store" })
Dynamic (always fresh)
fetch(url, { next: { revalidate: 3600 } })
ISR (time-based)