Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

はじめに


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

SPA
 Single Page Application


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

CSR
 Client Side Rendering


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

SSR
 Server Side Rendering


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

SSG
 Static Side Generator


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

まとめ


Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

詳しくはブログにまとめますので
 Speaker Deckの説明欄をご確認ください🙏


Slide 25

Slide 25 text

Thank you 😁🙏