2021/11/27開催の「【神戸】つながる勉強 #11 (初のオフライン開催)」での登壇資料をブラッシュアップしたものです。 https://tsunagaru-kobe.connpass.com/event/230154/
詳細はブログでまとめますので投稿次第リンクを貼ります↓ https://yutaro-blog.net/2021/12/03/spa-csr-ssr-ssg-sg/
SPA/CSR/SSR/SSGまとめ 2021/11/27 ゆーたろー
View Slide
アジェンダ● はじめに ● SPA(Single Page Application)とは ● CSR(Client Side Rendering)とは ● SSR(Server Side Rendering)とは ● SSG(Static Site Generator)とは ● まとめ
はじめに
このスライドはJavaScriptを使用する前提でのお話です
SPA Single Page Application
SPAとはSPA = Single Page Application 最初に読み込んだページ上のスクリプトで サーバーの通信や画面遷移を行うアプリケーション
SPAを実現する技術CSR SSR SSGこれらが存在している
CSR Client Side Rendering
CSR = Client Side Rendering クライアントサイド(ブラウザ)で行うレンダリング CSRとはJS+ReactアプリケーションやVueアプリケーション がこれに該当します。
CSRの仕組みGET / ブラウザ フロントエンド用 Webサーバー GET /api/post JSON DB SQL Res ● 初回アクセス時にアプリケーションの全てのHTML/CSS/JSを受け取る ● クライアントサイドで実行するレンダリング クライアントで レンダリング バックエンド用 Webサーバー
/login ログインページ CSR補足/ トップページ JSON ・成功時のメッセージ ・バリデーションメッセージ メールアドレス パスワード 単純なページ遷移は サーバーに通信しない (Vuex, React Router) バックエンド用 Webサーバー
CSRのメリデメ● ページ遷移が高速 ● サーバーとの通信が少ない(UX向上) メリットデメリット● 初期表示が遅い ● SEO的に微妙かも? ● ページ単位でOGPが設定できない
SPAを実現するためにはCSRは必須の技術である ここで大事なことそして、SSRとSSGは必須ではない
SSR Server Side Rendering
SSR = Sever Side Rendering アクセスごとにサーバーサイドで行うレンダリング SSRとはNext.jsアプリケーション、Nuxt.jsアプリケーション で手軽に実装することができる。
SSRの仕組みGET / ブラウザ POST /api/post DB SQL Res ● サーバーサイドでページをレンダリングする ● それ以降はクライアントでレンダリングを行う GET /api/post JSON JSON Webサーバーで レンダリング 初回以降はクライアントで レンダリング ページ(HTML) フロントエンド用 Webサーバー バックエンド用 Webサーバー
SSRのメリデメ● 初期表示がCSRより早い ● SEO対策可能 ● ページ単位でOGPを設定できる メリットデメリット● サーバーの管理、負荷を考慮が必要 ● サーバーサイド実行環境が必要→CSRより実装難易度高
SSG Static Side Generator
SSG = Static Site Generator ビルド時にページをレンダリングする方式 SSGとはNext.jsアプリケーション、Nuxt.jsアプリケーション で手軽に実装することができる。 ※Next.jsのDocではStatic Generationを説明されているのでSGとも言う
SSGの仕組みGET / ブラウザ POST /api/post JSON DB SQL Res ● ビルド時に事前にHTMLを生成→Webサーバーに配置→リクエストに応じて返却するだけ ページ(HTML) ビルド時に レンダリング 初回以降はクライアントで レンダリング バックエンド用 Webサーバー フロントエンド用 Webサーバー
SSGのメリデメ● ページの表示がCSR、SSRより高速 ● Node.jsが不要 ● SEO対策可能 ● ページ単位でOGPを設定できる メリットデメリット● 頻繁に表示が変わる場合、都度ビルドが必要なので不向き ● ページ数が多いとビルド時間が長くなる
まとめ
☑ SPAを実現するためにはCSRは必須 ☑ ただし、CSR+SSR、CSR+SSGで実現するSPAもありえる ☑ つまり、「SPA=CSR」というのは厳密には正しくない ☑ SSRもSSGで開発したアプリケーションもそのページの初期レ ンダリング以降はCSRになる ☑ フロントエンドは個人的に難しい まとめ
詳しくはブログにまとめますので Speaker Deckの説明欄をご確認ください🙏
Thank you 😁🙏