Upgrade to Pro — share decks privately, control downloads, hide ads and more …

『RSC From Scratch. Part 1: Server Components』を読んだぜ

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for kenya kenya
July 31, 2023
Programming
250
2

『RSC From Scratch. Part 1: Server Components』を読んだぜ

めぐろLT会#5で発表した資料です。

Avatar for kenya

kenya

July 31, 2023

More Decks by kenya

See All by kenya
OKRで目標立ててみた
Avatar for kenya kenyamasuko
0
260
Vimmerを支える技術
Avatar for kenya kenyamasuko
0
110
Webサイトが表示されるまでの流れ
Avatar for kenya kenyamasuko
1
590

Other Decks in Programming

See All in Programming
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
Avatar for Naoki Kishida kishida
7
2.1k
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
120
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
0
430
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
360
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
160
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
510
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
350
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
170
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
120
AIと壁打ちしながら進めるコスト管理
Avatar for Ryoma Fujiwara fufuhu
2
1.5k
「人を評価する AI」の 設計と実装 
Avatar for 奈良亮耶 ryoyanara
0
220

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
770
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
250
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
540
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
380
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k

Transcript

  1. 『RSC From Scratch. Part 1: Server Components』を読んだぜ けんや@めぐろLT会#5

  2. Profile 名前 : けんや 職種 : フロントエンドエンジニア@EISHIN 経歴 : 群馬→都内文系大学→EISHIN（2年目）

    好きなもの : サウナ/フレブル/ラグビー/TypeScript/Next.js 一言 : アニメ勢ですが「推しの子」にハマりました 𝕏 フレブルと黒柴

  3. 夏休みの自由研究発表 『RSC From Scratch. Part 1: Server Components』を読みました。

  4. 『RSC From Scratch. Part 1: Server Components』ってなに？ ・React Server Components（RSC）を一から実装してみるDeep

    Diveです。 ・執筆者はReduxの作者として有名なDan先生です。 ・全て英語で書かれているので読むのが大変です。 ・すごくながいです。

  5. RSCなんてどうやって実装するの？ Deep Diveは大きく6つのセクションで構成されています。 1. JSXを導入する 2. コンポーネントを導入する 3. ルーティングを導入する 4.

    非同期コンポーネントを導入する 5. ナビゲーションの状態を維持する 6. コードの整理

  6. 1.JSXを導入する JSXをHTML文字列に変換する "renderJSXToHTML" を実装します。 このJSX→JSXツリー→HTML文字列のように 変換されていきます。これがいわゆる "サーバーサイドレンダリング（SSR)" と呼ばれるものです

  7. 2.コンポーネントを導入する コンポーネントとは<Post />のように独自の 関数で定義されたJSXのことです。 これらは先ほど実装した `renderJSXToHTML`の条件分岐では不足 があったため、jsx.typeがfunctionの時 の条件分岐を追加します。これでHTML文字 列に変換することができました。

  8. 3.ルーティングを導入する ここではリクエストが来たエンドポイント に対して、コンポーネントをそれぞれ出し 分けることでルーっティングを実現していま す。

  9. 4.非同期コンポーネントを導入する 先ほどでは一覧ページと詳細ページで投稿自 体のコンポーネントが重複していたので `<Post />`という単位でコンポーネントに します。 このコンポーネント内では直接データを読み 込む処理が記述されており、親のコンポ ーネントからは`slug`を渡すのみとなってい ます。

  10. 5.ナビゲーションの状態を維持する ナビゲーションの状態を維持するには3つのステップが必要です 1. ナビゲーションをインターセプトする 2. ネットワークを介してJSXを送る 3. クライアントでJSXを更新する これらを1つずつ簡単にみていきたいところですが、時間の都合上このスライドでは2のみ 一緒に見ていきたいと思います。

  11. 5.2 ネットワークを介してJSXを送る クライアントサイドで状態を監視するために はHTML文字列と一緒に初期状態のJSXも送 ってあげる必要があります。 そこでクライアント用にJSXを生成する関数 `renderJSXToClientJSX` を実装します。これは`renderJSXToHTML` とは違いHTML文字列までは変換しません。 この関数から生成したjSXのオブジェクトツ

    リーをクライアントに提供することで、状態を 監視することができます。

  12. 6. コードの整理 最後にちょっとコードを綺麗にします。 クライアントの初期ロード時にHTMLを送るコ ードを見てみます。 よーくみてみると引数には計算前のJSXが渡 されています。そしてここで気づきます。 「renderJSXToClientJSXで計算済みの JSXつりーをrenderJSXToHTMLに渡せばいい のでは？」と。

    すると... ビフォー アフター

  13. 6. コードの整理 `renderJSXToHTML`にはJSXを変換する処理は不 要になるので、HTML文字列に置き換えるだけの React組み込み関数、`renderToString`を使用 します 1. JSXツリーを生成する`renderJSXToClientJSX 2. JSXツリーからHTML文字列を生成する

    `renderToString` 1をrsc.js、2をssr.jsというファイルに分けるともっ とわかりすいですね。無事にRSCを実装できました。

  14. まとめ このようにサーバーコンポーネントは2つのフローを経てクライアントへHTMLとして送られ てきます。まだまだふんわりと内容を掴んだだけなのでここからさらに深ぼっていきたいで す。 また、かなり説明を省き、さらに文字も読みにくいと来たそんな発表を最後までご清聴 いただきありがとうございました。よりくわしい説明などは元記事をご参照いただく か、私が書いた記事をご覧いただけると幸いです。 拙記事：『『RSC From Scratch.

    Part 1: Server Components』を読んだぜ』