Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
110
Vimmerを支える技術
kenyamasuko
0
84
Webサイトが表示されるまでの流れ
kenyamasuko
1
520
Other Decks in Programming
See All in Programming
Arm移行タイムアタック
qnighy
0
410
コンテンツの主権を守るため(?)、高機能画像CDNからAWS自前対応に乗り換えた話
lengthtail
1
120
PipeCDの歩き方
kuro_kurorrr
4
140
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
110
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
240
第5回日本眼科AI学会総会_AIコンテスト_3位解法
neilsaw
0
140
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
760
flutterkaigi_2024.pdf
kyoheig3
0
470
Symfony Mapper Component
soyuka
2
560
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
180
CSC509 Lecture 14
javiergs
PRO
0
100
アニメーションを最深まで理解してパフォーマンスを向上させる
mine2424
0
110
Featured
See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The World Runs on Bad Software
bkeepers
PRO
65
11k
For a Future-Friendly Web
brad_frost
175
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Music & Morning Musume
bryan
46
6.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
BBQ
matthewcrist
85
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
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』を読んだぜ』