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
Open source software: how to live long and go far
gaelvaroquaux
0
640
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4k
技術を根付かせる / How to make technology take root
kubode
1
250
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
750
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
760
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
color-scheme: light dark; を完全に理解する
uhyo
5
410
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Producing Creativity
orderedlist
PRO
344
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
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』を読んだぜ』