Next.js v15.0.0-rc.0

Transcript

1. Next.js v15.0.0-rc.0 キャッシュのデフォルト挙動改善とPPR
2. Next.js v15.0.0-rc.0 での更新内容 React19 サポート キャッシュのデフォルトを一部変更 PPR のincremental オプションが追加 next/after の追加 create next app のデザイン更新、オプション追加 and more… v15 はReact19 のリリース待ちの状態
3. Cache
4. App Router のキャッシュ Mechanism What Where Purpose Duration Request Memoization 関数の戻り値 Server React Component tree におけ るdata の再利用 リクエストごと Data Cache fetch() やDB アクセ スの結果 Server ユーザーやデプロイをまたぐデ ータの再利用 永続化 (revalidate 可) Full Route Cache HTML やRSC payload Server レンダリングコストやパフォー マンスの向上 永続化 (revalidate 可) Router Cache RSC Payload Client ナビゲーションごとのリクエス ト削減 ユーザーセッショ ン・時間 4 層のキャッシュが存在する
5. v14 以前のキャッシュのデフォルト Router Cache: 有効期間がデフォルトで30s or 5m と長め Data Cache: fetch() はデフォルトでキャッシュが有効 Full Route Cache: Router Handler の GET がキャッシュ可能かつデフォルトで有効 ページやレイアウトはデフォルトでキャッシュが有効 etc… 筆者の意見 キャッシュにおける初見殺しな部分があった デフォルトで積極的にキャッシュ
6. v15 でのキャッシュのデフォルト Router Cache: 有効期間のデフォルトが0s に変更 Data Cache: fetch() のデフォルトが cache: "no-store" に変更 Router Handler の GET がデフォルトでキャッシュされなくなった 筆者の意見 キャッシュにおける初見殺しが緩和された 大きく以下3 つが修正された
7. 「なぜもっと早く変更しなかったのか？」 デフォルトのキャッシュ挙動の変更は、2023/11 頃にはすでに議論が始まっていた 問題はどうやってパフォーマンスを損ねずに実現するか Next.js の哲学としてデフォルトで高いパフォーマンスが実現できることは非常に重要 PPR がデフォルトになれば全て解決する PPR は現在experimental だが、今後安定したらデフォルトになる予定 PPR の設計や実装が進み、Next.js としての方針が固まった デフォルトのキャッシュ挙動を変更しても良いと判断できるようになった Jimmy Lai 氏のツイートを要約
8. PPR
9. Static/Dynamic Rendering Static Rendering: SSG/ISR 相当。ページを事前に生成、revalidate 可能 Dynamic Rendering: SSR 相当。ページをリクエスト時に生成 （厳密には異なる部分はあるが）従来におけるSSR/SSG/ISR 相当と考えるとわかりやすい
10. PPR とは 「可能な限りStatic に、部分的にDynamic に」を可能にするレンダリングモデル
11. PPR とは PPR: Partial Pre-Rendering( 部分的な事前レンダリング) Route は基本Static Rendering 、一部Suspense 境界内をDynamic Rendering にすることが可能 パフォーマンスとシンプルな設計が両立 15.0.0 時点ではexperimental 、実装進行中 (Next.js 側の実装がとても大変) 筆者の意見 考える粒度がページ単位からSuspense 境界単位になり、よりReact らしい設計 「可能な限りStatic に、部分的にDynamic に」を可能にするレンダリングモデル
12. PPR とは CDN と相性が悪い HTTP Status Code に依存した監視などができない ( 実はPPR に限った話ではないが、より影響が顕著) Next.js 側の実装が大変なためまだ不安定 PPR における注意点
13. PPR の参考資料 https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering より詳細な内容については筆者の過去記事を参照
14. PPR の有効化 v14 系ではexperimental フラグを有効にすると、全ページでPPR が有効になった // next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { experimental: { ppr: true, // v14 系ではboolean }, }; export default nextConfig;
15. PPR incremental オプション v15.0.0-rc.0 から incremental オプションが追加された // next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { experimental: { ppr: "incremental", }, }; export default nextConfig;
16. PPR incremental オプション Route 単位で experimental_ppr が true の時のみPPR が有効化 // app/page.tsx など export const experimental_ppr = true;
17. まとめ
18. v15 の変更まとめ キャッシュのデフォルト設定が変更され、初見殺しが緩和された PPR の実装が進み、段階的導入が可能となった App Router がより初学者に優しく・シンプルな設計になると期待できそう 筆者が注目してる点は以下2 つ
19. 余談: 直近のNext.js の動向 9 月以降、v14.2.x のpatch リリースが続いてる patch リリースに新機能や改善が盛り込まれ、それが起因してバグ混入が続いてる v14.2.8 #69769 v14.2.12 #70213 最終版RC のリリースが近そう（from Jimmy Lai 氏のツイート） Next.js はReact19 の安定を待たないことにした experimental.dynamicIO など新たな機能が盛り込まれる #67571 dynamic functions （ cookies() など）が非同期に変更されるPR が進行中 #68812 Next Conf （10/24 ） v15 のGA 発表？ 例年通りなら何かしら目を引くような発表があるはず 2024/9~10 月のNext.js の動向推察