CSR / SSR / SSGの動向2020

Transcript

1. CSR / SSR / SSG ͷಈ޲2020 ࣲా ࿨ف - Wanta,

   Inc νϟϦςΟʔΧϯϑΝϨϯεԭೄ 2020 Vol.1 Frontendฤ

2. ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL
   
   /FYU
   
   /VYU
   ͕޷͖ɻ

   !TIJCF
3. None

4. microCMSͷ঺հ • ೔ຊ੡ͷϔουϨεCMS • ඇΤϯδχΞͰ΋࢖͍΍͍͢؅ཧը໘ • ίϯςϯπ͸APIܦ༝Ͱऔಘ • ॊೈͳݖݶ؅ཧ •

   Jamstackͱͷ૬ੑ΋˕

5. CSR ΫϥΠΞϯταΠυϨϯμϦϯά

6. ΫϥΠΞϯταΠυϨϯμϦϯά • ΫϥΠΞϯταΠυͰϖʔδΛߏங͢Δ • SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣ͕ίϨʹ͋ͨΔ • αʔόʔϨεSPA͕ΠέͯΔ • ExpressͳͲαʔόʔαΠυϑϨʔϜϫʔΫ͸࢖༻͠ͳ͍ •

   ϒϥ΢βͱσʔλͷ΍ΓऔΓΛߦ͏API͸͢΂ͯCloud FunctionΛ༻͍Δ • microCMS͸αʔόʔϨεSPAߏ੒

7. αʔόʔϨεSPAߏ੒ʢAWS൛ʣ ϒϥ΢β CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML

   / JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ౳ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON

8. αʔόʔϨεSPAͷϝϦοτ • ϖʔδભҠ࣌͸JSONͷ΍ΓऔΓͷΈͰࡁΉͷͰ଎͍ • Webαʔόʔͷ؅ཧ͕ෆཁ • େྔΞΫηε͞Εͯ΋Φʔτεέʔϧ͢ΔͷͰ৺഑ͳ͠ →ϩάΠϯ͕ඞཁͳWebΞϓϦέʔγϣϯ޲͖

9. αʔόʔϨεSPAͷσϝϦοτ • ϝσΟΞͳͲݕࡧIndex͕ඞਢͳഔମʹ͸޲͔ͳ͍ • ҰԠGoogle͸Indexͯ͘͠ΕΔ͕ɺTwitter΍SlackͰͷOGPల։͸
 ͞Εͳ͍

10. SSR + CSR αʔόʔαΠυϨϯμϦϯά

11. αʔόʔαΠυϨϯμϦϯά + CSR • ॳظϩʔυ࣌ͷΈαʔόʔαΠυͰHTMLΛߏங͠ɺϖʔδભҠҎ߱ ͸CSRʢΫϥΠΞϯτϨϯμϦϯάʣΛߦ͏࢓૊ΈΛࢦ͢ • SPAͷSEOܽ఺΍ɺॳظϩʔυ଎౓Λิͬͨߏ੒ • ΋ͱ΋ͱ࣮૷͕͔ͳΓେม͕ͩͬͨɺNext

    / Nuxt ͷొ৔Ͱ͍ͩͿ
 ෑډ͕Լ͕ͬͨ

12. αʔόʔαΠυϨϯμϦϯάͷϝϦοτ • SEO໰୊ͳ͠ • ॳظϩʔυ଎Ί

13. αʔόʔαΠυϨϯμϦϯάͷσϝϦοτ • Webαʔόʔ͕ඞਢ
 ʢྫ͑͹ϗεςΟϯάαʔόʔ͚ͩͰ͸ಈ͔ͤͳ͍ʣ • ࣮૷೉қ౓͕ߴ͍

14. SSG ελςΟοΫαΠτδΣωϨʔτ

