Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
非フロントエンジニア観点でのMPA・SPA・SSR・SSGの違い
Search
Satoshi Kaneyasu
December 27, 2023
Programming
1
1.3k
非フロントエンジニア観点でのMPA・SPA・SSR・SSGの違い
Satoshi Kaneyasu
December 27, 2023
Tweet
Share
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
1.2k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
240
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
180
今更聞けないセキュリティ用語の基礎知識 2025新春
satoshi256kbyte
0
140
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
260
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
500
おもにクラウドの話してます#4 OPスライド
satoshi256kbyte
0
68
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
280
Amazon Aurora Serverless v2のアプデと、Amazon Aurora PostgreSQL Limitless DatabaseのGAについて
satoshi256kbyte
0
200
Other Decks in Programming
See All in Programming
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
150
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
530
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
240
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.5k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.1k
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
310
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
Gunma.web #55
tinykitten
0
130
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Gamification - CAS2011
davidbonilla
81
5.2k
Building Applications with DynamoDB
mza
94
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Thoughts on Productivity
jonyablonski
69
4.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLとの向き合い方2022年版
quramy
45
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
⾮フロントエンジニア観点での MPA・SPA・SSR・SSGの違い 2023.12.27 SATOSHI KANEYASU
⾃⼰紹介 ⽒名︓兼安 聡 職種︓クラウドエンジニア 趣味︓サックス、筋トレ、CS ゲーム 資格︓ X(Twitter)︓@satoshi256kbyte など
本資料について • 本資料は、MPA・SPA・SSR・SSGの違いをざっくり説明したものです。 • ⾮フロントエンジニアが違いを理解するための資料とお考えください。
ざっくりとした⽐較表 項⽬ MPA SPA SSR SSG 開発のしやすさ 中 ⾼ 中〜⾼
⾼ レスポンス 中 ⾼ ⾼ 最⾼ データ量 ⼤ 中 中 ⼩ ネットワーク通信量 ⼤ ⼩ 中 最⼩ SEO ⾼ 低 ⾼ ⾼
MPA (Multi-Page Application) • 画⾯遷移する度にサーバー側で画⾯全体を作ってクライアントに渡す • 例)Wordpress • 画⾯遷移のたびにブラウザの更新ボタンが×になる •
私たちが使うとモノリシックな作り⽅になりがち • 先にバックエンドを実装して、画⾯の実装が後回しになりがち • 昔⾔われてた「戻るボタン効かない問題」はMPAでも解決可能 • 別にMPAそのものにそんなに問題があるわけではない コレ
MPAの通信の流れ 初回 画⾯全体 リクエスト PHP SQL レスポンス 描画 画像 リクエスト
レスポンス 描画 CSS リクエスト レスポンス 描画 JS リクエスト レスポンス 実⾏ n回⽬ 画⾯全体 リクエスト PHP SQL レスポンス 描画 画像 リクエスト レスポンス 描画 CSS リクエスト レスポンス 描画 JS リクエスト レスポンス 実⾏ ページ遷移ごとに全ての通信と処理が⾛る
SPA (Single-Page Application) • ⼀発⽬に画⾯⼀式分を返す その後は差分だけ返してクライアント側で描画する • 例)React.js、Vue.js • かなり難しい
• フロントにFWが存在するという概念⾃体がピンとこない⼈もいる • デザイナーとの分業が⽐較的しやすい • 分業しないと画⾯の変更要望に追いつけない現実もある • SEOが弱い • 検索botは画⾯の差分を動的に作ってくれない、リンクを辿ってくれない • 同じ理由で、Xのサムネイルが出ない
SPAの通信と処理の流れ 初回 画⾯全体 リクエスト PHP SQL レスポンス 描画 画像 リクエスト
レスポンス 描画 CSS リクエスト レスポンス 描画 JS リクエスト レスポンス 実⾏ n回⽬ 差分データ リクエスト PHP SQL レスポンス 描画 初回に画⾯⼀式を返したあとはあとは差分
SSR (Server-Side Rendering) • MPAとSPAの中間のような技術 • ある程度の画⾯をサーバー側で描画する • 例)Next.js(React.jsの派⽣)、Nuxt.js(Vue.jsの派⽣) •
サーバー側とクライアント側が混在するのでまた違う難しさ • デザイナーとの分業がしやすい︖ • 私たちから⾒たらピンとこないが、フロント界隈ではメジャーなのかも • ⽐較的SEOが強い • 作れる画⾯はサーバー側で作るので、検索botがリンクを辿ってくれる • Xのサムネイルが出る
SSG (Static Site Generation) • 全ページをサーバーで完全にHTML化して、配置。 リクエストされたらただ返すだけの状態にする技術。 • 記事を投稿したら、全ページ⼀気に作り直して再配置する。 •
例)Gatsby.js • ものすごく軽くて早い • CMSのようなものと捉えるとものすごく機能不⾜を感じる • 回避策はなくはないが • ランディングページとかに向いてると予想 • 縁がないのでわからない・・・
もう⼀回表 項⽬ MPA SPA SSR SSG 開発のしやすさ 中 ⾼ 中〜⾼
⾼ レスポンス 中 ⾼ ⾼ 最⾼ データ量 ⼤ 中 中 ⼩ ネットワーク通信量 ⼤ ⼩ 中 最⼩ SEO ⾼ 低 ⾼ ⾼ 得⼿不得⼿はあるけど特定の技術でないとできない︕ ってのは少ない だからこそ⼀つの技術で突っ⾛るのではなく、 ⽬的に合わせて使い分けたい
最後に • フロントの⼈じゃなくても⽤語は知って欲しい • 最近Next.jsでSPAをしようとしてなんか違うなと思ったので、 みなさんは適材適所してね︕