<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
先日、Next.js Conf 2024が開催されました！(日本時間だと眠い時間帯でしたね...)
<iframe id="zenn-embedded__0067cb4aea854" src="https://embed.zenn.studio/card#zenn-embedded__0067cb4aea854" data-content="https%3A%2F%2Fnextjs.org%2Fconf" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://nextjs.org/conf" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/conf</a>
そこで話題になったのが<code>"use cache"</code>ではないでしょうか？今回は以下のブログをもとに、<code>"use cache"</code>の概要について解説していきたいと思います。<code>"use cache"</code>がどんなものかを掴みたい人はぜひ最後までお読みください！
<iframe id="zenn-embedded__882e8d1c3ad92" src="https://embed.zenn.studio/card#zenn-embedded__882e8d1c3ad92" data-content="https%3A%2F%2Fnextjs.org%2Fblog%2Four-journey-with-caching" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://nextjs.org/blog/our-journey-with-caching" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/blog/our-journey-with-caching</a>
<aside class="msg message">!<div class="msg-content">
<code>"use cache"</code>は2024/10/27段階ではまだexperimentalな機能であるためご注意ください。
</div></aside>
<h1 id="next.js-app-router%E3%81%AEcache" data-line="14" class="code-line">
<a class="header-anchor-link" href="#next.js-app-router%E3%81%AEcache" aria-hidden="true"></a> Next.js App Routerのcache</h1>
App Routerではこれまでデフォルトでcacheが有効でした。例えば<code>fetch()</code>関数においてデフォルトでcacheが有効であり、開発者としては動的に取得したいのに、デフォルトが静的であるため動的なアプリケーション作成では開発体験はあまりよくありませんでした。
しかし、これからのApp Routerでは、<code>fetch()</code>関数はデフォルトでcacheされません。つまり、デフォルトの状態ではすべて動的となります。
では、これからはcacheさせたいときはどうするか。そこで<code>"use cache"</code>の登場です。
<h2 id="%22use-cache%22" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%22use-cache%22" aria-hidden="true"></a> <code>"use cache"</code>
</h2>
cacheを有効にしたいところに<code>"use cache"</code>を定義します。
<h3 id="%E3%83%9A%E3%83%BC%E3%82%B8%E5%85%A8%E4%BD%93%E3%82%92cache%E3%81%95%E3%81%9B%E3%82%8B" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E3%83%9A%E3%83%BC%E3%82%B8%E5%85%A8%E4%BD%93%E3%82%92cache%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> ページ全体をcacheさせる</h3>
静的なページを作成する場合などは、<code>app/page.tsx</code>のファイルTOPに<code>"use cache"</code>を定義することで対応できます。
<div class="code-block-container">
<div class="code-block-filename-container">app/page.tsx</div>
<pre class="language-tsx"><code class="language-tsx code-line" data-line="30">"use cache"
 
export default async function Page() {
 return fetch(...) // no error
}
</code></pre>
</div><h3 id="%E9%83%A8%E5%88%86%E7%9A%84%E3%81%ABcache%E3%81%95%E3%81%9B%E3%82%8B" data-line="38" class="code-line">
<a class="header-anchor-link" href="#%E9%83%A8%E5%88%86%E7%9A%84%E3%81%ABcache%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 部分的にcacheさせる</h3>
基本的にはデフォルトでcacheさせたいが、一部の処理を動的にしたい場合などは以下のようにします。<code>app/layout.tsx</code>で<code>"use cache"</code>を定義することで、基本的にはcacheを有効にさせつつ、<code>app/page.tsx</code>で一部だけ動的にデータをfetchすることも可能です。
<div class="code-block-container">
<div class="code-block-filename-container">app/layout.tsx</div>
<pre class="language-tsx"><code class="language-tsx code-line" data-line="42">"use cache"
 
