So, as mentioned before, Next.js
performs some pretty aggressive
caching.
And to be precise, there are four
different areas where Next.js caches data
or pages.
Though I will also say that the amount of
caching or the aggressiveness by which
Next.js performs the caching will
depend on the Next.js version you're
using.
You get the most aggressive caching if
you're using Next.js 14.
And you can check your package.json
file to find out which version you're
using.
So you get the most aggressive caching
with Next.js 14.
If you're using Next.js 15 or higher, it'll be
a bit less aggressive because with Next.js
15, some caching behaviors and defaults
were changed.
But I'll highlight the important
differences as we explore the different
kinds of caching.
First, let me give you an overview of the
different kinds of caching Next.js
performs for you.
And that starts with request
memoization, which is a fancy term
which in the end simply means that
Next.js stores data requests with the
same configuration so that duplicate
requests are avoided.
That's the main idea.
And this request memoization only
happens during one request that's
being handled on the Next.js server.
This still might not be 100% clear, but I'll
show you how request memoization
works and what it means for you in
detail at a concrete example in the next
lectures.
No worries.
So there is this mechanism that simply
exists to make sure that duplicate
unnecessary requests to some data
source are avoided.
There also is a separate data cache
managed by Next.js which might sound
similar but which actually has a different
purpose.
Where request memoization aims to
avoid duplicate requests to a data
source for a single request that's
handled by the Next.js server, the data
cache is all about storing and reusing
data that has been fetched from a data
source if it hasn't changed.
The idea behind this data cache
therefore is not to deduplicate requests
or avoid duplicate requests but instead
to avoid requests altogether unless the
data has changed.
Which of course means that your
application may be a bit faster because
those extra round trips to the data
source are avoided.
And this data cache then persists until
it's revalidated manually by you and you
will learn how to do that or after a
certain time set by you and you will also
learn how to do that.
In addition to caching data that might
be used by pages, Next.js also manages
a full route cache.
And the idea here is that Next.js does
not just cache and store and reuse data
that may be used by pages but instead
the entire page, the entire HTML code
and the entire React server component
payload which is managed under the
hood and which is used to render those
pages.
This therefore does not just avoid extra
round trips to some data source but it
instead entirely avoids the re-rendering
of an entire HTML page and hence it
speeds up pages even further because
existing pages can be reused.
That's the idea here.
And this cache also persists until the
related data cache is revalidated.
So when updated data is there, pages
also will be re-rendered but only then.
And then last but not least there is a
router cache.
And one key difference here is that all
three other caches, request
memoization, data cache and full route
cache, all these caches are managed on
the server side.
The router cache on the other hand is a
cache that's managed on the client side
and here Next.js also stores some React
server component payload in memory in
the browser and it does that so that
navigations between pages can happen
faster.
Because even with the full route cache,
Next.js of course would need to send a
request to the Next.js server to get that
cache.
cached page and that request to the
server can be sped up or avoided if the
page data is already managed on the
client side and that's the idea behind the
router cache.
And this cache will be invalidated when
new pages are rendered by the server or
whenever you leave the Next.js rendered
website and come back to it, for
example.
So it's also worth noting that this router
cache, this client-side router cache has
been made a bit less aggressive with
Next.js 15, simply to ensure that you
don't run into weird situations where for
some reason some page might not
reflect your latest data when you
expected it to.
But the feature still exists, for example
also to speed up backward and forward
navigation if the user uses the
appropriate buttons and so on.
So these are four different important
caches managed by Next.js and if you
wanna dive deeper there is an entire
page in the official documentation to
which you find a link attached to this
lecture which explains these different
caches in even greater detail and also
has some nice graphics here.
But we'll of course also explore those
caches, specifically the first three caches
since these are the important ones we
need to manage throughout this section
and we'll see how they work, how we can
revalidate data and what they mean for
us as a Next.js developer.