Caching in NextJs

I've never fully grasped caching in NextJS. When I recently came across a youtube vid about cache components I found myself completely baffled. I couldn't quite place how things like dynamic rendering, server components, caching and use cache all fit together.

So, I decided to take a deeper dive into caching and document this into a series of posts. I have found in the past that writing about a subject forces you to delve deeper into the subject, leading to a better understanding.

My goal is to examine each type of caching mechanism in Next and try to really understand them using definitions, examples, tests, logs and even opening up the cache files. On top of that, I will also take a good look at these new-ish cache components.

Note from the future

While writing this, Next updated the docs on caching. So at various points, the Next 16 docs I was referring changed. To solve this I had to refer to the old Next 15 docs. These old docs are still valid in Next 16. However, caching in Next is changing. The fact that the docs updated quite drastically, is a reflection of that. This is also part of the subject of this series.

The first part of this series (2-11) will cover the old model of caching, after that I will look into the new one. Learning the old model is still valuable, even indispensable. So I would highly recommend not skipping it.

Types of caching

Let start with a quick overview. From the Next 15 docs, we learn that there are 4 types of caching in Next:

• Request memoization
• Data cache
• Full route cache
• Router cache

Each of these caching mechanisms have a different goal but they also:

• Cache different things.
• Live in a different place: server or client (browser).
• Have a different lifespan.
• Require different update strategies.

But don't worry about this second list right now, we will get into this later. For now, remember: 4 types of caching.

In the coming chapters, we will dive into each of these caching mechanisms. We start with Full Route Cache.