MPA化するSPAとSPA化するMPA

2022/9/21 Techfeed カンファレンスで発表した MPA化するSPAとSPA化するMPA の話です。

1. MPAԽ͢ΔSPAͱ SPAԽ͢ΔMPA 2022/09/21 @ Techfeed
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. MPAԽ͢ΔSPA • ݩʑSPA͸ը໘ભҠʢτϥϯδγϣϯʣΛΞϓ Ϧέʔγϣϯʹ߹Θͤͯ࠷దԽ͢ΔࣄΛ໨తͱ ͍ͯ͠Δɻ • มߋ͕ൃੜͨ͠෦෼͚ͩΛϨϯμϦϯά͢Δ͜ ͱͰߴ଎Խ͢ΔςΫχοΫ͕ͩͬͨɺͦΕΛ͢ ΂ͯͷϖʔδͰߦ͏͜ͱͰશମͷUXΛ্͛Δɻ
4. MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH ͜ͷ࣌఺Ͱදࣔ͞Ε͓ͯΓɺૢ࡞΋Մೳ
5. SPAͷ໰୊఺ɺݟ͑ΔΑ͏ʹͳΔ·ͰʢLCP, FMPʣ͕஗͍͜ͱ 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH ͜͜ͷ࣌఺Ͱ͸·ͩίϯςϯπ͕ ݟ͑ͳ͍ ͜͜ͰΑ͏΍͘ݟ͑Δɻ ͦͷ୅ΘΓɺ͔͜͜ΒઌͷભҠ͸ ΫϥΠΞϯτͰࠩ෼ϨϯμϦϯά ͢ΔͷͰૣ͘ײ͡Δ
6. Α͠ɺ͡Ό͋SSR/SSG/ISR ͩʂʂʂ • SSR/SSG/ISR ͸શͯ࠷ॳͷHTMLΛฦ࣌͢఺Ͱ಺༰΋ؚΊ ͯฦ͢ͱ͍͏Ξϓϩʔν • SSR͸ϦΫΤετ࣌ʹ࡞Δ΋ͷɺSSG͸ࣄલʹ࡞Δ΋ͷɺ ISR͸ࣄલʹ࡞͓͍ͬͯͯޙ͔Βߋ৽͢Δ΋ͷʢΩϟο γϡ෇͖SSRͱ΄΅ಉ༷ʣ • ཁ͸ HTML ΛԿ͔͠ΒͷλΠϛϯάͰ࡞͓͍ͬͯͯɺͦ ΕΛฦ͢
7. MPAٕज़Λ࢖ͬͯSPAΛ࡞Δ ʢMPAԽ͢ΔSPAʣ
8. MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load
9. ͜ͷ࣌఺Ͱେ෼MPAͱSPAͷྑ ͍ͱ͜ΖͲΓΛ͍ͯ͠Δ • ΋ͱ΋ͱMPAͷٕज़Ͱ͋ΔHTMLΛαʔόα ΠυͰϨϯμϦϯά͢Δͷͱɺϩʔυ͞Εͨ ޙSPAͷٕज़ͱͯ͠ϋΠϒϦουઓུΛऔΔײ ͡ • SPA͚ͩͬͨͲɺঃʑʹMPAʹۙدͬͯΔ
10. MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load ͜ͷ࣌఺Ͱίϯςϯπ͕ݟ͑Δ ͨͩ͠ɺ໰୊఺͕ͭ͋Δ
11. MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load ໰୊఺
    443࣮ߦ࣌ͷ࣌ؒ ໰୊఺
    )5.-ඳը͔Β+4
    MPBE·Ͱͷ࣌ؒ
