Next.js documentation (opens in a new tab)
The official reference for the tools used in this lesson.
Link
Caching and revalidation
Caching is the part people get burned by. Know what layer holds your data, how long it holds it, and which lever invalidates it.
Lesson 3.225m 22sIntermediate11.6k students
Chapters
25:22- 0:00Introduction
- 0:24Demo
- 1:20Caching overview
- 2:06Foundations
- 6:10Static: fetch
- 7:03Dynamic: fetch() without caching
- 7:37Static: unstable_cache
- 9:37Dynamic: Direct database calls
- 10:07Revalidating static data
- 12:32Revalidating from external sources (webhooks
- 14:12Revalidating static data with ISR
- 15:28React cache
- 16:40App Router and Pages Router differences
- 17:52Example: Forms with useFormState & useFormStatus
- 19:33Using forms without JavaScript
- 19:59Exploring the network tab for a Server Action
- 20:49Example: Optimistic UI
- 21:45Preventing navigations with pending mutations
- 22:34Progressive enhancement
- 23:39Partial Prerendering
- 24:56Conclusion
What this lesson covers
- Distinguish request-level caching from the full route cache
- Revalidate on a timer or on demand by tag
- Opt out deliberately when data must always be fresh
This lesson sits in Data Fetching and Caching, part of Next.js App Router in Depth. It assumes what came before it and leads directly into the next lesson in the module.
In this lesson you will
- Distinguish request-level caching from the full route cache
- Revalidate on a timer or on demand by tag
- Opt out deliberately when data must always be fresh
Resources
Personal notes are coming soon.