缓存、重新验证与流式传输
掌握 App Router 如何缓存获取的数据、按计划或按需重新验证数据，并使用 Suspense 流式传输 UI，提升感知加载速度。
缓存、重新验证与流式传输 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Caching Matters
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.
The Default fetch Cache
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.
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();Forcing Fresh Data
For data that must always be current, disable caching with cache: no-store. Each request hits the source.
const res = await fetch(url, { cache: 'no-store' });Time-Based Revalidation (ISR)
Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.
const res = await fetch(url, {
next: { revalidate: 60 }, // refresh at most once per minute
});Route Segment Config
You can also set revalidation for a whole route by exporting a segment config constant.
export const revalidate = 3600; // revalidate this route hourlyOn-Demand Revalidation
When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.
import { revalidatePath } from 'next/cache';
revalidatePath('/blog');Cache Tags
Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.
await fetch(url, { next: { tags: ['posts'] } });
// later:
revalidateTag('posts');What Is Streaming?
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.
Suspense Boundaries
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.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading feed...</p>}>
<Feed />
</Suspense>The loading.js File
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.
export default function Loading() {
return <p>Loading page...</p>;
}Choosing a Strategy
Quick guide:
- Rarely changes -> default cache
- Changes on a schedule ->
revalidate(ISR) - Changes on an event -> on-demand
revalidateTag - Always live ->
no-store
Quick Check
Test your caching knowledge.
Recap
You mastered data freshness and streaming:
- The App Router caches
fetchby default;no-storeopts out - revalidate enables time-based ISR
- revalidatePath/revalidateTag invalidate on demand
- Suspense and loading.js stream UI for fast perceived loads
常见问题解答
「缓存、重新验证与流式传输」课时是免费的吗？
是的 — 「缓存、重新验证与流式传输」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。
「缓存、重新验证与流式传输」这节课中我会学到什么？
掌握 App Router 如何缓存获取的数据、按计划或按需重新验证数据，并使用 Suspense 流式传输 UI，提升感知加载速度。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack Web Apps 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「缓存、重新验证与流式传输」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。