KAKAMU
BlogTag

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のレンダリング

Nextのその他

レンダリング方式の整理

Static Site Generation (SSG)

  • ビルド時にHTMLを生成する方式
  • 更新頻度が低く自動更新が不要なページ（ブログ記事やLPなど）に適する
  • データフェッチがビルド時にのみ実行されるので、サーバー負荷が低い
  • 生成済みHTMLを返すので、初期表示が高速（CDNにキャッシュされていたらなお）
  • Static Rendering、Static Generationと同義

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以外のすべてのレンダリングを包含する広義の概念および用語。

Partial Prerendering

  • 1つのページ内で静的コンポーネントと動的コンポーネントを同時にレンダリングする方式
  • 現状はexperimental

React Server Components(RSC)との関係性

  • RSCはサーバーサイドでRSC Payload（レンダリングを司る特殊なデータ）に変換される
  • RSC Payloadをもとに、サーバーサイドでのHTML生成やクライアントサイドでのHydrationが実行される
  • How are Server Components rendered?
#IT