Next.jsと状態管理のプラクティス

Next.jsと状態管理のプラクティス 2025-05-14 技術選定を突き詰める〜 Online Conference 2025〜

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパート気付いたらReact界隈の中でもかなり Next.js推しの立ち位置になっていた。 2

Next.jsと状態管理 Next.js (App Router) ではサーバーコンポーネントの活用が可能となり、フロントエンドの状態管理の考え方も見直しが求められる。 3

This Talk App Router （というかReact Server Components）にまだ慣れない方を主なターゲットとして、状態管理をいい感じにやる方法について考えます。 4

これまでの復習 5

ちょっと宣伝以前の記事で説明したように、 React Server Componentsは多段階計算として捉えることができる。 6 一言で言うと、React Server Componentsは多段階計算です。

多段階計算 React Server Componentsではアプリが2段階で描画される。サーバーコンポーネント ↓ クライアントコンポーネント 7

それぞれの特性サーバーコンポーネント • サーバー側でキャッシュが効く • クライアントの計算を削減（場合によっては転送量も） • データ取得にネットワークを経由する必要あり 8

それぞれの特性クライアントコンポーネント • サーバーを介さずに再レンダリング可能 • クライアントでJavaScriptを実行する必要あり 9

サーバーとクライアントの使い分け土台となる部分にサーバーコンポーネントを使い、インタラクションが必要な部分にクライアントコンポーネントを使うのが基本。（アイランドアーキテクチャと同じ考え方） 10 アイランドアーキテクチャはPPRではなく、 RSC(React Server Components)
アーキテクチャと近いしいものと言えます。

RSCでは従来（非RSC）のReactでステートとして持っていたデータでも、インタラクションに影響しないならばサーバーコンポーネントに担ってもらうことで、クライアントサイドのステートを削減できる。 11

RSCの考え方「サーバーが出力したHTML（土台）を JavaScriptでいじる」という昔の世界観が Reactに適合し、進化した形で再来したと考えるとピンと来る人もいるかも。 12

今回の実例 13

いつものTodoアプリ要点を押さえて例を出すには便利。いつもお世話になってます。あなたならNext.jsでどんな感じに実装しますか？ 14

AIさんにやってもらった「Next.jsの機能をふんだんに使って」とリクエストして実装してもらった結果…… • サーバーコンポーネントでTodoデータ取得 • Todo更新時はrevalidatePathでキャッシュを破棄 →サーバーコンポーネントが再レンダリングされ、 Todo更新が画面に反映 15

問題点① revalidatePathするとサーバーコンポーネントごとページが再レンダリングされる。画面の変化はチェックボックス1つだけなのに全てのデータを再受信する必要があり無駄が大きい。ネットワークの往復も必要。 16

問題点② revalidatePathは変更の影響範囲をパスで管理するのが微妙。 revalidateTagのほうがマシだが、キャッシュキーの管理もやりたくはない…… 17

アイデア: 差分だけステート管理するコンポーネントのチェック状況だけをクライアントコンポーネントで管理することで、余計な通信を発生させずに素早くUIに反映できる。詳しくはこのスライドで（宣伝）→ 18

アイデア: 差分だけステート管理する実際のコードはこんな感じ 19

アイデア: 差分だけステート管理する実際のコードはこんな感じ 20 サーバーから来たallTodosと、ローカルステート checkedState を組み合わせてfinalTodosを計算

土台という考え方この考え方では、「サーバーから送られてきたデータ」を土台としている。その土台の上に、チェックボックスのインタラクションだけをクライアント側で実装。 21

もうひとつの例 22

もうひとつの例 Todoアプリに無限スクロールを実装したい。必然的にサーバーと通信することにはなるが、差分だけダウンロードしたいので、サーバーコンポーネントごと再レンダリングするのは得策ではない。 23

やっぱりステートで差分を管理する例えば、サーバーから来た最初の1ページを初期ステートとして使うと簡単に済ませられる。 24

やっぱりステートで差分を管理する 25 サーバーコンポーネントから来たデータを初期値として利用

まとめ 26

まとめこのトークでは、Next.jsにおける状態管理のプラクティスの一例として、サーバーコンポーネントをページの土台として使う考え方を示した。これがいつも正解ではないが、Next.js入門しつつある程度機能を活かせるやり方としておすすめ。 27

Next.jsと状態管理のプラクティス

Next.jsと状態管理のプラクティス

uhyo

More Decks by uhyo

Other Decks in Technology

Featured

Transcript