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

by Yutaro Shimoda

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