Data Fetching and Caching

• await fetch(url) in an async server component runs on the server
• Only rendered output ships: no client JS for the fetch
• Fetch where the data is used; the same URL is deduplicated per render
• Secrets stay on the server; never pass them as props to client components

import { cache } from 'react'
export const getUser = cache(
  (id) => db.user.findUnique({ where: { id } })
)

direct DB call, no API route

• Sequential awaits make a waterfall: each waits for the last
• Independent requests: start together with Promise.all

• Static: HTML built at build time (or on revalidate), served from cache
• Dynamic: HTML built per request
• Static: fastest, CDN-cacheable, can go stale
• Dynamic: always fresh, costs server time per request

• cookies() and headers()
• searchParams prop
• An uncached fetch under your version's caching defaults

export const dynamic = 'force-dynamic'
// or 'force-static'

route segment config forces a mode

• ○ in build output = static
• ƒ in build output = dynamic

• fetch(url, { next: { revalidate: 60 } }) per fetch
• export const revalidate = 60 per route
• Stale-while-revalidate: cached data is served, then refreshed in the background

• revalidatePath('/blog') invalidates that route's cache
• Call it from a server action or route handler
• Tag the fetch, then revalidateTag('posts') hits every fetch with that tag

fetch(url, { next: { tags: ['posts'] } })

// after the mutation succeeds
await db.post.create(data)
revalidateTag('posts')

revalidate after the write, not before

• Data Cache: revalidate, tags, cache: 'force-cache' or 'no-store'
• Full Route Cache: cleared when the Data Cache revalidates, or on redeploy
• Router Cache: back and forward are instant; router.refresh() clears it

• Streaming sends HTML in chunks: better time to first byte, faster feel
• Wrap a slow async server component in <Suspense>
• Only that subtree waits; the rest renders at once
• loading.tsx = automatic Suspense around the page, instant on navigation

<Header />
<Suspense fallback={<Skeleton />}>
  <SlowFeed />
</Suspense>

SlowFeed is an async server component

• Returns an array of params: pre-renders /blog/[slug] at build time
• List only the top pages; the rest generate on first visit

• Client useEffect fetch: adds a waterfall and ships extra JS; use a server component
• Sequential awaits: independent requests queue up instead of running together
• cookies() / headers() high in the tree: the whole route silently turns dynamic
• Revalidating before the mutation ends, or fetches without tags: stale data stays

const [user, posts] = await Promise.all([
  getUser(),
  getPosts(),
])

start together, wait together

await db.post.create(data)
revalidateTag('posts')

revalidate after the mutation; the fetch needs next: { tags: ['posts'] }