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
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
360
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
590
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
RCPと宣言型ポリシーについてのお話し
kokitamura
2
150
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
200
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
120
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Code Reviewing Like a Champion
maltzj
522
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Speed Design
sergeychernyshev
28
860
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
We Have a Design System, Now What?
morganepeng
51
7.5k
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をしようとしてなんか違うなと思ったので、 みなさんは適材適所してね︕