Next.js App Router Caching: Explained!

Vercel
Vercel
82,908
0
Published 2024-01-15
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: github.com/vercel/next.js/tree/canary/examples/nex…
◆ Optimistic UI example: github.com/vercel/next.js/tree/canary/examples/wit…
◆ Docs: nextjs.org/docs/app/building-your-application/cach…
◆ Deep dive: github.com/vercel/next.js/discussions/54075
◆ Partial Prerendering: vercel.com/blog/partial-prerendering-with-next-js-…

#nextjs #react
All Comments (21)
  • @JaredFL
    Next 20 will include playing the Nextjs theme song on every page load but you can opt out using unstable_loadjQuery to load jQuery into the page which will disable the song.
  • @rmrglr
    All of this should be opt-in, or at least give us a next.config.js option to disable caching all over the app. Default caching behaviour that is so aggressive, that it decides to make fetch calls in your API routes static at build time, it's mind-boggling.
  • @tom.watkins
    I love next but the decisions around caching rank among the worst. You should have just left the fetch API alone (tRPC and anything else that used it immediately had issues) and caching by default was always going to something that many Devs struggled with. The new unstable cache function is how it always should have been done.

    That all being said, it's great to see people's feedback being taken seriously and things changing to reflect this 👍
  • @leerob
    Let me know what questions y'all have, hope this helps!
  • @51Grimz
    Really helpful to see some official examples in video form explained!
  • @Fralleee
    The video we all wanted, thanks and great job!
  • @yoJuicy
    That was so helpful! Would love a weekly video series like this to help people out with intermediate/advanced 13/14 stuff. You guys are amazing.
  • @Daddyjs
    Love your content. Next Js team is so awesome! Keep it up!
  • @incseeuu
    Thanks! Awesome video! I want more content like this about next.js
  • @finally_code
    The development of NextJs is just super confusing. Seeing a video like this makes it super clear. It's just a lot of "we've added some custom magic here, ah and this part is also just some custom magic, ah and this part is custom magic ...". I've been doing react for years and I have to watch and read everything 5x before things start to make sense. What's the big win to be had by adding all this complexity? Marginally more control compared to the 'pages' router? I really applaud everyone who is trying to make sense of all this complexity ... I'm just shaking my head over this ...
  • @axlYT
    imo it would be better if it does not cache by default and u need to explicitly specify this kinda of doCache(). Idk it feels more natural to me this way then always getting confused by all stuff.
  • @syedazeemjaved
    Great job in the first part of the video to highlight that caching does not work (as usual) when we are on a dev server, I remember that this got me scratching heads for quite sometime when I started with the App Router.
  • @lucasprins8895
    That next config option for logging is very useful, thanks!
  • @JEM_GG
    Thank you Lee, these are so helpful
  • @codinginflow
    Instead of unstable_cache I've been using (and teaching) React's cache
  • @WesBos
    this cache API is fantastic - big fan of it! Agree that the cache key + tags are a bit confusing, I'm a big fan!
  • @user-ex7fr7fe9w
    amazing work guys I really love nextJS and what you do so keep it up and don't change the app router in the feature let the base change it a little maybe but don't mess with it i love it
  • @ryzzlas
    Am at 6:40 now at the video. And I really would like to have much more tools to debug caching. Especially, when deployed.
    Because IMO the defaults are good and the idea behind the caching strategies of Next.js too. It's just lacking transparency, what's happening at any given time.
    One idea would be to have a secure API route where we can inspect, what asset is currently cached for a given active deployment, what pages depend on it, etc.
  • @sulavbaral9972
    it would be good if we could get an entire video for how to create a nextjs app like its meant to from the vercel team
    something like a real world application like ecommerce or anything else would be great