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.6k
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
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
5
560
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
7.6k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
8
2.4k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.4k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.5k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.3k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
4.2k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
1.4k
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
960
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Fireside Chat
paigeccino
37
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Embracing the Ebb and Flow
colly
86
4.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
It's Worth the Effort
3n
185
28k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
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 [検索]