Next.js App Router Caching: Explained!

Video Description

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