Next.js 16でキャッシュを管理する

2026/03/01 (日) - 09:00　JavaScript

Next.js16では、従来に比べコンポーネントのキャッシュ管理がより簡潔になり何がキャッシュされているかが分かりやすく、デバッグも容易になりました。ページのほか、コンポーネント、関数もキャッシュできるため、パフォーマンスのアップも期待できます。

PPR(Partial Prerendering)の導入

従来のNext.jsでは、SSR、SSG、ISRで構成することが多かったですが、Next.js 16では新たにPPR(Partial Prerendering)が導入されました。これはページ内で静的部分と動的部分を融合でき、パフォーマンスを重視したページの構築が可能になります。

たとえばオウンドメディアなどでヘッダーやフッターは静的として構成し、記事一覧などを動的に管理することができます。ISRと異なりSEOやアクセシビリティの面で非常に有利です。

Cache Components（use cache ディレクティブ）

今回導入されたのがCache Components（キャッシュコンポーネント）です。各ページやコンポーネントにuse cacheを指定することで、対象となったファイルをキャッシュしてくれるようになります。デフォルトでは使えないため、任意で有効化する必要があります。

next.config.jsにcacheComponents: trueの設定値を加えます。

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
 cacheComponents: true,
};
export default nextConfig;

そのうえでページやコンポーネントの先頭にuse cacheを指定すると、キャッシュされ静的として扱われます。

async function cacheComponent(){
 "use cache";
 return (
  キャッシュするコンポーネント
 );
}

関数でも同様です。例えばデータ取得のfetchなどもキャッシュすることでパフォーマンス向上を期待できます。

async function getPosts(){
 "use cache";
 const res = await fetch('https://example.com/posts');
 const posts = await res.json();
 return posts;
}

なお、PPRを使用してbuildするとPartial Prerenderとしてパブリッシュされます。

Route (app)         Revalidate  Expire
┌ ○ /            　 15m      1y
├ ○ /_not-found
└ ◐ /blog           15m      1y
○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

キャッシュの設定

cache機能のcacheLifeを利用することでキャッシュの有効期限なども設定できます。

import { cacheLife } from 'next/cache';
async function getPosts(){
 "use cache";
 cacheLife(days);
 const res = await fetch('https://example.com/posts');
 const posts = await res.json();
 return posts;
}

例だと1日キャッシュするようになります。細かくは公式ドキュメントを御覧ください。