キャッシュ、再検証、ストリーミング
App Routerが取得データをキャッシュし、スケジュールまたはオンデマンドで再検証し、Suspenseを使ってUIをストリーミングする仕組みを習得します。体感速度の高い読み込みを実現します。
「キャッシュ、再検証、ストリーミング」はCoddyKit上の無料Next.js 15 Fullstack Web Appsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「キャッシュ、再検証、ストリーミング」レッスンは無料ですか？
はい。「キャッシュ、再検証、ストリーミング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応の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を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Server Components徹底入門
- Client Componentsとインタラクティブ性
- 高度なデータ取得パターン
- キャッシュ、再検証、ストリーミング