React 19とNext.js 15に関するまとめ
そもそも
React 19とNext.js 15を使用する上での主な留意点をまとめてみた。
React19のリリースノートと移行方法
React Server Components(RSC)
Next15のリリースノートと移行方法
Next15のReact19のサポート
Next15.1にて、Pages Routerに対してもReact19がサポートされた。
これにより漸次的にApp Router化する（Pages RouterとApp Routerを併用する）際に一貫してReact19を使用することが可能になった。
Next15のキャッシュ
Next14にてデフォルトで有効化された主なキャッシュが、Next15ではデフォルトで無効化された。
NextのApp Router
レンダリング方式の整理
Static Site Generation (SSG)
- ビルド時にHTMLを生成する方式
- 更新頻度が低く自動更新が不要なページ（ブログ記事やLPなど）に適する
- データフェッチがビルド時にのみ実行されるので、サーバー負荷が低い
- 生成済みHTMLを返すので、初期表示が高速（CDNにキャッシュされていたらなお）
- Static Renderingの一種
Server-side Rendering (SSR)
- リクエスト時にサーバーサイドでHTMLを生成する方式
- ユーザー固有のコンテンツを表示するページや更新頻度が高いページに適する
- セキュリティ上サーバーサイドでデータをフェッチしつつ初期表示を高速化したい場合に適する
- Dynamic Renderingの一種
Incremental Static Regeneration(ISR)
- SSGとSSRのハイブリッド
- ビルド時に（一定数のページを対象に）HTMLを生成しつつ、一定の間隔で再生成する方式
- ビルド時に生成されなかったページは、リクエスト時にSSRされ、以降SSG（+再生成あり）扱いになる
- 再生成される間隔は、revalidateオプションによって指定する
- 日ごと、週ごとなど、更新頻度は高くないが定期的に自動更新したいページに適する
- コンテンツを最新状態に保ちつつ表示を高速化できる
Client-side Rendering(CSR)
- クライアントサイドでJavaScriptを実行してHTMLを生成・更新する方式
- 更新頻度が高いページやユーザー操作に応じて表示が更新されるページ（管理画面など）に適する
- 初期表示は遅くなりがち
- SEO対策が別途必要
Prerendering（おまけ）
- 事前にページのHTMLを生成しておくこと
- CSR以外のすべてのレンダリングを包含する広義の概念
React Server Componentsとレンダリング方式
- RSCはサーバーサイドでRSC Payload（レンダリングを司る特殊なデータ形式）に変換され、そのPayloadが各種レンダリング時に使用される
- Client Componentsは、ページフルロード時にはSSRされ、クライアントサイドルーティング時にはCSRされ、いずれの場合もコンポーネントツリーおよびDOMを更新するためにRSC Payloadが利用される（ややこしい）。
- 参考：Why do Client Components get SSR'd to HTML?