CSR? SSR? C# で作る Web アプリフレームワーク Blazor のレンダリング方式を整理する

SSPR Server-side Pre-Rendering CSR Client-Side Rendering SSR Server-Side Rendering Extended SSR MPA Multi Page App SPA Single Page App Webアプリの動作方式を表す用語 色々ありすぎません?

Agenda SSR, CSR それぞれの動作の仕組みと意味 CSR .vs. SSR それぞれのメリット・デメリット SSPR CSR のデメリットを回避 Blazor C# による Web アプリフレームワーク 1 2 3 4 がんばって理解を整理していこう Extended SSR SSR のユーザー体験を改善する取り組み 5

SSR Server-Side Rendering Web のキホン

Server-Side Rendering Web のキホン URLを指定してアクセス開始 コンテンツを要求 HTML や CSS を返す HTML をレンダリングして表示 画面を操作 コンテンツを要求 HTML や CSS を返す HTML をレンダリングして表示 Web Browser Web Server User

Demonstration

CSR Client-Side Rendering リッチなユーザー対話体験

Client-Side Rendering リッチなユーザー対話体験 Web Browser Web Server User URLを指定してアクセス開始 コンテンツを要求 HTML や CSS、JavaScript を返す コンテンツを読み込み、 JavaScript が始動 DOM ツリーをレンダリングして表示 画面を操作 JavaScript がユーザー操作 に対する処理を実行 更新後の DOM ツリーをレンダリング

Demonstration

SPA? MPA? CSR、SSR とは違うの? SPA Single Page Application 単一のフォールバックページが返る ≒ CSR MPA Multi Page Application 要求ごとに個別のページが返る ≒ SSR ‘90s ~ ▪ PHP/Laravel ▪ Python/Django ▪ Ruby on Rails ▪ ASP.NET MVC, etc. 2010 ~ ▪ AngularJS ▪ Backbone.js ▪ Ember.js ▪ Knockout 2015 ~ ▪ Angular ▪ Blazor ▪ React ▪ Svelte ▪ Vue

CSR .vs. SSR Client-Side Rendering .vs. Server-Side Rendering それぞれのメリット・デメリット

CSR .vs. SSR それぞれのメリット・デメリット ▪ 俊敏なユーザー対話性能 ▪ オフライン動作可能 ▪ 初回レスポンスの速さ ▪ 検索インデックス化の容易性 CSR (SPA) SSR (MPA) ▪ 初回アクセス時のページ表示 までに時間がかかる ▪ 検索クローラに対する不安 ▪ 低いユーザー対話性能

SSPR Server-Side Pre-Rendering CSR のデメリットを回避

Demonstration

これは SPA なの? MPA なの? このあたりから SPA や MPA といった用語の適用が微妙に… ▪ 基本的にクライアント側でユーザー対話処理が実行される、という意 味では SPA ▪ しかし、ブラウザからの HTTP GET では、単一のフォールバックページ ではなく、要求 URL 個別のレンダリング済み HTML が返る ▪ なので、"Multi Page" といえば "Multi Page"? ▪ だから SPA や MPA という言い方はしなくなって、レンダリング方式 (CSR, SSR) で表現するようになった? ▪ あるいは総称としての "クライアント Web アプリケーション" など

Blazor Build client web apps with C# C#, .NET でクライアント Web アプリケーションを開発する

Blazor とは “Build client web apps with C#” C#、.NET でクライアント Web アプリを実装する、 コンポーネント指向のフレームワークとツールチェイン ▪ Web 標準 ▪ 画面は HTML と CSS で構築する ▪ オープンソース ▪ MIT License ▪ GitHub でホスト ▪ .NET 開発者に優しい ▪ C# や .NET の知識がそのまま活きる ▪ Visual Studio Code で開発、デバッグできる ▪ NuGet パッケージも普通に使える

Blazor WebAssembly の仕組み トランスパイラじゃないよ 一般的な JavaScript による SPA Blazor WebAssembly

Blazor Server の仕組み トランスパイラじゃないよ Blazor WebAssembly

Blazor Server の仕組み トランスパイラじゃないよ Blazor Server

Blazor Server の動作シーケンス WebSocket 接続を使ったフシギな世界 Web Browser Web Server User URLを指定してアクセス開始 コンテンツを要求 HTML や CSS、仲介役JavaScript を返す HTML をレンダリングして表示 画面を操作 ユーザー操作に対 する処理を実行 更新後の HTML をレンダリング WebSocket 接続を開始 Blazor セッションが 始動 レンダリング内容を指示 操作内容を通知 レンダリング内容を指示

