Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 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/

Yutaro Shimoda

November 27, 2021
Tweet

More Decks by Yutaro Shimoda

Other Decks in Programming

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