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.5k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.1k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.2k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
980
コンパウンドプロダクト開発の質とスピードを支える 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
さくらのクラウド開発の裏側
metakoma
PRO
0
240
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
140
テストコードにはテストの意図を込めよう(2025年版) #retechtalk / Put the intent of the test 2025
nihonbuson
PRO
1
140
kernelvm-brain-net
raspython3
0
460
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
120
社会人力と研究力ー博士号をキャリアの武器にするー
kentaro
2
110
グループ ポリシー再確認 (2)
murachiakira
0
230
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
3
430
newmo の創業を支える Software Architecture と Platform Engineering
110y
1
230
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
210
AndroidアプリエンジニアもMCPを触ろう
kgmyshin
2
640
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
22
5.2k
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A designer walks into a library…
pauljervisheath
205
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
What's in a price? How to price your products and services
michaelherold
245
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Typedesign – Prime Four
hannesfritz
41
2.6k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
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 [検索]