ProNextJS
    Loading
    lesson

    Caching with the Next.js App Router

    Jack HerringtonJack Herrington
    Code

    Let's dive into the caching mechanisms built into the Next.js App Router.

    While caching can sometimes feel like a headache during development, it's essential for getting the best performance in production.

    Next.js App Router employs multiple layers of caching, and we'll dig into each one to see how they work individually and collectively. By the end of this, you'll have a solid understanding of how caching operates, so you won't be caught off guard by unexpected behavior.

    The first cache we'll examine is the Full Route cache. You'll likely encounter this one first when transitioning your Next.js application from dev mode into build mode.

    Transcript

    It's time, perhaps actually past time, to talk about all of the caching that's built into Next.js. The Next.js App Router is vigorously cached. There are multiple levels of caching. Yeah, well, it can seem like a pain in the butt when it bites you. Turns out, they're actually trying to do the right thing.

    High performance apps are high performance primarily because they are in large part cached. And so there are multiple caches in the Next.js App Writer and you have to understand how those all interact. So in this section, we are going to be digging into each one of those caches one by one to see how they all work individually and then all work together to demystify it for you so that you can understand for yourself how all this caching works so you don't get stung by it. The first one we're gonna take a look at is the full route cache. It is the fundamental cache that you're going to probably run into first as you transition from dev mode into build mode.

    Let's take a look at that one first.