15. ελςΟοΫαΠτδΣωϨʔτ • ੩తϖʔδΛࣄલʹੜ੒͠ɺ഑৴͢Δ • ୯ͳΔ੩తϖʔδͳͷͰ଎͍͠ηΩϡΞ • Movable TypeɺHugoɺJekyllɺHexoɺNextɺNuxtɺetc…

16. Jamstack SSG + CSR

17. None

18. Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ഑৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌ ͸CSRΛߦ͏

    • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ

19. Α͋͘ΔJamstackͷߏ੒

20. JamstackͷϝϦοτ • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧ͸Ϗϧυ࣌ͷΈ • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺

    • ສ͕ҰɺAPI͕མͪͯ΋҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆

21. JamstackͷσϝϦοτ • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮૷͕ͪΐͬͱ໘౗ • εςʔδϯά؀ڥΛͲ͏΍ͬͯߏங͢Δ͔౳ɺ஌ݟ͕·ͩগͳ͍

22. Ϗϧυͷ࠷దԽ Build Optimization

23. Jamstack͸Ϗϧυ͕9ׂ • JamstackͰ࠷΋େࣄͳͷ͸Ϗϧυʂͱݴͬͯ΋աݴͰ͸ͳ͍ • جຊతʹ͢΂ͯͷॲཧΛϏϧυ࣌ʹࡁ·͢ • ϖʔδੜ੒ʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ • ϖʔδੜ੒࣌ͷAPIϦΫΤετ਺Λ࠷খݶʹ཈͑Δ •

    ແବͳॲཧΛݮΒ͢

24. Nuxt Generateͷݕূ • MacBookProʢ13-inch, 2017ʣʹͯݕূ • macOS Catalinaʢ10.15.3ʣ • 3.1GHz

    Core i5 • ϝϞϦ 16GB • هࣄͷຊจʹʮ๥ͪΌΜʯͷ๯಄໿5,000จࣈΛදࣔ • هࣄ਺ʢ10, 100, 1000, 10000, 100000ʣͷ5छྨͰݕূ
25. None

26. ܭଌ݁Ռ هࣄ਺        

    ฏۉ஋ʢඵʣ      தԝ஋ʢඵʣ      https://microcms.io/blog/nuxt-measure-build-time/

27. NuxtͷpayloadʹΑΔ
 ಈతϧʔςΟϯάੜ੒ͷߴ଎Խ • Ϗϧυ࣌ͷAPIϦΫΤετ਺Λ࡟ݮ͢Δ ͨΊʹɺpayloadΛ༗ޮతʹ࢖͏ • ϧʔςΟϯά࡞੒࣌ʹίʔϧ͢ΔҰཡ APIͷத਎Λ֤ϖʔδʹpayloadͱͯ͠
 ౉͢ •

    APIϦΫΤετ100ຊˠ1ຊ

28. Next.js ͷ Incremental Static Regeneration • SSR / SSG /

    CSR ͷϋΠϒϦου • ॳճΞΫηε࣌͸SSR • ୭͔͕Ұ౓Ͱ΋ΞΫηε͢Ε͹ɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌͸CSR • TwitterͷσϞ https://static-tweet.now.sh/

29. • Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε • αʔόʔαΠυॲཧ΋ಈ࡞͢Δ • ඞཁ࠷௿ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ
 ࠷େԽΛਤΔͱ͍͏ํ਑͕͋Γͦ͏ • Next.jsʹ͸αʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlify΍S3Ͱ͸ े෼ʹ࢖͍͜ͳͤͳ͍

30. Gatsby ͷ Incremental Builds • Gatsby CloudʢGatsbyࣾͷϗεςΟϯάαʔϏεʣ্Ͱࠩ෼Ϗϧυ Λߦ͏͜ͱ͕Ͱ͖Δ • ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ2ճ໨Ҏ߱͸ߴ଎ʢ਺ඵʣ

