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
140
Vimmerを支える技術
kenyamasuko
0
99
Webサイトが表示されるまでの流れ
kenyamasuko
1
540
Other Decks in Programming
See All in Programming
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
230
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
970
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
310
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
AI Agentを利用したAndroid開発について
yuchan2215
0
210
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
690
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
CQRS+ES勉強会#1
rechellatek
0
390
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Embracing the Ebb and Flow
colly
85
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building Applications with DynamoDB
mza
94
6.3k
Facilitating Awesome Meetings
lara
53
6.3k
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』を読んだぜ』