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
420
非フロントエンジニア観点でのMPA・SPA・SSR・SSGの違い
Satoshi Kaneyasu
December 27, 2023
Tweet
Share
More Decks by Satoshi Kaneyasu
See All by Satoshi Kaneyasu
Backlog GitとAWS CodePipelineの連携作戦 - 途中報告
satoshi256kbyte
1
42
Amazon Bedrock超入門を読んで用語整理してみた
satoshi256kbyte
3
110
初めての社外登壇と、初めての事例取材
satoshi256kbyte
1
44
コンピュータサイエンスにおけるキューとスタックの解説
satoshi256kbyte
0
320
OSSツールのTrivyでSBOM出力と脆弱性検査をしてみた
satoshi256kbyte
0
170
たまにはExcel VBAを書いてみよう
satoshi256kbyte
0
78
[LT]生成AIを使ったAWS CloudFormationの書き方
satoshi256kbyte
0
160
秋の夜長にAmazon Timestreamとゆっくりと向き合ってみた
satoshi256kbyte
2
730
今あえてGitLab
satoshi256kbyte
0
65
Other Decks in Programming
See All in Programming
Ruby Pattern Matching
bkuhlmann
0
930
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
160
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
460
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Domain-Driven Transformation
hschwentner
2
1.5k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Netty Chicago Java User Group 2024-04-17
sullis
0
200
Git Lint
bkuhlmann
4
760
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.1k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870
Featured
See All Featured
Scaling GitHub
holman
457
140k
How to name files
jennybc
65
93k
Facilitating Awesome Meetings
lara
43
5.6k
Into the Great Unknown - MozCon
thekraken
14
1k
Teambox: Starting and Learning
jrom
128
8.4k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
What's in a price? How to price your products and services
michaelherold
238
11k
What the flash - Photography Introduction
edds
64
11k
The Cult of Friendly URLs
andyhume
74
5.7k
Side Projects
sachag
451
41k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Unsuck your backbone
ammeep
663
57k
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をしようとしてなんか違うなと思ったので、 みなさんは適材適所してね︕