12. ໰୊1 ʹ͍ͭͯ • SSR࣮ߦ࣌ͷ࣌ؒ: ຖճϦΫΤετͯ͠Δ࠷தͷΦϯβϑϥΠͰ࡞ Δͷ͸໰୊΋େ͖͍(ΠϕϯτϧʔϓࢭΊͪΌ͏ɺCPUίετߴ ͍ɺ݁Ռαʔό͔ΒHTMLฦΔ·Ͱͷίετ΋ֻ͔Δ)ɻ • ͔ͱ͍ͬͯɺSSGͩͱࣄલʹશ෦࡞Βͳ͍ͱ͍͚ͳ͍ • ͔ͱ͍ͬͯɺISRͩͱ݁ہΩϟογϡͳͷͰɺrevalidate ظؒΛ୹ ͘͢Ε͹SSRͱಉͩ͡͠ɺ௕͘͢Ε͹ࠓ౓͸࠷৽൓ө͞ΕΔ·Ͱͷ ظ͕ؒԆͼΔʢΩϟογϡϥΠϑαΠΫϧͷ໰୊ʹ໰୊Λม͑Δ͜ ͱ͸Ͱ͖Δ͕ɺͦΕͩͬͨΒ CDN + SSR Ͱ΋ಉ͜͡ͱ͸Ͱ͖Δʣ
13. ໰୊1 ʹ͍ͭͯ • ཁ͸ࠓͷॴಛʹࠜຊతͳղܾࡦ͸ͳ͘ɺΩϟο γϡΛ࣋ͭ or ΤοδαΠυʹ࣋ͬͯߦͬͪΌͬ ͯͳΜͱ͔͠Α͏ͱ͍ͯ͠Δϑγ͕͋Δɻ • React 18 ͱ Next 12 Ͱ͸ Streaming SSR ͳͲ ͷํ๏΋͋Δɻ͜ΕʹΑΓɺग़དྷ্͕ͬͨͱ͜ Ζ͔Βͪΐͬͱͣͭฦͤ͹ྑ͍Μ͡ΌͶʁ࡞ઓ ΋͋Δɻ
14. Streaming SSR 4FSWFS GET / HTML MPBEJOH Streaming SSR HTML ඳը։࢝ Fragment Fragment HTML ඳըऴྃ
15. ໰୊2 ʹ͍ͭͯ • ཁ͸ݟ͑Δͷʹԡͤͳ͍ʂʂʂͱ͍͏໰୊ • ͜Ε͕ࠓͷॴϑϨʔϜϫʔΫք۾Ͱ͸ϗοτ τϐοΫ • LCPʢॏཁͳίϯςϯπ͕ݟ͑Δ·Ͱʣ͸଎͍ ͚Ͳɺ͔ͦ͜ΒTTI (ૢ࡞Մೳ)ʹͳΔ͕࣌ؒ஗ ͍ͱ͍͏ঢ়گ
16. ໰୊2 ʹ͍ͭͯ • ͦ΋ͦ΋ bundle.js ͷαΠζͰ͔͍͔Β࡟Ζ͏ͥͬ ͍ͯ͏࿩΋΋ͪΖΜ͋Δɻ • Next.js Ͱ͸ ͋Δఔ౓ϖʔδ͝ͱ΍ϥΠϒϥϦͷα Πζ΍Ͳ͔͜ΒͰ΋࢖ΘΕͯΔϥΠϒϥϦ͔Ͳ͏ ͔౳ͷ৘ใ͔Β࠷దԽͨ͠ code split Λͯ͘͠ΕΔ • ݱঢ়ͷ࠷దԽ͸͜͜ࢭ·Γɻ
17. ໰୊2 ʹ͍ͭͯ • React ਞӦ: Selective Hydration ͩʂʂ (PPHMF
    *0
    
    ΑΓ
18. ໰୊2 ʹ͍ͭͯ • ཁ͸શ෦ͷίϯϙʔωϯτʹରͯ͠Ұؾʹ΍ ΔΜ͡Όͳͯ͘ஈ֊Λܦͯগͣͭͣͭ͠΍Δ
19. ͪΐͬͱ଴ͬͨʂʂʂ
20. ͦ΋ͦ΋ͳΜͰͦΜͳ͔࣌ؒ ͔ΔΜεΧʁReact ͞Μ
21. ͦ΋ͦ΋ͷ΍Γํ͔Βݟ௚͠ ·ͤΜʁ
22. ͳΜͰͦΜͳʹ͔͔࣌ؒΔͷʁ • ·ͣJS͕ॏ͍ɻ • JS ͷϩʔυΛͨ͠ޙɺΠϕϯτϋϯυϥ΍αʔόͰ࡞ΒΕͨঢ় ଶΛίϯϙʔωϯτʹొ࿥͢Δͷʹ͕͔͔࣌ؒΔ(Hydration)ɻ • Πϕϯτϋϯυϥ͸ͨͩͷ७ਮͳؔ਺͡Όͳ͍ɺ෭࡞༻͕ ͋ͬͨΓɺ֎ଆͷঢ়ଶʹ΋ΠϯλϥΫτ͢Δɻ • αʔόαΠυͰੜ੒ͨ͠ঢ়ଶͷ෮ؼʹ͕͔͔͍࣌ؒͬͯΔɻ
23. ର߅അͦͷ1: Astro • Astro ͸ͦ΋ͦ΋ MPA Λجຊͱ͍ͯ͠Δɻ • جຊΞΠσΞ͸ React / Vue / Preact ͳΜͰ΋ ࢖ͬͯྑ͍ɻͦͷ୅ΘΓαʔόαΠυͰϨϯμ Ϧϯά͢ΔͷΛجຊͱ͢Δɻ • ΫϥΠΞϯταΠυͰͷJS͸σϑΥϧτͰ͸࡞ Βͳ͍ɻ
24. ର߅അͦͷ1: Astro • ͑ɺͦΕ͡ΌͲ͏΍ͬͯ෦෼తʹߋ৽͢ΔΜͰ͔͢ʁ • ෦෼తͳߋ৽͍ͨ͠ίϯϙʔωϯτʢΫϥΠΞϯτͷJS͕ඞཁͳ΋ͷ ͚ͩʣૂͬͯ Hydration͢Δ(͜Ε΋ҰԠ Selective Hydration ͱ͍͑Δ) • SPAΛجຊͱ͍ͯ͠ͳ͍ͷͰɺඞཁͳ΋ͷʹ͚ͩJSΛޮ͔ͤΔͱ͍͏ߟ ͑ํ • ͨͩ React / Vue / YourFavFrameworks ͸ී௨ʹ࢖͑Δ͠ɺ׳ΕͨUIϑ ϨʔϜϫʔΫͰ։ൃͰ͖Δɻͦͷ্ͰίϯςϯπʹಛԽͨ͠ϖʔδͳΒ ॳظදࣔ΋଎͍ɻ
25. ର߅അͦͷ1: Astro • ͋ͱɺΤοδͰஔ͘͜ͱ΋αϙʔτ͍ͯ͠Δ • ͳͷͰɺ SSR ͩͱͯ͠΋Τοδͷ෼ࢄ͞ΕͨϊʔυͰ ಈ͘ͷͰ CPU ෛՙͱ͔͸ͦ͜·Ͱؾʹ͠ͳͯ͘ྑ͍ ʢ͸ͣʣ • ͜͜΋ YourFavoriteEdge ʢAmplify, Cloudflare, Vercelʣʹஔ͍ͯ࢖͑͹ྑ͍ʢͱ͍͏ࣄʹͳ͍ͬͯΔʣ
26. Astro ͷղܾࡦ • SSR஗͍໰୊ => Edge ʹஔ͚͹͓͚ • JS ॏͯ͘ TTI ஗͍໰୊ => ͦ΋ͦ΋JS഑৴͠ͳ ͖Ό͓͚ • Πϕϯτొ࿥Ͱ͖ͳͯ͘ɺ෦෼ߋ৽Ͱ͖ͳ͍໰୊ => ૂͬͨͱ͜Ζʹ͚ͩJSಡΈࠐ·ͤΓΌ͓͚
27. ର߅അͦͷ2: Qwik • Qwik ΋جຊతʹ MPA • ͦ΋ͦ΋ॳظදࣔͱTTI͕଎͖Όྑ͍Μ΍Ζʁ • Hydration ͳΜͯͦ΋ͦ΋͍ΒΜ͔ͬͨΜ΍... •
28. ର߅അͦͷ2: Qwik • ݴ͍͍ͨ͜ͱ͜͜ʹશ෦٧·ͬͯΔɻ
29. ର߅അͦͷ2: Qwik • جຊઓུ: ͦ΋ͦ΋ MPA ʹ͍ͯ͠Δɻ͋ͱɺ Hydration ͠ͳ͍ɻ • Hydration ΋͠ͳ͍Μ͔ͩΒɺ JS ΋࠷খݶͰ ͍͍ɻ
30. ର߅അͦͷ2: Qwik • Q: ͑ɺͦΕ͡ΌͲ͏΍ͬͯΠϕϯτऔΔΜͰ͔͢ʁ • A: DOM ʹͦ΋ͦ΋Πϕϯτϋϯυϥ෇͚͓͚ͯ͹͑͑Μ ΍ɻ • Q: ঢ়ଶ͸ɾɾɾʁ • A: ͦΕ΋DOMʹॻ͖Ό͑͑΍Ζɻ • Q: ͑ɺͲ͏͍͏͜ͱɾɾɾʁ
31. ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ
32. ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ 3FBDUͷίϯϙʔωϯτΛॻ͘ POJOQVU
    ϋϯυϥΛ%0.ʹೖΕ͓ͯ͘ Πϕϯτ͕ى͖ͨΒͦͷλΠϛϯάͰ+4Λ μ΢ϯϩʔυͯ͠ɺଓ͚ΒΕΔΑ͏ʹ͢Δɻ
33. Qwik ͷղܾࡦ • SSR஗͍໰୊ => qwik ͷαΠτʹ͸ಛʹͳ͔͚ͬͨ Ͳɺ͜͜΋Edgeʹ͓͚(ͷ͸ͣ) • JS ॏͯ͘ TTI ஗͍໰୊ => ඞཁʹͳΔ·ͰJS഑৴͠ ͳ͍ઓུ • Πϕϯτొ࿥Ͱ͖ͳͯ͘ɺ෦෼ߋ৽Ͱ͖ͳ͍໰୊ =>ඞཁʹͳ͔ͬͯΒͦ͜ʹ͚ͩμ΢ϯϩʔυͤ͞Δ
34. Astro vs Qwik vs Next.js • Qwik ͷձ͕ࣾ΍ͬͯΔϕϯνϚʔΫͳͷͰएׯ Qwik دΓ 55* -$1 'JMF
    TJ[F RXJL T T LC BTUSP T T LC OFYUKT T T LC IUUQTHJUIVCDPN#VJMEFS*0GSBNFXPSLCFODINBSLT
35. SPAٕज़Λ࢖ͬͯMPAΛ࡞Δ ʢSPAԽ͢ΔMPAʣ
36. ͨͩ΍ͬͺΓͦΕͩͱεϜʔεͳτϥ ϯδγϣϯ͸ۤखͳͷͰ͸ɾɾɾɾʁ • Chrome ͕த৺ʹͳͬͯਐΊ͍ͯΔ Shared Element Transition ͱͷ૊Έ߹ΘͤͰεϜʔζτϥϯδγϣϯ΋࣮ ݱͰ͖ΔͱͷσϞ͋Γɻ https://twitter.com/charca/status/1570835238359830529
37. SPA ɾ MPA ͸͍·࣍ͷε ςʔδʹདྷ͍ͯΔ
38. ଓ͖͸σΟεΧογϣϯͰ