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
580
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
7.8k
複雑なフォームの 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.4k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
13
4.3k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
5
1.4k
Other Decks in Technology
See All in Technology
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
370
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
250
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.4k
MobileActOsaka_250704.pdf
akaitadaaki
0
150
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
550
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
CDK Vibe Coding Fes
tomoki10
0
100
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
210
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
310
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
2
7.3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
It's Worth the Effort
3n
185
28k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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 [検索]