2022/9/21 Techfeed カンファレンスで発表した MPA化するSPAとSPA化するMPA の話です。
MPAԽ͢ΔSPAͱSPAԽ͢ΔMPA2022/09/21 @ Techfeed
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
MPAԽ͢ΔSPA• ݩʑSPAը໘ભҠʢτϥϯδγϣϯʣΛΞϓϦέʔγϣϯʹ߹Θͤͯ࠷దԽ͢ΔࣄΛతͱ͍ͯ͠Δɻ• มߋ͕ൃੜͨ͠෦͚ͩΛϨϯμϦϯά͢Δ͜ͱͰߴԽ͢ΔςΫχοΫ͕ͩͬͨɺͦΕΛͯ͢ͷϖʔδͰߦ͏͜ͱͰશମͷUXΛ্͛Δɻ
MPAԽ͢ΔSPA4FSWFSGET /HTMLGET ./bundle.jsJS3FOEFSJOH͜ͷ࣌Ͱදࣔ͞Ε͓ͯΓɺૢ࡞Մೳ
SPAͷɺݟ͑ΔΑ͏ʹͳΔ·ͰʢLCP,FMPʣ͕͍͜ͱ4FSWFSGET /HTMLGET ./bundle.jsJS3FOEFSJOH͜͜ͷ࣌Ͱ·ͩίϯςϯπ͕ݟ͑ͳ͍͜͜ͰΑ͏͘ݟ͑ΔɻͦͷΘΓɺ͔͜͜ΒઌͷભҠΫϥΠΞϯτͰࠩϨϯμϦϯά͢ΔͷͰૣ͘ײ͡Δ
Α͠ɺ͡Ό͋SSR/SSG/ISRͩʂʂʂ• SSR/SSG/ISR શͯ࠷ॳͷHTMLΛฦ࣌͢Ͱ༰ؚΊͯฦ͢ͱ͍͏Ξϓϩʔν• SSRϦΫΤετ࣌ʹ࡞ΔͷɺSSGࣄલʹ࡞ΔͷɺISRࣄલʹ࡞͓͍ͬͯͯޙ͔Βߋ৽͢ΔͷʢΩϟογϡ͖SSRͱ΄΅ಉ༷ʣ• ཁ HTML ΛԿ͔͠ΒͷλΠϛϯάͰ࡞͓͍ͬͯͯɺͦΕΛฦ͢
MPAٕज़ΛͬͯSPAΛ࡞ΔʢMPAԽ͢ΔSPAʣ
MPAԽ͢ΔSPA4FSWFSGET /HTMLGET ./bundle.jsJSSSR࣮ߦHTMLඳըJS load
͜ͷ࣌ͰେMPAͱSPAͷྑ͍ͱ͜ΖͲΓΛ͍ͯ͠Δ• ͱͱMPAͷٕज़Ͱ͋ΔHTMLΛαʔόαΠυͰϨϯμϦϯά͢Δͷͱɺϩʔυ͞ΕͨޙSPAͷٕज़ͱͯ͠ϋΠϒϦουઓུΛऔΔײ͡• SPA͚ͩͬͨͲɺঃʑʹMPAʹۙدͬͯΔ
MPAԽ͢ΔSPA4FSWFSGET /HTMLGET ./bundle.jsJSSSR࣮ߦHTMLඳըJS load͜ͷ࣌Ͱίϯςϯπ͕ݟ͑Δͨͩ͠ɺ͕ͭ͋Δ
MPAԽ͢ΔSPA4FSWFSGET /HTMLGET ./bundle.jsJSSSR࣮ߦHTMLඳըJS load443࣮ߦ࣌ͷ࣌ؒ)5.-ඳը͔Β+4MPBE·Ͱͷ࣌ؒ
1 ʹ͍ͭͯ• SSR࣮ߦ࣌ͷ࣌ؒ: ຖճϦΫΤετͯ͠Δ࠷தͷΦϯβϑϥΠͰ࡞Δͷେ͖͍(ΠϕϯτϧʔϓࢭΊͪΌ͏ɺCPUίετߴ͍ɺ݁Ռαʔό͔ΒHTMLฦΔ·Ͱͷίετֻ͔Δ)ɻ• ͔ͱ͍ͬͯɺSSGͩͱࣄલʹશ෦࡞Βͳ͍ͱ͍͚ͳ͍• ͔ͱ͍ͬͯɺISRͩͱ݁ہΩϟογϡͳͷͰɺrevalidate ظؒΛ͘͢ΕSSRͱಉͩ͡͠ɺ͘͢Εࠓ࠷৽ө͞ΕΔ·Ͱͷظ͕ؒԆͼΔʢΩϟογϡϥΠϑαΠΫϧͷʹΛม͑Δ͜ͱͰ͖Δ͕ɺͦΕͩͬͨΒ CDN + SSR Ͱಉ͜͡ͱͰ͖Δʣ
1 ʹ͍ͭͯ• ཁࠓͷॴಛʹࠜຊతͳղܾࡦͳ͘ɺΩϟογϡΛ࣋ͭ or ΤοδαΠυʹ࣋ͬͯߦͬͪΌͬͯͳΜͱ͔͠Α͏ͱ͍ͯ͠Δϑγ͕͋Δɻ• React 18 ͱ Next 12 Ͱ Streaming SSR ͳͲͷํ๏͋Δɻ͜ΕʹΑΓɺग़དྷ্͕ͬͨͱ͜Ζ͔Βͪΐͬͱͣͭฦͤྑ͍Μ͡ΌͶʁ࡞ઓ͋Δɻ
Streaming SSR4FSWFSGET /HTMLMPBEJOHStreamingSSRHTMLඳը։࢝FragmentFragmentHTMLඳըऴྃ
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[FRXJL T T LCBTUSP T T LCOFYUKT T T LCIUUQTHJUIVCDPN#VJMEFS*0GSBNFXPSLCFODINBSLT
SPAٕज़ΛͬͯMPAΛ࡞ΔʢSPAԽ͢ΔMPAʣ
ͨͩͬͺΓͦΕͩͱεϜʔεͳτϥϯδγϣϯۤखͳͷͰɾɾɾɾʁ• Chrome ͕த৺ʹͳͬͯਐΊ͍ͯΔ Shared ElementTransition ͱͷΈ߹ΘͤͰεϜʔζτϥϯδγϣϯ࣮ݱͰ͖ΔͱͷσϞ͋Γɻhttps://twitter.com/charca/status/1570835238359830529
SPA ɾ MPA ͍·࣍ͷεςʔδʹདྷ͍ͯΔ
ଓ͖σΟεΧογϣϯͰ
yosuke_furukawa
koluku
mikobaaaaa0920
uhooi
makomakok
coe401_
twada
.png){kind=avatar}
headwaters
johanjanssens
xztaityozx
koic
track3jyo
javiergs
andyhume
jcasabona
swwweet
lauravandoore
caitiem20
ammeep
tammielis
thekraken
rasmusluckow
kneath
trallard
erikaheidi