Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsと状態管理のプラクティス
Search
uhyo
May 14, 2025
Technology
7
5.8k
Next.jsと状態管理のプラクティス
2025-05-14 技術選定を突き詰める ~ Online Conference 2025 ~
uhyo
May 14, 2025
Tweet
Share
More Decks by uhyo
See All by uhyo
libsyncrpcってなに?
uhyo
0
310
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
600
更新系と状態
uhyo
8
3.1k
React 19アップデートのために必要なこと
uhyo
8
2.4k
color-scheme: light dark; を完全に理解する
uhyo
8
660
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.4k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3.2k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
4.4k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.6k
Other Decks in Technology
See All in Technology
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
990
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
790
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
290
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
500
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
210
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
150
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
230
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
55
22k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
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