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/

C400a6dc29b681f0284fd33c468e396e?s=128

Yutaro Shimoda

November 27, 2021
Tweet

More Decks by Yutaro Shimoda

Other Decks in Programming

Transcript

  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 😁🙏