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
180
『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
130
Vimmerを支える技術
kenyamasuko
0
93
Webサイトが表示されるまでの流れ
kenyamasuko
1
530
Other Decks in Programming
See All in Programming
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
46
17k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
WebDriver BiDiとは何なのか
yotahada3
1
140
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
730
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
GAEログのコスト削減
mot_techtalk
0
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
1
200
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Cult of Friendly URLs
andyhume
78
6.2k
A designer walks into a library…
pauljervisheath
205
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Faster Mobile Websites
deanohume
306
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Agile that works and the tools we love
rasmusluckow
328
21k
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』を読んだぜ』