Webレンダリングの変化とどれ使うん

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

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

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

• SSR モデルとたいだい同じであるが <Suspense> でかこみコンポーネント単位でサーバ
ーよりストリーミングできる 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 をリクエスト <!DOCTYPE html> <html lang="en"> <head> <title>My Static Page</title> </head> <body> <h1>Hello World!</h1>  <script src="scripts/main.js"></script>  </body> </html> Javascript バンドルのファイルをかえす JS ファイルを読み込むデータを API などを通じてリクエストするデータベースデータを返す (json 等）読み込み ( レンダリング ) 完成したページをようやく表示する .!!!! CSR モデル

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

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

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 によりページの各々
こコンポーネントをレンダリング可能にし , サーバーよりストリーミングされる . • なのでページを移動した際にはすぐにロードのスピーナーなどを表示できる

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
に置けていたがリクエストにすぐ答えらたが良くないかもしれない点

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レンダリングの変化とどれ使うん

Webレンダリングの変化とどれ使うん

yuyays

More Decks by yuyays

Other Decks in Technology

Featured

Transcript