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とSPA化するMPA
Search
Yosuke Furukawa
PRO
September 21, 2022
Programming
15
11k
MPA化するSPAとSPA化するMPA
2022/9/21 Techfeed カンファレンスで発表した MPA化するSPAとSPA化するMPA の話です。
Yosuke Furukawa
PRO
September 21, 2022
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.1k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.1k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.9k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.1k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.7k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.3k
Deep Dive International Conference
yosuke_furukawa
PRO
0
100
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.8k
フロントエンドリアーキテクトの話
yosuke_furukawa
PRO
18
8.9k
Other Decks in Programming
See All in Programming
Elm 0.19.0 Changes
bkuhlmann
0
490
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Goのmultiple errorsについて (2024年4月版)
syumai
3
660
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
750
Apache Hive 4 on Treasure Data
ryukobayashi
0
170
新宿ダンジョンを可視化してみた
satoshi7190
2
250
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Code Reviews
bkuhlmann
4
890
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
310
Site Reliability Engineering for GMO
pyama86
8
1k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
The Invisible Customer
myddelton
114
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Being A Developer After 40
akosma
57
580k
Designing Experiences People Love
moore
136
23k
A designer walks into a library…
pauljervisheath
200
23k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Fireside Chat
paigeccino
21
2.6k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Navigating Team Friction
lara
178
13k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Transcript
MPAԽ͢ΔSPAͱ SPAԽ͢ΔMPA 2022/09/21 @ Techfeed
Twitter: @yosuke_furukawa Github: yosuke-furukawa
MPAԽ͢ΔSPA • ݩʑSPAը໘ભҠʢτϥϯδγϣϯʣΛΞϓ Ϧέʔγϣϯʹ߹Θͤͯ࠷దԽ͢ΔࣄΛతͱ ͍ͯ͠Δɻ • มߋ͕ൃੜͨ͠෦͚ͩΛϨϯμϦϯά͢Δ͜ ͱͰߴԽ͢ΔςΫχοΫ͕ͩͬͨɺͦΕΛ͢ ͯͷϖʔδͰߦ͏͜ͱͰશମͷUXΛ্͛Δɻ
MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH ͜ͷ࣌Ͱදࣔ͞Ε͓ͯΓɺૢ࡞Մೳ
SPAͷɺݟ͑ΔΑ͏ʹͳΔ·ͰʢLCP, FMPʣ͕͍͜ͱ 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH
͜͜ͷ࣌Ͱ·ͩίϯςϯπ͕ ݟ͑ͳ͍ ͜͜ͰΑ͏͘ݟ͑Δɻ ͦͷΘΓɺ͔͜͜ΒઌͷભҠ ΫϥΠΞϯτͰࠩϨϯμϦϯά ͢ΔͷͰૣ͘ײ͡Δ
Α͠ɺ͡Ό͋SSR/SSG/ISR ͩʂʂʂ • SSR/SSG/ISR શͯ࠷ॳͷHTMLΛฦ࣌͢Ͱ༰ؚΊ ͯฦ͢ͱ͍͏Ξϓϩʔν • SSRϦΫΤετ࣌ʹ࡞ΔͷɺSSGࣄલʹ࡞Δͷɺ ISRࣄલʹ࡞͓͍ͬͯͯޙ͔Βߋ৽͢ΔͷʢΩϟο γϡ͖SSRͱ΄΅ಉ༷ʣ
• ཁ HTML ΛԿ͔͠ΒͷλΠϛϯάͰ࡞͓͍ͬͯͯɺͦ ΕΛฦ͢
MPAٕज़ΛͬͯSPAΛ࡞Δ ʢMPAԽ͢ΔSPAʣ
MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML
ඳը JS load
͜ͷ࣌ͰେMPAͱSPAͷྑ ͍ͱ͜ΖͲΓΛ͍ͯ͠Δ • ͱͱMPAͷٕज़Ͱ͋ΔHTMLΛαʔόα ΠυͰϨϯμϦϯά͢Δͷͱɺϩʔυ͞Εͨ ޙSPAͷٕज़ͱͯ͠ϋΠϒϦουઓུΛऔΔײ ͡ • SPA͚ͩͬͨͲɺঃʑʹMPAʹۙدͬͯΔ
MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML
ඳը JS load ͜ͷ࣌Ͱίϯςϯπ͕ݟ͑Δ ͨͩ͠ɺ͕ͭ͋Δ
MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML
ඳը JS load 443࣮ߦ࣌ͷ࣌ؒ )5.-ඳը͔Β+4MPBE·Ͱͷ࣌ؒ
1 ʹ͍ͭͯ • SSR࣮ߦ࣌ͷ࣌ؒ: ຖճϦΫΤετͯ͠Δ࠷தͷΦϯβϑϥΠͰ࡞ Δͷେ͖͍(ΠϕϯτϧʔϓࢭΊͪΌ͏ɺCPUίετߴ ͍ɺ݁Ռαʔό͔ΒHTMLฦΔ·Ͱͷίετֻ͔Δ)ɻ • ͔ͱ͍ͬͯɺSSGͩͱࣄલʹશ෦࡞Βͳ͍ͱ͍͚ͳ͍ •
͔ͱ͍ͬͯɺISRͩͱ݁ہΩϟογϡͳͷͰɺrevalidate ظؒΛ ͘͢ΕSSRͱಉͩ͡͠ɺ͘͢Εࠓ࠷৽ө͞ΕΔ·Ͱͷ ظ͕ؒԆͼΔʢΩϟογϡϥΠϑαΠΫϧͷʹΛม͑Δ͜ ͱͰ͖Δ͕ɺͦΕͩͬͨΒ CDN + SSR Ͱಉ͜͡ͱͰ͖Δʣ
1 ʹ͍ͭͯ • ཁࠓͷॴಛʹࠜຊతͳղܾࡦͳ͘ɺΩϟο γϡΛ࣋ͭ or ΤοδαΠυʹ࣋ͬͯߦͬͪΌͬ ͯͳΜͱ͔͠Α͏ͱ͍ͯ͠Δϑγ͕͋Δɻ • React
18 ͱ Next 12 Ͱ Streaming SSR ͳͲ ͷํ๏͋Δɻ͜ΕʹΑΓɺग़དྷ্͕ͬͨͱ͜ Ζ͔Βͪΐͬͱͣͭฦͤྑ͍Μ͡ΌͶʁ࡞ઓ ͋Δɻ
Streaming SSR 4FSWFS GET / HTML MPBEJOH Streaming SSR HTML
ඳը։࢝ Fragment Fragment HTML ඳըऴྃ
2 ʹ͍ͭͯ • ཁݟ͑Δͷʹԡͤͳ͍ʂʂʂͱ͍͏ • ͜Ε͕ࠓͷॴϑϨʔϜϫʔΫք۾Ͱϗοτ τϐοΫ • LCPʢॏཁͳίϯςϯπ͕ݟ͑Δ·Ͱʣ͍ ͚Ͳɺ͔ͦ͜ΒTTI
(ૢ࡞Մೳ)ʹͳΔ͕࣌ؒ ͍ͱ͍͏ঢ়گ
2 ʹ͍ͭͯ • ͦͦ bundle.js ͷαΠζͰ͔͍͔ΒΖ͏ͥͬ ͍ͯ͏ͪΖΜ͋Δɻ • Next.js Ͱ
͋Δఔϖʔδ͝ͱϥΠϒϥϦͷα ΠζͲ͔͜ΒͰΘΕͯΔϥΠϒϥϦ͔Ͳ͏ ͔ͷใ͔Β࠷దԽͨ͠ code split Λͯ͘͠ΕΔ • ݱঢ়ͷ࠷దԽ͜͜ࢭ·Γɻ
2 ʹ͍ͭͯ • React ਞӦ: Selective Hydration ͩʂʂ (PPHMF*0ΑΓ
2 ʹ͍ͭͯ • ཁશ෦ͷίϯϙʔωϯτʹରͯ͠Ұؾʹ ΔΜ͡Όͳͯ͘ஈ֊Λܦͯগͣͭͣͭ͠Δ
ͪΐͬͱͬͨʂʂʂ
ͦͦͳΜͰͦΜͳ͔࣌ؒ ͔ΔΜεΧʁReact ͞Μ
ͦͦͷΓํ͔Βݟ͠ ·ͤΜʁ
ͳΜͰͦΜͳʹ͔͔࣌ؒΔͷʁ • ·ͣJS͕ॏ͍ɻ • JS ͷϩʔυΛͨ͠ޙɺΠϕϯτϋϯυϥαʔόͰ࡞ΒΕͨঢ় ଶΛίϯϙʔωϯτʹొ͢Δͷʹ͕͔͔࣌ؒΔ(Hydration)ɻ • Πϕϯτϋϯυϥͨͩͷ७ਮͳؔ͡Όͳ͍ɺ෭࡞༻͕ ͋ͬͨΓɺ֎ଆͷঢ়ଶʹΠϯλϥΫτ͢Δɻ
• αʔόαΠυͰੜͨ͠ঢ়ଶͷ෮ؼʹ͕͔͔͍࣌ؒͬͯΔɻ
ର߅അͦͷ1: Astro • Astro ͦͦ MPA Λجຊͱ͍ͯ͠Δɻ • جຊΞΠσΞ React
/ Vue / Preact ͳΜͰ ͬͯྑ͍ɻͦͷΘΓαʔόαΠυͰϨϯμ Ϧϯά͢ΔͷΛجຊͱ͢Δɻ • ΫϥΠΞϯταΠυͰͷJSσϑΥϧτͰ࡞ Βͳ͍ɻ
ର߅അͦͷ1: Astro • ͑ɺͦΕ͡ΌͲ͏ͬͯ෦తʹߋ৽͢ΔΜͰ͔͢ʁ • ෦తͳߋ৽͍ͨ͠ίϯϙʔωϯτʢΫϥΠΞϯτͷJS͕ඞཁͳͷ ͚ͩʣૂͬͯ Hydration͢Δ(͜ΕҰԠ Selective Hydration
ͱ͍͑Δ) • SPAΛجຊͱ͍ͯ͠ͳ͍ͷͰɺඞཁͳͷʹ͚ͩJSΛޮ͔ͤΔͱ͍͏ߟ ͑ํ • ͨͩ React / Vue / YourFavFrameworks ී௨ʹ͑Δ͠ɺ׳ΕͨUIϑ ϨʔϜϫʔΫͰ։ൃͰ͖Δɻͦͷ্ͰίϯςϯπʹಛԽͨ͠ϖʔδͳΒ ॳظද͍ࣔɻ
ର߅അͦͷ1: Astro • ͋ͱɺΤοδͰஔ͘͜ͱαϙʔτ͍ͯ͠Δ • ͳͷͰɺ SSR ͩͱͯ͠Τοδͷࢄ͞ΕͨϊʔυͰ ಈ͘ͷͰ CPU
ෛՙͱ͔ͦ͜·Ͱؾʹ͠ͳͯ͘ྑ͍ ʢͣʣ • ͜͜ YourFavoriteEdge ʢAmplify, Cloudflare, Vercelʣʹஔ͍ͯ͑ྑ͍ʢͱ͍͏ࣄʹͳ͍ͬͯΔʣ
Astro ͷղܾࡦ • SSR͍ => Edge ʹஔ͚͓͚ • JS ॏͯ͘
TTI ͍ => ͦͦJS৴͠ͳ ͖Ό͓͚ • ΠϕϯτొͰ͖ͳͯ͘ɺ෦ߋ৽Ͱ͖ͳ͍ => ૂͬͨͱ͜Ζʹ͚ͩJSಡΈࠐ·ͤΓΌ͓͚
ର߅അͦͷ2: Qwik • Qwik جຊతʹ MPA • ͦͦॳظදࣔͱTTI͕͖Όྑ͍ΜΖʁ • Hydration
ͳΜ͍ͯͦͦΒΜ͔ͬͨΜ... •
ର߅അͦͷ2: Qwik • ݴ͍͍ͨ͜ͱ͜͜ʹશ෦٧·ͬͯΔɻ
ର߅അͦͷ2: Qwik • جຊઓུ: ͦͦ MPA ʹ͍ͯ͠Δɻ͋ͱɺ Hydration ͠ͳ͍ɻ •
Hydration ͠ͳ͍Μ͔ͩΒɺ JS ࠷খݶͰ ͍͍ɻ
ର߅അͦͷ2: Qwik • Q: ͑ɺͦΕ͡ΌͲ͏ͬͯΠϕϯτऔΔΜͰ͔͢ʁ • A: DOM ʹͦͦΠϕϯτϋϯυϥ͚͓͚ͯ͑͑Μ ɻ
• Q: ঢ়ଶɾɾɾʁ • A: ͦΕDOMʹॻ͖Ό͑͑Ζɻ • Q: ͑ɺͲ͏͍͏͜ͱɾɾɾʁ
ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ
ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ 3FBDUͷίϯϙʔωϯτΛॻ͘ POJOQVUϋϯυϥΛ%0.ʹೖΕ͓ͯ͘ Πϕϯτ͕ى͖ͨΒͦͷλΠϛϯάͰ+4Λ μϯϩʔυͯ͠ɺଓ͚ΒΕΔΑ͏ʹ͢Δɻ
Qwik ͷղܾࡦ • SSR͍ => qwik ͷαΠτʹಛʹͳ͔͚ͬͨ Ͳɺ͜͜Edgeʹ͓͚(ͷͣ) • JS
ॏͯ͘ TTI ͍ => ඞཁʹͳΔ·ͰJS৴͠ ͳ͍ઓུ • ΠϕϯτొͰ͖ͳͯ͘ɺ෦ߋ৽Ͱ͖ͳ͍ =>ඞཁʹͳ͔ͬͯΒͦ͜ʹ͚ͩμϯϩʔυͤ͞Δ
Astro vs Qwik vs Next.js • Qwik ͷձ͕ࣾͬͯΔϕϯνϚʔΫͳͷͰएׯ Qwik دΓ
55* -$1 'JMFTJ[F RXJL T T LC BTUSP T T LC OFYUKT T T LC IUUQTHJUIVCDPN#VJMEFS*0GSBNFXPSLCFODINBSLT
SPAٕज़ΛͬͯMPAΛ࡞Δ ʢSPAԽ͢ΔMPAʣ
ͨͩͬͺΓͦΕͩͱεϜʔεͳτϥ ϯδγϣϯۤखͳͷͰɾɾɾɾʁ • Chrome ͕த৺ʹͳͬͯਐΊ͍ͯΔ Shared Element Transition ͱͷΈ߹ΘͤͰεϜʔζτϥϯδγϣϯ࣮ ݱͰ͖ΔͱͷσϞ͋Γɻ
https://twitter.com/charca/status/1570835238359830529
SPA ɾ MPA ͍·࣍ͷε ςʔδʹདྷ͍ͯΔ
ଓ͖σΟεΧογϣϯͰ