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/

Transcript

1. SPA/CSR/SSR/SSGまとめ

   2021/11/27 ゆーたろー

   

   View Slide

2. アジェンダ
   ● はじめに

   ● SPA(Single Page Application)とは

   ● CSR(Client Side Rendering)とは

   ● SSR(Server Side Rendering)とは

   ● SSG(Static Site Generator)とは

   ● まとめ

   

   View Slide

3. はじめに

   

   View Slide

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

   

   View Slide

5. SPA

   Single Page Application

   

   View Slide

6. SPAとは
   SPA = Single Page Application

   最初に読み込んだページ上のスクリプトで

   サーバーの通信や画面遷移を行うアプリケーション

   

   View Slide

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

   

   View Slide

8. CSR

   Client Side Rendering

   

   View Slide

9. CSR = Client Side Rendering

   クライアントサイド（ブラウザ）で行うレンダリング

   CSRとは
   JS+ReactアプリケーションやVueアプリケーション

   がこれに該当します。

   

   View Slide

10. CSRの仕組み
    GET /

    ブラウザ

    フロントエンド用

    Webサーバー

    GET /api/post

    JSON

    DB

    SQL

    Res

    ● 初回アクセス時にアプリケーションの全ての
    HTML/CSS/JSを受け取る

    ● クライアントサイドで実行するレンダリング

    クライアントで

    レンダリング

    バックエンド用

    Webサーバー

    

    View Slide

11. /login ログインページ

    CSR補足
    / トップページ

    JSON

    ・成功時のメッセージ
    

    ・バリデーションメッセージ
    

    メールアドレス

    パスワード

    単純なページ遷移は 

    サーバーに通信しない 

    (Vuex, React Router) 

    バックエンド用

    Webサーバー

    

    View Slide

12. CSRのメリデメ
    ● ページ遷移が高速

    ● サーバーとの通信が少ない（UX向上）

    メリット
    デメリット
    ● 初期表示が遅い

    ● SEO的に微妙かも？

    ● ページ単位でOGPが設定できない

    

    View Slide

13. SPAを実現するためにはCSRは必須の技術である

    ここで大事なこと
    そして、SSRとSSGは必須ではない

    

    View Slide

14. SSR

    Server Side Rendering

    

    View Slide

15. SSR = Sever Side Rendering

    アクセスごとにサーバーサイドで行うレンダリング

    SSRとは
    Next.jsアプリケーション、Nuxt.jsアプリケーション

    で手軽に実装することができる。

    

    View Slide

16. SSRの仕組み
    GET /

    ブラウザ
 POST /api/post

    DB

    SQL

    Res

    ● サーバーサイドでページをレンダリングする

    ● それ以降はクライアントでレンダリングを行う

    GET /api/post

    JSON

    JSON

    Webサーバーで

    レンダリング

    初回以降はクライアントで

    レンダリング

    ページ(HTML)

    フロントエンド用

    Webサーバー

    バックエンド用

    Webサーバー

    

    View Slide

17. SSRのメリデメ
    ● 初期表示がCSRより早い

    ● SEO対策可能

    ● ページ単位でOGPを設定できる

    メリット
    デメリット
    ● サーバーの管理、負荷を考慮が必要

    ● サーバーサイド実行環境が必要→CSRより実装難易度高

    

    View Slide

18. SSG

    Static Side Generator

    

    View Slide

19. SSG = Static Site Generator

    ビルド時にページをレンダリングする方式

    SSGとは
    Next.jsアプリケーション、Nuxt.jsアプリケーション

    で手軽に実装することができる。

    ※Next.jsのDocではStatic Generationを説明されているのでSGとも言う

    

    View Slide

20. SSGの仕組み
    GET /

    ブラウザ
 POST /api/post

    JSON

    DB

    SQL

    Res

    ● ビルド時に事前にHTMLを生成
    →Webサーバーに配置→リクエスト
    に応じて返却するだけ

    ページ(HTML)

    ビルド時に

    レンダリング

    初回以降はクライアントで

    レンダリング

    バックエンド用

    Webサーバー

    フロントエンド用

    Webサーバー

    

    View Slide

21. SSGのメリデメ
    ● ページの表示がCSR、SSRより高速

    ● Node.jsが不要

    ● SEO対策可能

    ● ページ単位でOGPを設定できる

    メリット
    デメリット
    ● 頻繁に表示が変わる場合、都度ビルドが必要な
    ので不向き

    ● ページ数が多いとビルド時間が長くなる

    

    View Slide

22. まとめ

    

    View Slide

23. ☑ SPAを実現するためにはCSRは必須

    ☑ ただし、CSR+SSR、CSR+SSGで実現するSPAもありえる

    ☑ つまり、「SPA=CSR」というのは厳密には正しくない

    ☑ SSRもSSGで開発したアプリケーションもそのページの初期レ

    ンダリング以降はCSRになる

    ☑ フロントエンドは個人的に難しい

    まとめ
    

    View Slide

24. 詳しくはブログにまとめますので

    Speaker Deckの説明欄をご確認ください🙏

    

    View Slide

25. Thank you 😁🙏

    

    View Slide