MPA化するSPAとSPA化するMPA (original) (raw)

SPAԽ͢ΔMPA
2022/09/21 @ Techfeed
")

Github: yosuke-furuka...")

• ݩʑSPA͸ը໘ભҠʢτϥϯδγϣϯʣΛΞϓ
Ϧέʔγϣϯʹ߹Θͤͯ࠷...")

4FSWFS
GET /
HTML
GET ./bundle.js
JS
...")

FMPʣ͕஗͍͜ͱ
4FSWFS
GET /
...")
͜͜ͷ࣌఺Ͱ͸·ͩίϯςϯπ͕ ݟ͑ͳ͍ ͜͜ͰΑ͏΍͘ݟ͑Δɻ ͦͷ୅ΘΓɺ͔͜͜ΒઌͷભҠ͸ ΫϥΠΞϯτͰࠩ෼ϨϯμϦϯά ͢ΔͷͰૣ͘ײ͡Δ

ͩʂʂʂ
• SSR/SSG/ISR ͸શͯ࠷ॳͷHTML...")
• ཁ͸ HTML ΛԿ͔͠ΒͷλΠϛϯάͰ࡞͓͍ͬͯͯɺͦ ΕΛฦ͢

ʢMPAԽ͢ΔSPAʣ
")

4FSWFS
GET /
HTML
GET ./bundle.js
JS
...")
ඳը JS load

͍ͱ͜ΖͲΓΛ͍ͯ͠Δ
• ΋ͱ΋ͱMPAͷٕज़Ͱ͋ΔHTM...")

4FSWFS
GET /
HTML
GET ./bundle.js
JS
...")
ඳը JS load ͜ͷ࣌఺Ͱίϯςϯπ͕ݟ͑Δ ͨͩ͠ɺ໰୊఺͕ͭ͋Δ

4FSWFS
GET /
HTML
GET ./bundle.js
JS
...")
ඳը JS load ໰୊఺443࣮ߦ࣌ͷ࣌ؒ ໰୊఺)5.-ඳը͔Β+4MPBE·Ͱͷ࣌ؒ

• SSR࣮ߦ࣌ͷ࣌ؒ: ຖճϦΫΤετͯ͠Δ࠷தͷΦϯβϑϥΠͰ࡞
Δͷ͸...")
͔ͱ͍ͬͯɺISRͩͱ݁ہΩϟογϡͳͷͰɺrevalidate ظؒΛ୹ ͘͢Ε͹SSRͱಉͩ͡͠ɺ௕͘͢Ε͹ࠓ౓͸࠷৽൓ө͞ΕΔ·Ͱͷ ظ͕ؒԆͼΔʢΩϟογϡϥΠϑαΠΫϧͷ໰୊ʹ໰୊Λม͑Δ͜ ͱ͸Ͱ͖Δ͕ɺͦΕͩͬͨΒ CDN + SSR Ͱ΋ಉ͜͡ͱ͸Ͱ͖Δʣ

• ཁ͸ࠓͷॴಛʹࠜຊతͳղܾࡦ͸ͳ͘ɺΩϟο
γϡΛ࣋ͭ or ΤοδαΠ...")
18 ͱ Next 12 Ͱ͸ Streaming SSR ͳͲ ͷํ๏΋͋Δɻ͜ΕʹΑΓɺग़དྷ্͕ͬͨͱ͜ Ζ͔Βͪΐͬͱͣͭฦͤ͹ྑ͍Μ͡ΌͶʁ࡞ઓ ΋͋Δɻ

4FSWFS
GET /
HTML
MPBEJOH
Stre...")
ඳը։࢝ Fragment Fragment HTML ඳըऴྃ

• ཁ͸ݟ͑Δͷʹԡͤͳ͍ʂʂʂͱ͍͏໰୊
• ͜Ε͕ࠓͷॴϑϨʔϜϫʔΫք...")
(ૢ࡞Մೳ)ʹͳΔ͕࣌ؒ஗ ͍ͱ͍͏ঢ়گ

• ͦ΋ͦ΋ bundle.js ͷαΠζͰ͔͍͔Β࡟Ζ͏ͥͬ
͍ͯ͏࿩΋΋...")
͋Δఔ౓ϖʔδ͝ͱ΍ϥΠϒϥϦͷα Πζ΍Ͳ͔͜ΒͰ΋࢖ΘΕͯΔϥΠϒϥϦ͔Ͳ͏ ͔౳ͷ৘ใ͔Β࠷దԽͨ͠ code split Λͯ͘͠ΕΔ • ݱঢ়ͷ࠷దԽ͸͜͜ࢭ·Γɻ

