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(Single Page Application)とは
 • CSR(Client Side

    Rendering)とは
 • SSR(Server Side Rendering)とは
 • SSG(Static Site Generator)とは
 • まとめ

  2. CSRの仕組み GET /
 ブラウザ
 フロントエンド用
 Webサーバー
 GET /api/post
 JSON
 DB


    SQL
 Res
 • 初回アクセス時にアプリケーションの全ての HTML/CSS/JSを受け取る
 • クライアントサイドで実行するレンダリング
 クライアントで
 レンダリング
 バックエンド用
 Webサーバー

  3. /login ログインページ
 CSR補足 / トップページ
 JSON
 ・成功時のメッセージ 
 ・バリデーションメッセージ 


    メールアドレス
 パスワード
 単純なページ遷移は 
 サーバーに通信しない 
 (Vuex, React Router) 
 バックエンド用
 Webサーバー

  4. SSRの仕組み GET /
 ブラウザ
 POST /api/post
 DB
 SQL
 Res
 •

    サーバーサイドでページをレンダリングする
 • それ以降はクライアントでレンダリングを行う
 GET /api/post
 JSON
 JSON
 Webサーバーで
 レンダリング
 初回以降はクライアントで
 レンダリング
 ページ(HTML)
 フロントエンド用
 Webサーバー
 バックエンド用
 Webサーバー

  5. SSRのメリデメ • 初期表示がCSRより早い
 • SEO対策可能
 • ページ単位でOGPを設定できる
 メリット デメリット •

    サーバーの管理、負荷を考慮が必要
 • サーバーサイド実行環境が必要→CSRより実装難易度高

  6. SSGの仕組み GET /
 ブラウザ
 POST /api/post
 JSON
 DB
 SQL
 Res


    • ビルド時に事前にHTMLを生成 →Webサーバーに配置→リクエスト に応じて返却するだけ
 ページ(HTML)
 ビルド時に
 レンダリング
 初回以降はクライアントで
 レンダリング
 バックエンド用
 Webサーバー
 フロントエンド用
 Webサーバー

  7. SSGのメリデメ • ページの表示がCSR、SSRより高速
 • Node.jsが不要
 • SEO対策可能
 • ページ単位でOGPを設定できる
 メリット

    デメリット • 頻繁に表示が変わる場合、都度ビルドが必要な ので不向き
 • ページ数が多いとビルド時間が長くなる