Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説

Next.jsがApp Routerの"次"に目指すもの 第2回

　Next.js 15では、App Routerを使ってきたユーザーからのフィードバックを受けて、キャッシュの制御に大きな変更が加えられました。デフォルトの挙動が変更されるため、戸惑うユーザーもいるかもしれませんが、より扱いやすい方向に変化したことを中心に解説します。

対象読者

• Next.jsの近年の改善点について知りたい方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sequoia 15.1.1
• Node.js 23.4.0
• npm 10.9.2
• Next.js 15.1.0

App Routerの付加価値はルーティングとキャッシュ制御

　前回はNext.js 15より前に登場していた新機能について解説しました。Partical Prerenderingにより、動的なコンテンツを含むページでも大半のコンテンツを静的レンダリングの対象にできるのは、魅力的でしたね。

　さて、Next.jsのApp Routerは、Reactの新機能であるServer Componentsを初めて導入したフレームワークです。その後もServer Componentsを採用する有力なフレームワークが他に登場していないことから、Server Componentsの仕組み自体をApp Routerが提供する機能と混同される方もときどきおられると筆者は感じています。しかし、サーバーでコンポーネントを処理したり、処理結果を独自のプロトコルでクライアントに送信してハイドレートする機能は、App RouterではなくReactが提供するものです。

　では、App Routerというフレームワークが提供している付加価値は何でしょうか。それは、ルーティングとキャッシュ制御だと筆者は考えています。

　ルーティングは、URLとコンポーネントのマッピングを行う機能としてPages Routerの頃からNext.jsの目玉機能でしたね。それに加えて、App Routerでは、fetch() 関数による通信の結果やServer Componentsのレンダリング結果を再利用しやすくして、より高速なWebサイトを構築できるようにキャッシュを扱う機能が追加されています。ルーティングの機能も、キャッシュ機能と強力に統合されているので、おおざっぱな言い方をすればApp Routerの大半の機能はキャッシュを扱うために用意されていると言えるかもしれません。