MPA化するSPAとSPA化するMPA

by Yosuke Furukawa

Slide 1

Slide 1 text

MPAԽ͢ΔSPAͱ SPAԽ͢ΔMPA 2022/09/21 @ Techfeed

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

MPAԽ͢ΔSPA • ݩʑSPA͸ը໘ભҠʢτϥϯδγϣϯʣΛΞϓ Ϧέʔγϣϯʹ߹Θͤͯ࠷దԽ͢ΔࣄΛ໨తͱ ͍ͯ͠Δɻ • มߋ͕ൃੜͨ͠෦෼͚ͩΛϨϯμϦϯά͢Δ͜ ͱͰߴ଎Խ͢ΔςΫχοΫ͕ͩͬͨɺͦΕΛ͢ ΂ͯͷϖʔδͰߦ͏͜ͱͰશମͷUXΛ্͛Δɻ

Slide 4

Slide 4 text

MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH ͜ͷ࣌఺Ͱදࣔ͞Ε͓ͯΓɺૢ࡞΋Մೳ

Slide 5

Slide 5 text

SPAͷ໰୊఺ɺݟ͑ΔΑ͏ʹͳΔ·ͰʢLCP, FMPʣ͕஗͍͜ͱ 4FSWFS GET / HTML GET ./bundle.js JS 3FOEFSJOH ͜͜ͷ࣌఺Ͱ͸·ͩίϯςϯπ͕ ݟ͑ͳ͍ ͜͜ͰΑ͏΍͘ݟ͑Δɻ ͦͷ୅ΘΓɺ͔͜͜ΒઌͷભҠ͸ ΫϥΠΞϯτͰࠩ෼ϨϯμϦϯά ͢ΔͷͰૣ͘ײ͡Δ

Slide 6

Slide 6 text

Α͠ɺ͡Ό͋SSR/SSG/ISR ͩʂʂʂ • SSR/SSG/ISR ͸શͯ࠷ॳͷHTMLΛฦ࣌͢఺Ͱ಺༰΋ؚΊ ͯฦ͢ͱ͍͏Ξϓϩʔν • SSR͸ϦΫΤετ࣌ʹ࡞Δ΋ͷɺSSG͸ࣄલʹ࡞Δ΋ͷɺ ISR͸ࣄલʹ࡞͓͍ͬͯͯޙ͔Βߋ৽͢Δ΋ͷʢΩϟο γϡ෇͖SSRͱ΄΅ಉ༷ʣ • ཁ͸ HTML ΛԿ͔͠ΒͷλΠϛϯάͰ࡞͓͍ͬͯͯɺͦ ΕΛฦ͢

Slide 7

Slide 7 text

MPAٕज़Λ࢖ͬͯSPAΛ࡞Δ ʢMPAԽ͢ΔSPAʣ

Slide 8

Slide 8 text

MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load

Slide 9

Slide 9 text

͜ͷ࣌఺Ͱେ෼MPAͱSPAͷྑ ͍ͱ͜ΖͲΓΛ͍ͯ͠Δ • ΋ͱ΋ͱMPAͷٕज़Ͱ͋ΔHTMLΛαʔόα ΠυͰϨϯμϦϯά͢Δͷͱɺϩʔυ͞Εͨ ޙSPAͷٕज़ͱͯ͠ϋΠϒϦουઓུΛऔΔײ ͡ • SPA͚ͩͬͨͲɺঃʑʹMPAʹۙدͬͯΔ

Slide 10

Slide 10 text

MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load ͜ͷ࣌఺Ͱίϯςϯπ͕ݟ͑Δ ͨͩ͠ɺ໰୊఺͕ͭ͋Δ

Slide 11

Slide 11 text

MPAԽ͢ΔSPA 4FSWFS GET / HTML GET ./bundle.js JS SSR࣮ߦ HTML ඳը JS load ໰୊఺443࣮ߦ࣌ͷ࣌ؒ ໰୊఺)5.-ඳը͔Β+4MPBE·Ͱͷ࣌ؒ

Slide 12

Slide 12 text