もはや分類が破綻している… Blazor Server は CSR? SSR? もうわけがわからないよ ▪ サーバーから HTML 文字列を返しているわけじゃないの で SSR とは言えなさそう ▪ さりとてユーザー操作への反応と DOM 構造の生成は サーバー側なので、これを CSR と言える? ▪ サーバー側プリレンダリングしてなければ、SPA と言って もいいかもしれない ▪ でもサーバー側プリレンダリングしてたら、それでも SPA って言っていいの?

.NET 8 での Blazor の進化 2023 年 11 月のリリースで、あらゆるモデルの Web アプリケーションを構築可能に Auto レンダーモード レンダリングモードの混在 SSR 対応 ▪ Blazor のコンポーネントモデ ルと構文で、SSR (MPA) も実 装できるように ▪ 同一アプリ内で、コンポーネン トごとにレンダリングモードを 指定可能 ▪ ページごとに、Blazor SSR、 Blazor WebAssembly、 Blazor Server の各動作モー ドが切り替わる ▪ 初回アクセス時は Blazor Server として動作 – 即時に対話可能 – バックグラウンドで Blazor WebAssembly をダウンロード ▪ 次回アクセス時は Blazor WebAssembly として動作 – ダウンロード済みなので即時対話可能 – サーバ資源を消費せずに動作

Demonstration

Extended SSR Extended Server-Side Rendering SSR を拡張

JavaScript ▪ 若干の JavaScript コードをページに 読み込んでおく ▪ この JavaScript で一部の処理を行な うことでユーザー体験を改善 ▪ 本質的な動作は、あくまでも SSR であ り、SSR のメリットは引き続き享受 SSR を JavaScript で拡張 SSR のユーザー体験を改善したい 初速は速いんだけど… ページ遷移時に表示がちらつく ▪ ページ遷移時は毎回、ブラウザがページを要求して、表 示し直すため フォーム入力でエラー発生時、 スクロールが上に戻ってしまう ▪ 上に同じ ▪ フォームの POST で、新たなページが返ってくるため 処理に時間がかかる場合に、 ページがすぐに表示されない ▪ CSR なら、いったん "処理中" の表示を出せる

具体的な 2 つの技法 .NET 8 の Blazor に標準搭載 Enhanced Navigation Stream Rendering

Enhanced Navigation Extended SSR – Part 1 SSR を拡張 その 1

Enhanced Navigation は何を解決する? JavaScript のチカラ ▪ ページ遷移時に表示がちらつく ▪ フォーム入力でエラー発生時、 スクロールが上に戻ってしまう ▪ 要素のクリックなどを JavaScript コードで捕捉 ▪ ブラウザによるページ遷移は阻止 ▪ ブラウザの代わりに JavaScript コー ドが fetch API で遷移先 URL の HTML を取得 ▪ 取得した HTML を現在表示されている DOM に適用 Enhanced Navigation

Demonstration

Stream Rendering Extended SSR – Part 2 SSR を拡張 その 2

Stream Rendering は何を解決する? JavaScript のチカラ ▪ 処理に時間がかかる場合に、 ページがすぐに表示されない ▪ サーバーは "処理中" などの表示を含む HTML をまずは返す ▪ しかし HTTP 接続は切らずに保持 ▪ ブラウザはいったん届いた HTML を表示 ▪ その後サーバー側で処理完了したら、 切らずに保持していた HTTP 接続を介して、 完成後の HTML を返す ▪ ブラウザでは届いた HTML を現在表示さ れている DOM にマージ Stream Rendering

Demonstration

Conclusion おわりに

Conclusion まとめに入ります ▪ CSR や SSR といった用語、分類は、会話における相 互理解のためには便利 ▪ しかし昨今は CSR や SSR といった分類に納まりき らない、あるいは誤解を招きかねないレンダリング 方式が出てきている ▪ CSR や SSR などの分類だけに囚われず、Web アプ リケーションのさまざまな動作形態の、その本質と 動作原理について理解を深めよう CSR Blazor Server SPA Auto Render mode SSR Blazor Web Assembly MPA Stream Rendering SSPR Enhanced Navigation

Thank you! ありがとうございました! Learn, Practice, Share.