【Next.js】Next.js 15で変更された機能と今後のキャッシュ【株式会社ライトコード】

はじめに

2024/10/21にNext.js 15がリリースされました！

今回のリリースでは、安定版（stable）から実験的機能（experimental）まで、様々な新しい機能が追加されています。

全部を紹介したいところですが、今回は特に知っておきたい変更とおまけとして新しいキャッシュのモード（experimental）について見ていこうと思います。

キャッシュの変更

今までのCacheと一番変わった点は、Get リクエストのRoute Handler と Client Router Cacheのキャッシュがデフォルトでは無効になった点でしょう。

特に考えなくても（勝手に？）パフォーマンスの良いアプリケーションを作成できると言った点でキャッシュがデフォルトでされていたようですが、ユーザーからのフィードバックや今後のPartial Prerenderingとの相互作用などを考えられ無効になりました。もちろん明示的に指定することで以前のようにキャッシュすることができます。

Router Handlerのキャッシュの例：

export const dynamic = 'force-static’

ただ、sitemap.ts, opengraph-image.tsx、や icon.tsxなどの metadata files以前通りデフォルトでキャッシュされるようなので気をつけなければいけない点です。

また、Route HandlerだけでなくClient Router Cacheもデフォルトで無効となりClientのページ遷移時にはデフォルトで常に最新のページが表示されるようになりました。Client Router Cacheは以前の私の記事でも書かせていただいたとおり、動的なページであろうと最低でも30秒間キャッシュされ、その間にそのページに遷移した場合はキャッシュされたページ情報が表示されていました。

Next.js 15ではデフォルトでこのキャッシュが無効になりましたが、next.config.jsに設定を追記することで以前のようにキャッシュを有効化できるようです。（まだexperimentalのようですが）

const nextConfig = {

  experimental: {

    staleTimes: {

      dynamic: 30,

    },

  },

};

 

export default nextConfig;

ただ、Client Routerのデフォルトでのキャッシュ無効化になりましたが、

• layout.tsx ファイルをページ遷移間で共有している場合、そのレイアウトはリレンダリングされないのでその中でデータ取得している場合は再取得されません（これは来るPPRに備えてのことのようです）
• ブラウザバック/フォワードでのページ遷移では以前同様にキャッシュが使用されます
• loading.js でのキャッシュは5分間行われます。

非同期リクエストAPI

リクエストで送られてくるデータを取得するAPIが同期的から非同期的に変更になりました。
変更になったAPIは下記になります。

• cookies
• headers
• draftMode
• params（layout.js, page.js, route.js, default.js, generateMetadata, generateViewport の中で使用されている場合）
• page.js で使用されている searchParams

従来の同期的方法だと、レンダリングが開始される前にリクエストで送られてきたデータを上記APIのために準備（データの整形などの処理）する必要があり、上記APIを使用していない場合でも一律にその間待機しないといけなかったため、非同期化すると言った対応が入ったものと思われます。（また、将来的な最適化のためでもあるそうです）

非同期化することで各APIの準備が整っていない場合でも、各APIを使用しない箇所を先んじてレンダリングすることができるようになりページの表示速度が上がります。

この変更は破壊的変更となるため、CLIツールを使った自動変更が用意されています。

$ npx @next/codemod@canary next-async-request-api .

今後のNext.jsのキャッシュモード（おまけ）

Next.js 15にはまだ組み込まれていなくまだ実験段階のものですが、新しいキャッシュモードとして 「dynamic IO」というコンセプトがあるようなのでおまけとして載せておきます。（おまけと言いつつ結構量あります笑）

というのも、

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/49610

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。