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

LTにての発表したことです。

Transcript

1. Web レンダリングの変化とどれ使うん @AkarengaLT by yuyays
2. 今日話すこと • CSR, SSR, SSR with Suspense, Server Islands などの説明と図解 • それぞれの得意な点や苦手な点 • じゃあ実際に問題解決をしているの か
3. CSR(Client side rendering): クライエントサイドレンダリン グとは • 最小限の HTML とタグつきの JavaScript をクライアン トに送信 • ブラウザで JavaScript を実行してペ ー ジをレンダリ ング SSR(Serve side rendering): サ ー バ ー サイドレンダリングとは • サ ー バ ー 上でペ ー ジをレンダリング • HTML をクライアントに送信
4. • SSR モデルとたいだい同じであるが <Suspense> でかこ みコンポ ー ネント単位でサ ー バ ー よりストリ ー ミングで きる SSR with Suspense(IsomophicSSR Server Island ( サ ー バ ー アイランド ) • SSR モデルと似ているがサ ー バ ー より送られる静 的 HTML が最小のサイズの js バンドルをもってそ こからハイドレ ー ションしていく
5. 図解にて解説します ｚ csr, ssr, ssr with suspense, server island の順で
6. ブラウザ サ ー バ ー 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> <!-- Bundler JS start --> <script src="scripts/main.js"></script> <!-- Bundler JS end --> </body> </html> Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タを API などを通じてリクエストする デ ー タベ ー ス デ ー タを返す (json 等） 読み込み ( レンダリン グ ) 完成したペ ー ジをようやく表示する .!!!! CSR モデル
7. 良い点 • ブラウザの中でのインタラクションが早くでき ること 例 )SSR モデルでは js ファイルが読み 込むまではマウスクリックなどのイベントリス ナなどはできない • ペ ー ジ移動した際には新しいペ ー ジがすぐに表 示される 例 ) 全体のペ ー ジを移動するたびに ロ ー ドする必要がない
8. 良くないかもしれない点 • Js バンドルのファイルが肥大であるなら 、 ペ ー ジをレンダリングするのに時間がかかる • パワ ー がない端末はクライエントで処理を行う ので時間がかかる • ネットワ ー クにもよる • API などのリクエスト往復は時間がかかる
9. ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html html を読み込む JS バンドルを example.com/main.js をリクエス ト Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タベ ー ス SSR モデル 完成したペ ー ジをようやく表示する .!!!!
10. 良い点 • デ ー タが含んである html をクライエントにおく れる • SEO の向上： 検索エンジンはコンテンツが最初 の HTML で利用可能であるため簡単にクロ ー ル しインデックスすることが可能
11. 良くない点 • hydration （ハイドレ ー ション）の問題点として Js ファイルがクライエント側でそれを実行して DOM にイベントハンドラ ー などのつけて html を インタラクティブにすること . しかし ,hydration を行うまではそれらの動作は できない .... • CDN に静的 html をおけないまたは vercel などに たよるしかない
12. SSR with Suspense(isomorphic SSR) • Suspense によりペ ー ジの各 々 こコンポ ー ネント をレンダリング可能にし , サ ー バ ー よりストリ ー ミングされる . • なのでペ ー ジを移動した際にはすぐにロ ー ドの スピ ー ナ ー などを表示できる
13. ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html html を読み込む JS バンドルを example.com/main.js をリクエス ト Javascript バンドルのファイルをかえす JS ファイルを読み込む デ ー タベ ー ス Isomophic SSR モデル
14. サ ー バ ー example.com/engineercafe リクエスト json 等を送る ブラウザ React server runtime DB loading state 変化した部分の html を 送る 前の続き
15. • SSR モデルでは静的 html を CDN におけない CSR モデルでは CDN に置けていたがリクエ ストにすぐ答えらたが 良くないかもしれない点
16. ブラウザ サ ー バ ー example.com リクエスト html をかえす ex. intex.html json かえす html を読み込む JS バンドルを example.com/main.js をリクエスト ( ここがサ ー バ ー アイランドの部分） db 完成したペ ー ジを表示する .!!!! Server Island サ ー バ ー 静的 html を送り返す Astro server runtime server island の部分 の html とか えす
17. 良い点 • 静的 html を cdn におけるので ssr モデルと比べる と設計が楽 • Javascript の量が少ないのでパフォ ー マンスも いい • React, Vue, Svelte など好きなフレ ー ムワ ー クを 使用可能
18. 実際に問題解決してますか？ • ただ単に複雑にエンジニアして , いらない問題をつくって 解いている？ • Frontend framework なんでべつにフォ ー ムとレンダリ ングなんだからなんでそんな複雑なの？ • 学習コスト ? 新しい人雇わないといけないの？ • また 2,3 年で消えるんでしょとか .... • frontend は宗教戦争がありすぎる ... 状態ライブラリから フレ ー ムワ ー クなどまで
19. • CSR は非常にインタラクティブなシングルペ ー ジアプ リケ ー ションを作成するという問題を解決しました • SSR は CSR の SEO と初期ロ ー ド性能の問題に対処した • Isomorphic SSR は CSR と SSR の両方の利点を組み合わ せようとしています • Server Island は JS を最小化してパフォ ー マンスを最適 化しようとします 適したツ ー ルを使いましょう
20. • CSR ： Gmail や Facebook のフロントエンドのような多くの SPA • SSR ： E コマ ー スサイト 、 コンテンツの多いプラットフォ ー ム • Isomophic SSR ： Next.js を使ったサイト（ TikTok のウェ ブアプリなど） • Server Island model ： コンテンツに特化したサイトやブロ グ 使用例
21. 問題によって最適な道具を使いましょう
22. • 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/ 参照