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
『RSC From Scratch. Part 1: Server Components』を読んだぜ
Search
kenya
July 31, 2023
Programming
2
190
『RSC From Scratch. Part 1: Server Components』を読んだぜ
めぐろLT会#5で発表した資料です。
kenya
July 31, 2023
Tweet
Share
More Decks by kenya
See All by kenya
OKRで目標立ててみた
kenyamasuko
0
170
Vimmerを支える技術
kenyamasuko
0
100
Webサイトが表示されるまでの流れ
kenyamasuko
1
550
Other Decks in Programming
See All in Programming
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
840
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PipeCDのプラグイン化で目指すところ
warashi
1
290
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
140
効率的な開発手段として VRTを活用する
ishkawa
0
150
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
160
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
500
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.3k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Applications with DynamoDB
mza
95
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Faster Mobile Websites
deanohume
307
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
『RSC From Scratch. Part 1: Server Components』を読んだぜ けんや@めぐろLT会#5
Profile 名前 : けんや 職種 : フロントエンドエンジニア@EISHIN 経歴 : 群馬→都内文系大学→EISHIN(2年目)
好きなもの : サウナ/フレブル/ラグビー/TypeScript/Next.js 一言 : アニメ勢ですが「推しの子」にハマりました 𝕏 フレブルと黒柴
夏休みの自由研究発表 『RSC From Scratch. Part 1: Server Components』を読みました。
『RSC From Scratch. Part 1: Server Components』ってなに? ・React Server Components(RSC)を一から実装してみるDeep
Diveです。 ・執筆者はReduxの作者として有名なDan先生です。 ・全て英語で書かれているので読むのが大変です。 ・すごくながいです。
RSCなんてどうやって実装するの? Deep Diveは大きく6つのセクションで構成されています。 1. JSXを導入する 2. コンポーネントを導入する 3. ルーティングを導入する 4.
非同期コンポーネントを導入する 5. ナビゲーションの状態を維持する 6. コードの整理
1.JSXを導入する JSXをHTML文字列に変換する "renderJSXToHTML" を実装します。 このJSX→JSXツリー→HTML文字列のように 変換されていきます。これがいわゆる "サーバーサイドレンダリング(SSR)" と呼ばれるものです
2.コンポーネントを導入する コンポーネントとは<Post />のように独自の 関数で定義されたJSXのことです。 これらは先ほど実装した `renderJSXToHTML`の条件分岐では不足 があったため、jsx.typeがfunctionの時 の条件分岐を追加します。これでHTML文字 列に変換することができました。
3.ルーティングを導入する ここではリクエストが来たエンドポイント に対して、コンポーネントをそれぞれ出し 分けることでルーっティングを実現していま す。
4.非同期コンポーネントを導入する 先ほどでは一覧ページと詳細ページで投稿自 体のコンポーネントが重複していたので `<Post />`という単位でコンポーネントに します。 このコンポーネント内では直接データを読み 込む処理が記述されており、親のコンポ ーネントからは`slug`を渡すのみとなってい ます。
5.ナビゲーションの状態を維持する ナビゲーションの状態を維持するには3つのステップが必要です 1. ナビゲーションをインターセプトする 2. ネットワークを介してJSXを送る 3. クライアントでJSXを更新する これらを1つずつ簡単にみていきたいところですが、時間の都合上このスライドでは2のみ 一緒に見ていきたいと思います。
5.2 ネットワークを介してJSXを送る クライアントサイドで状態を監視するために はHTML文字列と一緒に初期状態のJSXも送 ってあげる必要があります。 そこでクライアント用にJSXを生成する関数 `renderJSXToClientJSX` を実装します。これは`renderJSXToHTML` とは違いHTML文字列までは変換しません。 この関数から生成したjSXのオブジェクトツ
リーをクライアントに提供することで、状態を 監視することができます。
6. コードの整理 最後にちょっとコードを綺麗にします。 クライアントの初期ロード時にHTMLを送るコ ードを見てみます。 よーくみてみると引数には計算前のJSXが渡 されています。そしてここで気づきます。 「renderJSXToClientJSXで計算済みの JSXつりーをrenderJSXToHTMLに渡せばいい のでは?」と。
すると... ビフォー アフター
6. コードの整理 `renderJSXToHTML`にはJSXを変換する処理は不 要になるので、HTML文字列に置き換えるだけの React組み込み関数、`renderToString`を使用 します 1. JSXツリーを生成する`renderJSXToClientJSX 2. JSXツリーからHTML文字列を生成する
`renderToString` 1をrsc.js、2をssr.jsというファイルに分けるともっ とわかりすいですね。無事にRSCを実装できました。
まとめ このようにサーバーコンポーネントは2つのフローを経てクライアントへHTMLとして送られ てきます。まだまだふんわりと内容を掴んだだけなのでここからさらに深ぼっていきたいで す。 また、かなり説明を省き、さらに文字も読みにくいと来たそんな発表を最後までご清聴 いただきありがとうございました。よりくわしい説明などは元記事をご参照いただく か、私が書いた記事をご覧いただけると幸いです。 拙記事:『『RSC From Scratch.
Part 1: Server Components』を読んだぜ』