໰୊1 ʹ͍ͭͯ • SSR࣮ߦ࣌ͷ࣌ؒ: ຖճϦΫΤετͯ͠Δ࠷தͷΦϯβϑϥΠͰ࡞ Δͷ͸໰୊΋େ͖͍(ΠϕϯτϧʔϓࢭΊͪΌ͏ɺCPUίετߴ ͍ɺ݁Ռαʔό͔ΒHTMLฦΔ·Ͱͷίετ΋ֻ͔Δ)ɻ • ͔ͱ͍ͬͯɺSSGͩͱࣄલʹશ෦࡞Βͳ͍ͱ͍͚ͳ͍ • ͔ͱ͍ͬͯɺISRͩͱ݁ہΩϟογϡͳͷͰɺrevalidate ظؒΛ୹ ͘͢Ε͹SSRͱಉͩ͡͠ɺ௕͘͢Ε͹ࠓ౓͸࠷৽൓ө͞ΕΔ·Ͱͷ ظ͕ؒԆͼΔʢΩϟογϡϥΠϑαΠΫϧͷ໰୊ʹ໰୊Λม͑Δ͜ ͱ͸Ͱ͖Δ͕ɺͦΕͩͬͨΒ CDN + SSR Ͱ΋ಉ͜͡ͱ͸Ͱ͖Δʣ

Slide 13

Slide 13 text

໰୊1 ʹ͍ͭͯ • ཁ͸ࠓͷॴಛʹࠜຊతͳղܾࡦ͸ͳ͘ɺΩϟο γϡΛ࣋ͭ or ΤοδαΠυʹ࣋ͬͯߦͬͪΌͬ ͯͳΜͱ͔͠Α͏ͱ͍ͯ͠Δϑγ͕͋Δɻ • React 18 ͱ Next 12 Ͱ͸ Streaming SSR ͳͲ ͷํ๏΋͋Δɻ͜ΕʹΑΓɺग़དྷ্͕ͬͨͱ͜ Ζ͔Βͪΐͬͱͣͭฦͤ͹ྑ͍Μ͡ΌͶʁ࡞ઓ ΋͋Δɻ

Slide 14

Slide 14 text

Streaming SSR 4FSWFS GET / HTML MPBEJOH Streaming SSR HTML ඳը։࢝ Fragment Fragment HTML ඳըऴྃ

Slide 15

Slide 15 text

໰୊2 ʹ͍ͭͯ • ཁ͸ݟ͑Δͷʹԡͤͳ͍ʂʂʂͱ͍͏໰୊ • ͜Ε͕ࠓͷॴϑϨʔϜϫʔΫք۾Ͱ͸ϗοτ τϐοΫ • LCPʢॏཁͳίϯςϯπ͕ݟ͑Δ·Ͱʣ͸଎͍ ͚Ͳɺ͔ͦ͜ΒTTI (ૢ࡞Մೳ)ʹͳΔ͕࣌ؒ஗ ͍ͱ͍͏ঢ়گ

Slide 16

Slide 16 text

໰୊2 ʹ͍ͭͯ • ͦ΋ͦ΋ bundle.js ͷαΠζͰ͔͍͔Β࡟Ζ͏ͥͬ ͍ͯ͏࿩΋΋ͪΖΜ͋Δɻ • Next.js Ͱ͸ ͋Δఔ౓ϖʔδ͝ͱ΍ϥΠϒϥϦͷα Πζ΍Ͳ͔͜ΒͰ΋࢖ΘΕͯΔϥΠϒϥϦ͔Ͳ͏ ͔౳ͷ৘ใ͔Β࠷దԽͨ͠ code split Λͯ͘͠ΕΔ • ݱঢ়ͷ࠷దԽ͸͜͜ࢭ·Γɻ

Slide 17

Slide 17 text

