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/tre...
◆ Optimistic UI example: https://github.com/vercel/next.js/tre...
◆ Docs: https://nextjs.org/docs/app/building...
◆ Deep dive: https://github.com/vercel/next.js/dis...
◆ Partial Prerendering: https://vercel.com/blog/partialprere...

#nextjs #react