• React ਞӦ: Selective Hydration ͩʂʂ
(P...")

• ཁ͸શ෦ͷίϯϙʔωϯτʹରͯ͠Ұؾʹ΍
ΔΜ͡Όͳͯ͘ஈ֊Λܦͯগͣ͠...")

")

͔ΔΜεΧʁReact ͞Μ
")

·ͤΜʁ
")

• ·ͣJS͕ॏ͍ɻ
• JS ͷϩʔυΛͨ͠ޙɺΠϕϯτϋϯυ...")
• αʔόαΠυͰੜ੒ͨ͠ঢ়ଶͷ෮ؼʹ͕͔͔͍࣌ؒͬͯΔɻ

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

• ͑ɺͦΕ͡ΌͲ͏΍ͬͯ෦෼తʹߋ৽͢ΔΜͰ͔͢ʁ
• ෦෼తͳ...")
ͱ͍͑Δ) • SPAΛجຊͱ͍ͯ͠ͳ͍ͷͰɺඞཁͳ΋ͷʹ͚ͩJSΛޮ͔ͤΔͱ͍͏ߟ ͑ํ • ͨͩ React / Vue / YourFavFrameworks ͸ී௨ʹ࢖͑Δ͠ɺ׳ΕͨUIϑ ϨʔϜϫʔΫͰ։ൃͰ͖Δɻͦͷ্ͰίϯςϯπʹಛԽͨ͠ϖʔδͳΒ ॳظදࣔ΋଎͍ɻ

• ͋ͱɺΤοδͰஔ͘͜ͱ΋αϙʔτ͍ͯ͠Δ
• ͳͷͰɺ SSR...")
ෛՙͱ͔͸ͦ͜·Ͱؾʹ͠ͳͯ͘ྑ͍ ʢ͸ͣʣ • ͜͜΋ YourFavoriteEdge ʢAmplify, Cloudflare, Vercelʣʹஔ͍ͯ࢖͑͹ྑ͍ʢͱ͍͏ࣄʹͳ͍ͬͯΔʣ

• SSR஗͍໰୊ => Edge ʹஔ͚͹͓͚
• JS ॏͯ͘ TT...")
TTI ஗͍໰୊ => ͦ΋ͦ΋JS഑৴͠ͳ ͖Ό͓͚ • Πϕϯτొ࿥Ͱ͖ͳͯ͘ɺ෦෼ߋ৽Ͱ͖ͳ͍໰୊ => ૂͬͨͱ͜Ζʹ͚ͩJSಡΈࠐ·ͤΓΌ͓͚

• Qwik ΋جຊతʹ MPA
• ͦ΋ͦ΋ॳظදࣔͱTTI͕଎͖...")
ͳΜͯͦ΋ͦ΋͍ΒΜ͔ͬͨΜ΍... •

• ݴ͍͍ͨ͜ͱ͜͜ʹશ෦٧·ͬͯΔɻ
")

• جຊઓུ: ͦ΋ͦ΋ MPA ʹ͍ͯ͠Δɻ͋ͱɺ
Hydrati...")
Hydration ΋͠ͳ͍Μ͔ͩΒɺ JS ΋࠷খݶͰ ͍͍ɻ

• Q: ͑ɺͦΕ͡ΌͲ͏΍ͬͯΠϕϯτऔΔΜͰ͔͢ʁ
• A: D...")
• Q: ঢ়ଶ͸ɾɾɾʁ • A: ͦΕ΋DOMʹॻ͖Ό͑͑΍Ζɻ • Q: ͑ɺͲ͏͍͏͜ͱɾɾɾʁ

• ͜͏͍͏͜ͱ
")

• ͜͏͍͏͜ͱ
3FBDUͷίϯϙʔωϯτΛॻ͘
POJOQVU...")

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

• Qwik ͷձ͕ࣾ΍ͬͯΔϕϯνϚʔΫͳ...")
55* -$1 'JMFTJ[F RXJL T T LC BTUSP T T LC OFYUKT T T LC IUUQTHJUIVCDPN#VJMEFS*0GSBNFXPSLCFODINBSLT

ʢSPAԽ͢ΔMPAʣ
")

ϯδγϣϯ͸ۤखͳͷͰ͸ɾɾɾɾʁ
• Chrome ͕த...")
https://twitter.com/charca/status/1570835238359830529

ςʔδʹདྷ͍ͯΔ
")

")