31. Gatsby ͷ Conditional Page Builds • ͪ͜Β΋ࠩ෼Ϗϧυ༻ͷઃఆ • Gatsby Cloud্Ͱͳͯ͘΋࢖͑ͦ͏ʢະ֬ೝʣ

    • https://www.gatsbyjs.org/docs/conditional-page-builds/

32. Լॻ͖ϓϨϏϡʔ Preview

33. Jamstackʹ͓͚ΔϓϨϏϡʔ͸ಛघ • ϔουϨεCMSʹ͸Ϗϡʔ͕ͳ͍ͨΊɺϓϨϏϡʔ؀ڥΛผͰ
 ༻ҙ͢Δඞཁ͕͋Δ • CMS্ͰهࣄΛԼॻ͖อଘͨ͠ॠؒʹϓϨϏϡʔ͍ͨ͠ → ຖճϏϧυͯͨ͠Β͔͔࣌ؒΔ → ϓϨϏϡʔը໘෦෼ͷΈSSR·ͨ͸CSRͰߏங͢Δ

34. εςʔδϯά؀ڥߏஙͷྫ • ຊ൪؀ڥ͸Jamstackɺεςʔδϯά؀ڥ͸SPAͱͯ͠༻ҙ͢Δ • NuxtͰ͍͏ͱɺ؀ڥม਺Ͱ mode Λ universal / spa

    Ͱ੾Γସ͑Δ

35. Next.js ͷ Preview Mode ػೳ • Next.jsʹ͸αʔόʔϨεؔ਺ΛىಈͰ͖ΔAPI Routesͱ͍͏ػೳ͕͋Δ • ͜ΕΛར༻͠ɺϓϨϏϡʔ༻ͷΤϯυϙΠϯτʹΞΫηεͨ͠ࡍʹ֘౰هࣄʹରͯ͠ϦμΠ

    ϨΫτΛ͔͚Δ • ͦͷࡍʹPreview༻ͷCookie͕෇༩͞ΕΔ • هࣄଆͰ͸Cookieͷ༗ແΛ൑ఆͯ͠ɺԼॻ͖༻ίϯςϯπΛදࣔ͢Δ • SPA؀ڥͳͲͷผ؀ڥΛ༻ҙͤͣͱ΋ηΩϡΞʹϓϨϏϡʔ͕Մೳ • ৄ͘͠͸ͪ͜ΒͰղઆ • https://microcms.io/blog/nextjs-preview-mode/

36. גࣜձࣾΫϥ΢υϫʔΫε༷ͷࣄྫ • ίʔϙϨʔτϖʔδͷϦχϡʔΞϧͰmicroCMSΛ࠾༻ • NuxtͰߏஙɺJamstack • χϡʔεهࣄ͸3000݅௒͑ • Ϗϧυ࣌ؒ͸ʓʓ෼ •

    ৄ͘͠͸ɺTAMੁՈ͞ΜͷηογϣϯͰ

37. ·ͱΊ Summary

38. ্खʹ࢖͍෼͚Λ͢Δ • ϩάΠϯ͕͋ΔΑ͏ͳWebΞϓϦέʔγϣϯ޲͚ʹ͸SPA • ϝσΟΞͳͲ੩తίϯςϯπଟΊͷWEBαΠτʹ͸Jamstack • Ͳ͏ͯ͠΋αʔόʔαΠυͰॲཧΛڬΈ͔ͨͬͨΒSSR

39. ࠷ޙʹϫʔΫγϣοϓͷએ఻ • 14:00 - 16:00ʹϧʔϜCͰϫʔΫγϣοϓ΍Γ·͢ • ʮmicroCMS + NuxtͰJamstackϒϩάΛ࡞ͬͯΈΑ͏ʯ •

    ϫʔΫγϣοϓதʹࢀՃऀશһ͕Jamstackϒϩά͕࡞ΕΔΑ͏αϙʔ τ͠·͢ • RemoͰ։࠵

40. Thanks :) !TIJCF