Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MPA化するSPAとSPA化するMPA

 MPA化するSPAとSPA化するMPA

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

Yosuke Furukawa
PRO

September 21, 2022
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  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.-ඳը͔Β+4MPBE·Ͱͷ࣌ؒ
  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 'JMFTJ[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. ଓ͖͸σΟεΧογϣϯͰ