การแคช การตรวจสอบใหม่ และการสตรีม

Refetching the same data on every request is slow and expensive. The App Router caches results so repeated requests are instant, while giving you control over how fresh that data stays.

In Server Components, the built-in fetch is extended. By default Next.js may cache responses so the same URL is not refetched within a render. You opt into freshness explicitly.

For data that must always be current, disable caching with cache: no-store. Each request hits the source.

Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.

You can also set revalidation for a whole route by exporting a segment config constant.

When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.

Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.

Streaming sends HTML to the browser in chunks as it becomes ready. Instead of waiting for the slowest data, the page shell appears immediately and slow parts fill in.

Wrap a slow component in <Suspense> with a fallback. Next.js streams the fallback first, then swaps in the real content when its data resolves.

An automatic streaming boundary: add a loading.js in a route folder and Next.js shows it instantly while the page segment loads. No manual Suspense needed.

Quick guide:

• Rarely changes -> default cache
• Changes on a schedule -> revalidate (ISR)
• Changes on an event -> on-demand revalidateTag
• Always live -> no-store

You mastered data freshness and streaming:

• The App Router caches fetch by default; no-store opts out
• revalidate enables time-based ISR
• revalidatePath/revalidateTag invalidate on demand
• Suspense and loading.js stream UI for fast perceived loads