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
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
Search
Masayuki Izumi
October 04, 2023
Technology
10
2.8k
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 - connpass
https://findy.connpass.com/event/296449/
Masayuki Izumi
October 04, 2023
Tweet
Share
More Decks by Masayuki Izumi
See All by Masayuki Izumi
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
940
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
izumin5210
13
5.3k
雑なコード生成のすすめ #nihonbashijs 8 / zatsu-code-generation
izumin5210
0
46
みんなで育てる GraphQL スキーマ, それを支える Protobuf / GraphQL and Protobuf #tech_stand
izumin5210
7
3.4k
GraphQL 導入の反省と再挑戦 / jsconf jp 2021
izumin5210
11
8k
HTTP クライアントを作ろうとして学ぶ、使いやすいインタフェース / #GoCon_Sendai 2020
izumin5210
7
5k
個人の・組織の Go 筋を強化する / Gophers Code Reading Party
izumin5210
1
310
今あらためて読み直したい Go 基礎知識 その2 / golang.tokyo #25
izumin5210
10
9k
CLI ツール開発を支える技術 2019春 / Techniques that support building CLI tools, 2019 Spring
izumin5210
8
3.4k
Other Decks in Technology
See All in Technology
Password cracking: past, present, future
openwall
0
210
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
0
120
AWS Observability 関連最新アップデート
o11yfes2023
0
100
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
1
130
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
380
個人的、Kubernetes の最新注目機能! (2024年5月版) / TechFeed Experts Night#28 〜 コンテナ技術最前線
pfn
PRO
3
210
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
150
TiDBにおけるテーブル設計と最適化の事例
cygames
0
770
The depthes of profiling Ruby - RubyKaigi 2024
osyoyu
0
110
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.2k
Dungeons and Dragons and Rails
joelq
0
220
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
130
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Making Projects Easy
brettharned
109
5.5k
Web development in the modern age
philhawksworth
203
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
A Tale of Four Properties
chriscoyier
153
22k
Documentation Writing (for coders)
carmenintech
60
4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Fireside Chat
paigeccino
22
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Transcript
© 2023 LayerX Inc. React Server Components で複雑さに立ち向かう 他人事ではない React
Server Components の世界 2023-10-04 コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 @izumin5210
© 2023 LayerX Inc. 2 React Server Components、 使ってますか?
はじめに - 他人事ではないReact Server Components
© 2023 LayerX Inc. 3 「うちは SEO とか関係ないしな〜」 「SSR(Server Side
Rendering)とかいらないな〜」 …なんて、思ってませんか? はじめに - 他人事ではないReact Server Components
© 2023 LayerX Inc. 4 そんなことないよ! このあたりを意識しつつ付き合えば、 アナタのアプリでも恩恵ある!かも! …という話をします。 はじめに
- 他人事ではないReact Server Components
© 2023 LayerX Inc. 5 ▸ Wantedly, Inc. (2018-04 -
2022-08) ▸ LayerX (2022-09-) ‐ バクラク事業部 Enabling Team ‐ Backend と Web Frontend 中心にやってます ▸ 最近のお気に入りパッケージは @floating-ui/react 画像を入れてね whoami @izumin5210
React Server Components の話
© 2023 LayerX Inc. 7 React Server Components ってなんだっけ React
Server Components おさらい React Server Componentsの仕組み:詳細ガイド | POSTD https://postd.cc/how-react-server-components-work/ ▸ Server でのみ処理する Component と Client でも処理する Component を 混ぜることができる ▸ Server Component はただの HTML タグになる ‐ 状態・イベントハンドラ・副作用などを持てない ▸ なので SSR とは別物! ‐ 従来のコンポーネントはすべて Client Component である
© 2023 LayerX Inc. 8 React Server Components ってなんだっけ React
Server Components は何が嬉しい? (重要だが、時間がないのでこの発表では省略!) パフォーマンス 設計 「本質的には単純な処理で済むもの」と「複雑さが必要なもの」を 分けて、前者を本当に単純に書けるようになる
© 2023 LayerX Inc. 9 React Server Components ってなんだっけ Components
のシンプルでいい部分・複雑な部分 設計 「本質的には単純な処理で済むもの」と「複雑さが必要なもの」を 分けて、前者を本当に単純に書けるようになる 「単純な処理で済むもの」 ▸ 状態・副作用・インタラクティビティをもたないもの ‐ cf. Rails や PHP のテンプレートエンジンで 組み立てるHTML ▸ 1回 return したらそれで完了の 「高級テンプレートエンジンとしての React」 「複雑さが必要なもの」 ▸ 状態・副作用・インタラクティビティをもつもの ‐ cf. Rails や PHP が返した HTML に リッチな体験を付与するクライアントサイド JavaScript
コンポーネント使い分けの話 React Server Components の世界では何が変わるんだろう?
© 2023 LayerX Inc. 11 ▸ Server Component にできるものはそのほうがいい ‐
責務が小さい(状態やイベントハンドリングがない)もののほうが理解しやすい・壊れにくい ‐ バンドルサイズやクライアントサイドで実行される JS の量も(おそらく)小さいので ユーザ体験にも有利 ‐ デフォルトでは SC になるのも、基本的にはそちらが有利だからのはず ▸ いつ Client Component にする? React Server Components でのコンポーネント設計 Server Component(SC) か Client Component(CC) か このページ以降、React Server Component, Server Comonent, Client Component を それぞれ RSC, SC, CC と略すことがあります
© 2023 LayerX Inc. 12 ▸ Server Component にできるものはそのほうがいい ▸
いつ Client Component にする? ‐ CC じゃないとできないことをするとき(e.g. イベントハンドリング) ‐ ブラウザ上で動的な振る舞いをしたいときは CC にするしかない ‐ CC に依存されるとき ‐ CC が SC を import することはできない ‐ children として渡されるぶんには問題ない React Server Components でのコンポーネント設計 Server Component か Client Component か
© 2023 LayerX Inc. 13 Q. SC はテスト・Storybook では困らないの? A.
(場合によっては)困ります React Server Components でのコンポーネント設計 Server Component で困るケース
© 2023 LayerX Inc. 14 ▸ Server でしか実行できない要素を持つ SC は、
現状の Storybook や Testing Library で扱えない ‐ e.g. 非同期(async), フレームワークが提供するサーバでのみ扱えるもの(e.g. リクエストヘッダ) ‐ 非同期でない server-only component はテストできるようになった* 非同期 SC は非同期で static な HTML を返すみたいなもの (厳密には違う)なので、 いままでのむしろ単純にテストできるような気もするが…。このへんは深ぼってみると面白いかもしれない。 ▸ 「SC としても CC としても扱えるコンポーネント」であれば問題ない React Server Components でのコンポーネント設計 Server Component で困るケース: Test, Storybook * Next.jsでServer Componentsがちょっとだけテストできるようになってた https://zenn.dev/cybozu_frontend/articles/next-rsc-testing
© 2023 LayerX Inc. 15 ▸ Server でしか実行できない要素を持つ SC は、
現状の Storybook や Testing Library で扱えない ▸ 「SC としても CC としても扱えるコンポーネント」であれば問題ない ‐ 当面は「ロジックに関心を持つ SC」と「表示に関心をもつ SC」に分けておくのが吉 ‐ Presentational and Container separation !! React Hooks, キャッシュ付き data fetch ライブラリ, MSW などの発展で Presentation / Container を区別せず物事を単純に扱えるようになっていたのが巻き戻った感もちょっとあるが… ここからどういう方向に進化していくかが楽しみでもありますね! React Server Components でのコンポーネント設計 Server Component で困るケース: Test, Storybook
React Server Components と どう付き合っていくか
© 2023 LayerX Inc. 17 Q. SSR/CSR だけでも複雑なのに、SC/CC が来てむしろ複雑になったのでは? A.
たしかに…? どうだろう…? React Server Components とどう付き合っていくか RSC で複雑になってない?
© 2023 LayerX Inc. 18 React Server Components とどう付き合っていくか RSC
で複雑になってない? ▸ ここまでの話から、コンポーネント種別は大きく3つくらいに分かれる ‐ Server Component (server only) ‐ Server Component (client でもOK) ‐ Client Component (SSR を許すもの・許さないものに分けることもあるかも) ▸ 「なるべく SC に寄せる」「SC は Presentaional/Container に分ける」 という基本ルールがあれば、そこまで複雑ではなくなる…? ‐ みなさんどう思いますか
© 2023 LayerX Inc. 19 React Server Components とどう付き合っていくか RSC、今から使う?
▸ Next.js は 13.4 から App Router が stable になった ‐ ので、理論上使える ▸ 一方、エコシステム・世の中の事例・情報ともに充実してるわけではない ‐ RSC 自体もまだまだ Research が必要です!という段階* ▸ そもそも、マネージ対象の Server が増えることなどにもデメリットはあるはず ▸ しかし、未来は Server をも活かしていく方向になる気配はある * rfcs/text/0188-server-components.md at main · reactjs/rfcs https://github.com/reactjs/rfcs/blob/7f8492f/text/0188-server-components.md#open-areas-of-research
© 2023 LayerX Inc. 20 ▸ 未来は Server をも活かしていく方向になる気配はある ‐
ならば Bet Technology していきたい! React Server Components とどう付き合っていくか RSC、今から使う? ▸ 段階的に試していく、たとえば実験的に SC を使う領域を作る なんてのもアリ ‐ Next.js であれば、 Pages Router (旧来の仕組み) と App Router の共存が可能 ‐ App Router であっても SC ではなく CC にすれば従来の挙動に近い ▸ いまのうちから勘所を掴んでおいて、 この流れが本格化したときにうまく恩恵に乗れるようにしておくといいかも! ちなみに、最近リリースされたバクラク請求書発行では当初 Next.js App Router を使っていました! が、App Router の機能が足りず Pages Router に戻すことに。 そんなこともあろうかと SC をめっちゃ薄くしてたので戻すのは簡単でした。が、無念…。
© 2023 LayerX Inc. 21 ▸ React Server Components は
Web アプリ開発にどのような変化をもたらすか ‐ https://zenn.dev/izumin/articles/bc47e189e25874 ‐ この発表のきっかけとなった自分の記事です ▸ 一言で理解するReact Server Components ‐ https://zenn.dev/uhyo/articles/react-server-components-multi-stage ▸ React Server Components について - Speaker Deck ‐ https://speakerdeck.com/yosuke_furukawa/react-server-components-nituite ▸ rfcs/text/0188-server-components.md · reactjs/rfcs ‐ https://github.com/reactjs/rfcs/blob/7f8492f/text/0188-server-components.md#open-areas-of-resea rch ▸ Building Your Application: Rendering | Next.js ‐ https://nextjs.org/docs/app/building-your-application/rendering 参考資料たち。 全部読めば React Server Components 完全理解だ!
© 2023 LayerX Inc. 22 ▸ Server Component をうまく使うことで、実装上の複雑さを低減しつつ、 パフォーマンスメリットも得ることができる
‐ 理想的には、なるべく Server Component によせて、 ‐ App Router であっても SC ではなく CC にすれば従来の挙動に近い まとめ ▸ コンポーネントの種類が増えて、むしろ複雑に感じるかもしれない ‐ 一口に Server Components といっても、「何ができるか」 「(なんのために)どこで動くか」によってどうあるべきかは変わる ‐ 一方で、自分が「何をするコンポーネントを作っているのか」を意識すれば、迷うことは少ないかも ▸ とはいえイキナリ Server Components 全乗っかりは難しいかもしれない ‐ そういうときは、可能ならなるべく小さくはじめることもできる ‐ 実際に触ってみることで初めてわかること・つかめる勘所もあるはず
© 2023 LayerX Inc. 23
© 2023 LayerX Inc. 24 対戦おまちしております ▸ LayerX OpenDoor [検索]
▸ バクラクフロントエンドVision [検索]