Intermediate Next.js

Per-Request Caching

Scott Moss

Scott Moss

Superfilter AI
Intermediate Next.js

Check out a free preview of the full Intermediate Next.js course

The "Per-Request Caching" Lesson is part of the full, Intermediate Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates per-request caching, which helps eliminate repeated database or server-side calls on a single request. To highlight this, the getCurrentUser utility function, which is called three times from the dashboard page, is wrapped in React's cache function. This reduces the number of invocations to one.

Preview
Close

Transcript from the "Per-Request Caching" Lesson

[00:00:00]
>> Scott Moss: Caching in Next.js is one is way different than a pages directory, okay? So caching in Next.js the way it works is by default on the server component. Everything's cached by default. There are different things that you can put in your code that will turn the caching off, so let me explain that.

[00:00:23]
Let's go to some of our slots, for example. Let's do some things. So for instance, what's a good thing I can do here? So let's do this, I'm gonna go into my current user. I'm going to, we're gonna make a log here, console log get user. So this is gonna this is gonna say get user, and then I'm just gonna like just turn this off for, or actually we'll just leave it we'll just see it, we'll see a number so let's see, let's run this or refresh this.

[00:00:56]
I'm gonna do a hard refresh actually let me clear my console. I'll do a heart refresh. Okay, we saw get user three times. That makes sense because we have three slots that each do it once. So we saw it three times, right? If I refresh it again, we see it again three times.

[00:01:16]
So it's clear that in this case is not cashing, right? We're not caching by default with this scenario, and that's because we're using something that Next.js has determined, is dynamic and should not be cached. And that's gonna be cookies. Because we're using cookies in this function, which is per request, Next.js is smart enough to know like, I should not cache this because this function depends on a dynamic value like cookies which can change every single request.

[00:01:52]
So therefore, it should not be cached. It's just gonna get the same user though. It's gonna hit the database and get the same user three different times or in amount of times or however many times I'm calling this function and one request. It's gonna get it that many times.

[00:02:04]
That's kind of redundant. So, in this case we don't want to do a persistent cache because in that way, it will always read the same cookie that I read last time, and if someone logged out, we would never catch it. But what we do wanna do is a per request cache.

[00:02:24]
We wanna memorize this. So on the same request, it won't do the same function more than once. So that's what we would want in this scenario. So the best way to do that is gonna be with the cache function from React. So if you get the cache function from React, you can just wrap it around this, pretty simple.

[00:02:49]
Okay, how was it doing that? And then we'll just say cache this. This is a per request memorization. So now if I put the log in here.
>> Scott Moss: Let's see what happens. We're gonna go back, we're gonna refresh, and I see user one time now instead of three times.

[00:03:11]
So that's great. We want that, that solved that problem. But there are other scenarios where we might want to cache, we might not want to cache. So let's go look at the other functions that we call to see their behaviors.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now