Next.js 15 での App Router の進化について

こんにちは、休日に全力でサッカーをして全身筋肉痛のよしざわです。
Gaji-Labo では Next.js App Router を使って BtoC サイトの大規模リニューアルに携わっています。

10月21日に Next.js 15 の安定版が正式リリースされました。リリースノートを見ると、今回も様々な更新が加えられていますね。今回は Next.js 15 での更新内容の中で、個人的に最も重大な変更だと感じたキャッシュ周りの変化についてお話ししたいと考えています。
この記事を読んで、 Next.js App Router を採用するハードルが少しでも下がると良いなと考えています。

なお、キャッシュ周り以外での変化については触れないので、詳しくはリリースノートを参考にしてください。

Next.js 15からデフォルトでキャッシュが無効に

Next.js 15 から fetch リクエストや get ルートハンドラがデフォルトでデータをキャッシュしない仕様に変更になりました。これだけのことですが、私はこの変更によって、 App Router を採用するハードルがとても低くなったと感じています。

以前から度々、App Router のキャッシュは認知負荷が高くプロダクトの足枷になるようなことが多いといった話題が上がることがありました。App Router はキャッシュの種類が複数あって複雑な上に、それがデフォルトで有効になっているためです。

キャッシュ機構が複雑であることは仕方ないと思いますが、キャッシュがデフォルトで有効になっているため、メンバー全員が複雑なキャッシュについて理解した上で開発を進行する必要がありました。
また、キャッシュが必要ない状況でも考慮を強制されるため、App Router を採用する上でキャッシュ周りの検討は不可欠となり、とりあえず App Router を採用するといったことのハードルが高くなっていたと感じています。

Next.js 15 からはほとんどのキャッシュ機能がデフォルトで無効になっているため、意図しないキャッシュによるバグなどを恐れず、とりあえず App Router を採用し、必要な場面で柔軟にキャッシュを導入するといった戦略を取ることが可能になりました。

なお Next.js 15 以降でも、 React の機能である Request Memorization は常に有効です。

use cache ディレクティブでキャッシュが使いやすくなった

さらに Next.js 15 から、安定版ではないものの、キャッシュを使用するためのディレクティブである use cache と、キャッシュコントロールを行うための関数である cacheLife と cacheTag が登場しました。

Next.js 14 までキャッシュコントロールは fetch 関数の options を用いて行われていましたが、キャッシュの管理が fetch 関数と切り離されたことにより、従来より直感的にキャッシュが扱えるようになったと感じています。

まとめ : App Router が採用しやすくなった

Next.js 15 からは、今まで Next.js App Router を採用する上でネックになることが多かった、デフォルトのキャッシュ有効化がなくなり、さらにこの先のアップデートでキャッシュコントロールが使いやすいものに変わっていく可能性が提示されました。

この記事を読んだ方に、 App Router が良い進化を続けていることが伝わっていると、とても嬉しいです。

Gaji-Labo フロントエンドエンジニア向けご案内資料

Gaji-Labo Culture Deck