This happened about six months ago, but Next.js 16 was officially released on October 21, 2025.
The concept of Cache Components itself was introduced in Next.js 16, allowing for explicit control over caching.
use cacheOnly the location where the directive is written is cached.<Sunpense>This also enables component-level caching.
Well, since I'm writing an article about it, I'll summarize how to use Next.js 16's "Cache Components" as a memo for myself!
Four caches in Next.js AppRouter
Next.js AppRouter offers the following four types of caching:
- Request Memoization：This refers to eliminating duplicate requests. Even if the same fetch function is called in different components, it will only be executed once. This is a feature that Next.js handles automatically.
- Data CacheThe `fetch` option manipulates the cache implementation.
- Full Route Cache：Page-level caching that works with static rendering (SSG, ISR). A mechanism that caches on the server side using RSC payloads and HTML.
- Router Cache：This mechanism temporarily caches only the RSC payload in the client's memory. It works by using the Next.js component.
New features in Next.js 16"use cache"
What can you do with the new Cache Components feature?
use cacheUse this to simplify cache settings.use cacheOnly the location where the code was written is cached, and the cache can now be explicitly controlled.<Suspense>By enclosing components in a `