export default async function Layout({ children }) {
 const response = await fetch(...)
 const data = await response.json()
 return &lt;html&gt;
 &lt;body&gt;
 &lt;div&gt;{data.notice}&lt;/div&gt;
 {children}
 &lt;/body&gt;
 &lt;/html&gt;
}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">app/page.tsx</div>
<pre class="language-tsx"><code class="language-tsx code-line" data-line="57">import { Suspense } from 'react'
async function Component() {
 return fetch(...) // no error
}
 
export default async function Page() {
 return &lt;Suspense fallback="..."&gt;&lt;Component /&gt;&lt;/Suspense&gt;
}
</code></pre>
</div>「デフォルトでcacheを有効にして、一部だけ無効にする」「デフォルトでcacheを無効にして、一部だけ有効にする」どちらも可能になることが嬉しいですね...！
<h3 id="%E9%96%A2%E6%95%B0%E5%8D%98%E4%BD%8D%E3%81%A7cache%E3%81%95%E3%81%9B%E3%82%8B" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%E9%96%A2%E6%95%B0%E5%8D%98%E4%BD%8D%E3%81%A7cache%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 関数単位でcacheさせる</h3>
<code>"use cache"</code>は関数単位でも定義可能です。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="74">async function getNotice() {
 "use cache"
 const response = await fetch(...)
 const data = await response.json()
 return data.notice;
}
</code></pre></div><h2 id="cachetag()%E3%81%A7cache%E3%82%92%E3%82%BF%E3%82%B0%E4%BB%98%E3%81%91%E3%81%99%E3%82%8B" data-line="83" class="code-line">
<a class="header-anchor-link" href="#cachetag()%E3%81%A7cache%E3%82%92%E3%82%BF%E3%82%B0%E4%BB%98%E3%81%91%E3%81%99%E3%82%8B" aria-hidden="true"></a> <code>cacheTag()</code>でcacheをタグ付けする</h2>
<code>cacheTag()</code>は、cacheしたデータをpurge(削除)したいときに使用します。
基本的にcacheはkeyとデータを紐づけて管理しますが、Next.jsではkeyを定義しなくてもNext.js内でデータを管理しておくことができます。しかし、そうすると意図的にcacheを消したい時に、開発者はkeyがわからないため、purgeすることができません。そのため、この機能を使用することで開発者が意図的にcacheしたデータをpurgeすることができるようになります。よりリソース単位でcacheを管理しやすくなりますね！
<div class="code-block-container"><pre class="language-ts"><code class="language-ts code-line" data-line="89">import { cacheTag } from 'next/cache';
 
async function getNotice() {
 'use cache';
 cacheTag('my-tag');
}
</code></pre></div><h2 id="cachelife()%E3%81%A7cache%E3%81%AE%E6%9C%89%E5%8A%B9%E6%9C%9F%E9%96%93%E3%82%92%E5%AE%A3%E8%A8%80%E3%81%99%E3%82%8B" data-line="98" class="code-line">
<a class="header-anchor-link" href="#cachelife()%E3%81%A7cache%E3%81%AE%E6%9C%89%E5%8A%B9%E6%9C%9F%E9%96%93%E3%82%92%E5%AE%A3%E8%A8%80%E3%81%99%E3%82%8B" aria-hidden="true"></a> <code>cacheLife()</code>でcacheの有効期間を宣言する</h2>
<code>cacheLife()</code>は、cacheの有効期間を指定したいときに使用します。例えば1時間ごとに新しいデータを取得したいときなどに使うことができます。これは以前の<code>fetch()</code>の<code>revalidate</code>とほとんど同じ役割なのかなと思います。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="102">"use cache"
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export default async function Page() {
 cacheLife("minutes")
 return ...
}
</code></pre></div><h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="112" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
いかがでしたでしょうか。<code>"use cache"</code>の登場により、複雑だったNext.jsのcacheが少しシンプルになり、cache戦略が大きく変わってくるような機能だなと感じました。個人的にはコンポーネント・関数単位でcacheを制御できることが嬉しいなあと感じました。まだまだ進化するNext.jsの今後もとても楽しみです！

Next.jsの"use cache"の概要を掴みたいあなたへ

cacheLife()でcacheの有効期間を宣言する

Discussion