Web レンダリングの変化とどれ使うん @AkarengaLT by yuyays

今日話すこと • CSR, SSR, SSR with Suspense, Server Islands などの説明と図解 • それぞれの得意な点や苦手な点 • じゃあ実際に問題解決をしているの か

CSR(Client side rendering): クライエントサイドレンダリン グとは • 最小限の HTML とタグつきの JavaScript をクライアン トに送信 • ブラウザで JavaScript を実行してペ ー ジをレンダリ ング SSR(Serve side rendering): サ ー バ ー サイドレンダリングとは • サ ー バ ー 上でペ ー ジをレンダリング • HTML をクライアントに送信

• SSR モデルとたいだい同じであるが でかこ みコンポ ー ネント単位でサ ー バ ー よりストリ ー ミングで きる SSR with Suspense(IsomophicSSR Server Island ( サ ー バ ー アイランド ) • SSR モデルと似ているがサ ー バ ー より送られる静 的 HTML が最小のサイズの js バンドルをもってそ こからハイドレ ー ションしていく

図解にて解説します ｚ csr, ssr, ssr with suspense, server island の順で

ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html 1. すぐに静的 html をかえす 。 2. cache されているならそれを返す 。 html を読み込む JS バンドルを example.com/main.js をリクエス ト My Static Page

Hello World!

Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タを API などを通じてリクエストする デ ー タベ ー ス デ ー タを返す (json 等） 読み込み ( レンダリン グ ) 完成したペ ー ジをようやく表示する .!!!! CSR モデル

良い点 • ブラウザの中でのインタラクションが早くでき ること 例 )SSR モデルでは js ファイルが読み 込むまではマウスクリックなどのイベントリス ナなどはできない • ペ ー ジ移動した際には新しいペ ー ジがすぐに表 示される 例 ) 全体のペ ー ジを移動するたびに ロ ー ドする必要がない

良くないかもしれない点 • Js バンドルのファイルが肥大であるなら 、 ペ ー ジをレンダリングするのに時間がかかる • パワ ー がない端末はクライエントで処理を行う ので時間がかかる • ネットワ ー クにもよる • API などのリクエスト往復は時間がかかる

ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html html を読み込む JS バンドルを example.com/main.js をリクエス ト Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タベ ー ス SSR モデル 完成したペ ー ジをようやく表示する .!!!!

良い点 • デ ー タが含んである html をクライエントにおく れる • SEO の向上： 検索エンジンはコンテンツが最初 の HTML で利用可能であるため簡単にクロ ー ル しインデックスすることが可能

良くない点 • hydration （ハイドレ ー ション）の問題点として Js ファイルがクライエント側でそれを実行して DOM にイベントハンドラ ー などのつけて html を インタラクティブにすること . しかし ,hydration を行うまではそれらの動作は できない .... • CDN に静的 html をおけないまたは vercel などに たよるしかない

SSR with Suspense(isomorphic SSR) • Suspense によりペ ー ジの各 々 こコンポ ー ネント をレンダリング可能にし , サ ー バ ー よりストリ ー ミングされる . • なのでペ ー ジを移動した際にはすぐにロ ー ドの スピ ー ナ ー などを表示できる

ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html html を読み込む JS バンドルを example.com/main.js をリクエス ト Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タベ ー ス Isomophic SSR モデル

サ ー バ ー example.com/engineercafe リクエスト json 等を送る ブラウザ React server runtime DB loading state 変化した部分の html を 送る 前の続き

• SSR モデルでは静的 html を CDN におけない CSR モデルでは CDN に置けていたがリクエ ストにすぐ答えらたが 良くないかもしれない点

ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html json かえす html を読み込む JS バンドルを example.com/main.js をリクエスト ( ここがサ ー バ ー アイランドの部分） db 完成したペ ー ジを表示する .!!!! Server Island サ ー バ ー 静的 html を送り返す Astro server runtime server island の部分 の html とか えす

良い点 • 静的 html を cdn におけるので ssr モデルと比べる と設計が楽 • Javascript の量が少ないのでパフォ ー マンスも いい • React, Vue, Svelte など好きなフレ ー ムワ ー クを 使用可能

実際に問題解決してますか？ • ただ単に複雑にエンジニアして , いらない問題をつくって 解いている？ • Frontend framework なんでべつにフォ ー ムとレンダリ ングなんだからなんでそんな複雑なの？ • 学習コスト ? 新しい人雇わないといけないの？ • また 2,3 年で消えるんでしょとか .... • frontend は宗教戦争がありすぎる ... 状態ライブラリから フレ ー ムワ ー クなどまで

• CSR は非常にインタラクティブなシングルペ ー ジアプ リケ ー ションを作成するという問題を解決しました • SSR は CSR の SEO と初期ロ ー ド性能の問題に対処した • Isomorphic SSR は CSR と SSR の両方の利点を組み合わ せようとしています • Server Island は JS を最小化してパフォ ー マンスを最適 化しようとします 適したツ ー ルを使いましょう

• CSR ： Gmail や Facebook のフロントエンドのような多くの SPA • SSR ： E コマ ー スサイト 、 コンテンツの多いプラットフォ ー ム • Isomophic SSR ： Next.js を使ったサイト（ TikTok のウェ ブアプリなど） • Server Island model ： コンテンツに特化したサイトやブロ グ 使用例

問題によって最適な道具を使いましょう

• https://www.youtube.com/watch?v=Cifkb-ZVps4 • https://dev.to/this-is-learning/javascript-frameworks-heading-into-2025-hkb • https://hartofthemidlands.co.uk/2019/07/the-right-tool/ • https://www.touken-world.jp/tips/43381/ 参照

• 現在ソフトウェアエンジニア (web アプリ開発 ) のお仕事 / 転職探している のでもしお仕事あるなら連絡ください！ • [email protected] ありがとうございました