໰୊2 ʹ͍ͭͯ • React ਞӦ: Selective Hydration ͩʂʂ (PPHMF*0ΑΓ

Slide 18

Slide 18 text

໰୊2 ʹ͍ͭͯ • ཁ͸શ෦ͷίϯϙʔωϯτʹରͯ͠Ұؾʹ΍ ΔΜ͡Όͳͯ͘ஈ֊Λܦͯগͣͭͣͭ͠΍Δ

Slide 19

Slide 19 text

ͪΐͬͱ଴ͬͨʂʂʂ

Slide 20

Slide 20 text

ͦ΋ͦ΋ͳΜͰͦΜͳ͔࣌ؒ ͔ΔΜεΧʁReact ͞Μ

Slide 21

Slide 21 text

ͦ΋ͦ΋ͷ΍Γํ͔Βݟ௚͠ ·ͤΜʁ

Slide 22

Slide 22 text

ͳΜͰͦΜͳʹ͔͔࣌ؒΔͷʁ • ·ͣJS͕ॏ͍ɻ • JS ͷϩʔυΛͨ͠ޙɺΠϕϯτϋϯυϥ΍αʔόͰ࡞ΒΕͨঢ় ଶΛίϯϙʔωϯτʹొ࿥͢Δͷʹ͕͔͔࣌ؒΔ(Hydration)ɻ • Πϕϯτϋϯυϥ͸ͨͩͷ७ਮͳؔ਺͡Όͳ͍ɺ෭࡞༻͕ ͋ͬͨΓɺ֎ଆͷঢ়ଶʹ΋ΠϯλϥΫτ͢Δɻ • αʔόαΠυͰੜ੒ͨ͠ঢ়ଶͷ෮ؼʹ͕͔͔͍࣌ؒͬͯΔɻ

Slide 23

Slide 23 text

ର߅അͦͷ1: Astro • Astro ͸ͦ΋ͦ΋ MPA Λجຊͱ͍ͯ͠Δɻ • جຊΞΠσΞ͸ React / Vue / Preact ͳΜͰ΋ ࢖ͬͯྑ͍ɻͦͷ୅ΘΓαʔόαΠυͰϨϯμ Ϧϯά͢ΔͷΛجຊͱ͢Δɻ • ΫϥΠΞϯταΠυͰͷJS͸σϑΥϧτͰ͸࡞ Βͳ͍ɻ

Slide 24

Slide 24 text

ର߅അͦͷ1: Astro • ͑ɺͦΕ͡ΌͲ͏΍ͬͯ෦෼తʹߋ৽͢ΔΜͰ͔͢ʁ • ෦෼తͳߋ৽͍ͨ͠ίϯϙʔωϯτʢΫϥΠΞϯτͷJS͕ඞཁͳ΋ͷ ͚ͩʣૂͬͯ Hydration͢Δ(͜Ε΋ҰԠ Selective Hydration ͱ͍͑Δ) • SPAΛجຊͱ͍ͯ͠ͳ͍ͷͰɺඞཁͳ΋ͷʹ͚ͩJSΛޮ͔ͤΔͱ͍͏ߟ ͑ํ • ͨͩ React / Vue / YourFavFrameworks ͸ී௨ʹ࢖͑Δ͠ɺ׳ΕͨUIϑ ϨʔϜϫʔΫͰ։ൃͰ͖Δɻͦͷ্ͰίϯςϯπʹಛԽͨ͠ϖʔδͳΒ ॳظදࣔ΋଎͍ɻ

Slide 25

Slide 25 text

ର߅അͦͷ1: Astro • ͋ͱɺΤοδͰஔ͘͜ͱ΋αϙʔτ͍ͯ͠Δ • ͳͷͰɺ SSR ͩͱͯ͠΋Τοδͷ෼ࢄ͞ΕͨϊʔυͰ ಈ͘ͷͰ CPU ෛՙͱ͔͸ͦ͜·Ͱؾʹ͠ͳͯ͘ྑ͍ ʢ͸ͣʣ • ͜͜΋ YourFavoriteEdge ʢAmplify, Cloudﬂare, Vercelʣʹஔ͍ͯ࢖͑͹ྑ͍ʢͱ͍͏ࣄʹͳ͍ͬͯΔʣ

Slide 26

Slide 26 text

Astro ͷղܾࡦ • SSR஗͍໰୊ => Edge ʹஔ͚͹͓͚ • JS ॏͯ͘ TTI ஗͍໰୊ => ͦ΋ͦ΋JS഑৴͠ͳ ͖Ό͓͚ • Πϕϯτొ࿥Ͱ͖ͳͯ͘ɺ෦෼ߋ৽Ͱ͖ͳ͍໰୊ => ૂͬͨͱ͜Ζʹ͚ͩJSಡΈࠐ·ͤΓΌ͓͚

Slide 27

Slide 27 text

ର߅അͦͷ2: Qwik • Qwik ΋جຊతʹ MPA • ͦ΋ͦ΋ॳظදࣔͱTTI͕଎͖Όྑ͍Μ΍Ζʁ • Hydration ͳΜͯͦ΋ͦ΋͍ΒΜ͔ͬͨΜ΍... •

Slide 28

Slide 28 text

ର߅അͦͷ2: Qwik • ݴ͍͍ͨ͜ͱ͜͜ʹશ෦٧·ͬͯΔɻ

Slide 29

Slide 29 text

ର߅അͦͷ2: Qwik • جຊઓུ: ͦ΋ͦ΋ MPA ʹ͍ͯ͠Δɻ͋ͱɺ Hydration ͠ͳ͍ɻ • Hydration ΋͠ͳ͍Μ͔ͩΒɺ JS ΋࠷খݶͰ ͍͍ɻ

Slide 30

Slide 30 text

ର߅അͦͷ2: Qwik • Q: ͑ɺͦΕ͡ΌͲ͏΍ͬͯΠϕϯτऔΔΜͰ͔͢ʁ • A: DOM ʹͦ΋ͦ΋Πϕϯτϋϯυϥ෇͚͓͚ͯ͹͑͑Μ ΍ɻ • Q: ঢ়ଶ͸ɾɾɾʁ • A: ͦΕ΋DOMʹॻ͖Ό͑͑΍Ζɻ • Q: ͑ɺͲ͏͍͏͜ͱɾɾɾʁ

Slide 31

Slide 31 text

ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ

Slide 32

Slide 32 text

ର߅അͦͷ2: Qwik • ͜͏͍͏͜ͱ 3FBDUͷίϯϙʔωϯτΛॻ͘ POJOQVUϋϯυϥΛ%0.ʹೖΕ͓ͯ͘ Πϕϯτ͕ى͖ͨΒͦͷλΠϛϯάͰ+4Λ μ΢ϯϩʔυͯ͠ɺଓ͚ΒΕΔΑ͏ʹ͢Δɻ

Slide 33

Slide 33 text

Qwik ͷղܾࡦ • SSR஗͍໰୊ => qwik ͷαΠτʹ͸ಛʹͳ͔͚ͬͨ Ͳɺ͜͜΋Edgeʹ͓͚(ͷ͸ͣ) • JS ॏͯ͘ TTI ஗͍໰୊ => ඞཁʹͳΔ·ͰJS഑৴͠ ͳ͍ઓུ • Πϕϯτొ࿥Ͱ͖ͳͯ͘ɺ෦෼ߋ৽Ͱ͖ͳ͍໰୊ =>ඞཁʹͳ͔ͬͯΒͦ͜ʹ͚ͩμ΢ϯϩʔυͤ͞Δ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

SPAٕज़Λ࢖ͬͯMPAΛ࡞Δ ʢSPAԽ͢ΔMPAʣ

Slide 36

Slide 36 text

ͨͩ΍ͬͺΓͦΕͩͱεϜʔεͳτϥ ϯδγϣϯ͸ۤखͳͷͰ͸ɾɾɾɾʁ • Chrome ͕த৺ʹͳͬͯਐΊ͍ͯΔ Shared Element Transition ͱͷ૊Έ߹ΘͤͰεϜʔζτϥϯδγϣϯ΋࣮ ݱͰ͖ΔͱͷσϞ͋Γɻ https://twitter.com/charca/status/1570835238359830529