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 で複雑さに立ち向かう #コンポーネント_fin...
Search
Masayuki Izumi
October 04, 2023
Technology
10
3.5k
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
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.1k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.3k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
990
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
4.1k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
1.4k
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
izumin5210
14
6.5k
雑なコード生成のすすめ #nihonbashijs 8 / zatsu-code-generation
izumin5210
0
140
Other Decks in Technology
See All in Technology
Amplifyとゼロからはじめた AIコーディング。失敗と気づき
mkdev10
1
110
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
3
1.1k
Simplify! 10 ways to reduce complexity in software development
ufried
2
260
Coding Agentに値札を付けろ
watany
3
520
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
190
Azure × MCP 入門
ry0y4n
8
1.7k
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
fukubaka0825
9
2.7k
計測による継続的なCI/CDの改善
sansantech
PRO
1
670
テストコードにはテストの意図を込めよう(2025年版) #retechtalk / Put the intent of the test 2025
nihonbuson
PRO
7
1.6k
既存の開発資産を活かしながら、 《新規開発コスト抑制》と《開発体験向上》 を両立する拡張アーキテクチャ事例
kubell_hr
0
220
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
0
270
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
23
5.5k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
177
9.7k
How to Ace a Technical Interview
jacobian
276
23k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
570
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 [検索]