Next.js App Router Caching Explained 🗃️

Learn how to fetch, cache, and revalidate data using the Next.js App Router.

0:00 – Introduction
0:24 – Demo
1:20 – Caching overview
2:06 – Foundations
6:10 – Static: fetch()
7:03 – Dynamic: fetch() without caching
7:37 – Static: unstable_cache()
9:37 – Dynamic: Direct database calls
10:07 – Revalidating static data
12:32 – Revalidating from external sources (webhooks)
14:12 – Revalidating static data with ISR
15:28 – React cache()
16:40 – App Router and Pages Router differences
17:52 – Example: Forms with useFormState & useFormStatus
19:33 – Using forms without JavaScript
19:59 – Exploring the network tab for a Server Action
20:49 – Example: Optimistic UI
21:45 – Preventing navigations with pending mutations
22:34 – Progressive enhancement
23:39 – Partial Prerendering
24:56 – Conclusion

◆ Forms example: https://github.com/vercel/next.js/tree/canary/examples/next-forms
◆ Optimistic UI example: https://github.com/vercel/next.js/tree/canary/examples/with-redis
◆ Docs: https://nextjs.org/docs/app/building-your-application/caching
◆ Deep dive: https://github.com/vercel/next.js/discussions/54075
◆ Partial Prerendering: https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model

#nextjs #react