SPA/CSR/SSR/SSGまとめ/SPA-SSR-SSG

2021/11/27開催の「【神戸】つながる勉強 #11 （初のオフライン開催）」での登壇資料をブラッシュアップしたものです。
https://tsunagaru-kobe.connpass.com/event/230154/

詳細はブログでまとめますので投稿次第リンクを貼ります↓
https://yutaro-blog.net/2021/12/03/spa-csr-ssr-ssg-sg/

1. SPA/CSR/SSR/SSGまとめ
 2021/11/27 ゆーたろー

2. アジェンダ • はじめに
 • SPA(Single Page Application)とは
 • CSR(Client Side Rendering)とは
 • SSR(Server Side Rendering)とは
 • SSG(Static Site Generator)とは
 • まとめ

3. はじめに

4. このスライドはJavaScriptを使用する前提でのお話です

5. SPA
 Single Page Application

6. SPAとは SPA = Single Page Application
 最初に読み込んだページ上のスクリプトで
 サーバーの通信や画面遷移を行うアプリケーション

7. SPAを実現する技術 CSR SSR SSG これらが存在している

8. CSR
 Client Side Rendering

9. CSR = Client Side Rendering
 クライアントサイド（ブラウザ）で行うレンダリング
 CSRとは JS+ReactアプリケーションやVueアプリケーション
 がこれに該当します。

10. CSRの仕組み GET /
 ブラウザ
 フロントエンド用
 Webサーバー
 GET /api/post
 JSON
 DB
 SQL
 Res
 • 初回アクセス時にアプリケーションの全ての HTML/CSS/JSを受け取る
 • クライアントサイドで実行するレンダリング
 クライアントで
 レンダリング
 バックエンド用
 Webサーバー

11. /login ログインページ
 CSR補足 / トップページ
 JSON
 ・成功時のメッセージ 
 ・バリデーションメッセージ 
 メールアドレス
 パスワード
 単純なページ遷移は 
 サーバーに通信しない 
 (Vuex, React Router) 
 バックエンド用
 Webサーバー

12. CSRのメリデメ • ページ遷移が高速
 • サーバーとの通信が少ない（UX向上）
 メリット デメリット • 初期表示が遅い
 • SEO的に微妙かも？
 • ページ単位でOGPが設定できない

13. SPAを実現するためにはCSRは必須の技術である
 ここで大事なこと そして、SSRとSSGは必須ではない

14. SSR
 Server Side Rendering

15. SSR = Sever Side Rendering
 アクセスごとにサーバーサイドで行うレンダリング
 SSRとは Next.jsアプリケーション、Nuxt.jsアプリケーション
 で手軽に実装することができる。

16. SSRの仕組み GET /
 ブラウザ
 POST /api/post
 DB
 SQL
 Res
 • サーバーサイドでページをレンダリングする
 • それ以降はクライアントでレンダリングを行う
 GET /api/post
 JSON
 JSON
 Webサーバーで
 レンダリング
 初回以降はクライアントで
 レンダリング
 ページ(HTML)
 フロントエンド用
 Webサーバー
 バックエンド用
 Webサーバー

17. SSRのメリデメ • 初期表示がCSRより早い
 • SEO対策可能
 • ページ単位でOGPを設定できる
 メリット デメリット • サーバーの管理、負荷を考慮が必要
 • サーバーサイド実行環境が必要→CSRより実装難易度高

18. SSG
 Static Side Generator

19. SSG = Static Site Generator
 ビルド時にページをレンダリングする方式
 SSGとは Next.jsアプリケーション、Nuxt.jsアプリケーション
 で手軽に実装することができる。
 ※Next.jsのDocではStatic Generationを説明されているのでSGとも言う

20. SSGの仕組み GET /
 ブラウザ
 POST /api/post
 JSON
 DB
 SQL
 Res
 • ビルド時に事前にHTMLを生成 →Webサーバーに配置→リクエスト に応じて返却するだけ
 ページ(HTML)
 ビルド時に
 レンダリング
 初回以降はクライアントで
 レンダリング
 バックエンド用
 Webサーバー
 フロントエンド用
 Webサーバー

21. SSGのメリデメ • ページの表示がCSR、SSRより高速
 • Node.jsが不要
 • SEO対策可能
 • ページ単位でOGPを設定できる
 メリット デメリット • 頻繁に表示が変わる場合、都度ビルドが必要な ので不向き
 • ページ数が多いとビルド時間が長くなる

22. まとめ

23. ☑ SPAを実現するためにはCSRは必須
 ☑ ただし、CSR+SSR、CSR+SSGで実現するSPAもありえる
 ☑ つまり、「SPA=CSR」というのは厳密には正しくない
 ☑ SSRもSSGで開発したアプリケーションもそのページの初期レ
 ンダリング以降はCSRになる
 ☑ フロントエンドは個人的に難しい
 まとめ
24. 詳しくはブログにまとめますので
 Speaker Deckの説明欄をご確認ください🙏

25. Thank you 😁🙏