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
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.1k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.3k
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.8k
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
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
Other Decks in Programming
See All in Programming
Let's learn code review
riofujimon
2
620
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
140
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
1k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
470
Elm Form Validation
bkuhlmann
0
520
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
290
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
470
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
110
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Atom: Resistance is Futile
akmur
260
25k
Thoughts on Productivity
jonyablonski
60
3.9k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Rails Girls Zürich Keynote
gr2m
91
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
YesSQL, Process and Tooling at Scale
rocio
165
13k
It's Worth the Effort
3n
180
27k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Building an army of robots
kneath
300
41k
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 ͍·࣍ͷε ςʔδʹདྷ͍ͯΔ
ଓ͖σΟεΧογϣϯͰ