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
3k
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
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
120
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
480
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Milestoner
bkuhlmann
1
420
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
1
160
Sheets API使ってみた
toshi0383
2
170
Deep Dive into React Stream/Serialize
mugi_uno
3
760
禅の心を手に入れよ
eltociear
1
440
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Domain-Driven Transformation
hschwentner
2
1.5k
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
480
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
30
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
54
Navigating Team Friction
lara
179
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
The Cult of Friendly URLs
andyhume
74
5.7k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Optimizing for Happiness
mojombo
370
69k
We Have a Design System, Now What?
morganepeng
43
6.8k
Bash Introduction
62gerente
605
210k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
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 ͍·࣍ͷε ςʔδʹདྷ͍ͯΔ
ଓ͖σΟεΧογϣϯͰ