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
13k
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
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
410
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Rancher と Terraform
fufuhu
2
240
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
速いWebフレームワークを作る
yusukebe
5
1.7k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
Kiroで始めるAI-DLC
kaonash
2
580
1から理解するWeb Push
dora1998
7
1.8k
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
GitHub's CSS Performance
jonrohan
1032
460k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Applications with DynamoDB
mza
96
6.6k
Into the Great Unknown - MozCon
thekraken
40
2k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
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 ͍·࣍ͷε ςʔδʹདྷ͍ͯΔ
ଓ͖σΟεΧογϣϯͰ