CSR / SSR / SSGの動向2020

チャリティーカンファレンス沖縄2020 Vol.1の発表資料です。

Transcript

1. CSR / SSR / SSG ͷಈ޲2020
   ࣲా ࿨ف - Wanta, Inc
   νϟϦςΟʔΧϯϑΝϨϯεԭೄ 2020 Vol.1 Frontendฤ
   

   View Slide

2. ࣲా ࿨ف / Kazuki Shibata
   ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ
   $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ

   ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL/FYU/VYU͕޷͖ɻ
   !TIJCF
   

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

6. ΫϥΠΞϯταΠυϨϯμϦϯά
   • ΫϥΠΞϯταΠυͰϖʔδΛߏங͢Δ
   • SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣ͕ίϨʹ͋ͨΔ
   • αʔόʔϨεSPA͕ΠέͯΔ
   • ExpressͳͲαʔόʔαΠυϑϨʔϜϫʔΫ͸࢖༻͠ͳ͍
   • ϒϥ΢βͱσʔλͷ΍ΓऔΓΛߦ͏API͸͢΂ͯCloud FunctionΛ༻͍Δ
   • microCMS͸αʔόʔϨεSPAߏ੒
   

   View Slide

7. αʔόʔϨεSPAߏ੒ʢAWS൛ʣ
   ϒϥ΢β
   CloudFront
   ʢCDNʣ
   S3
   ʢStorageʣ
   Lambda
   ʢCloud Functionʣ
   HTML / JS / CSS / ը૾
   औಘɺૹ৴ɺݕࡧ౳
   Ωϟογϡ
   DynamoDB
   ʢDatabaseʣ
   CognitoʢIdentityʣ
   ೝ
   ূ
   σʔλ
   API Gateway
   JSON
   

   View Slide

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

   View Slide

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

   ͞Εͳ͍
   

   View Slide

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

    View Slide

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

    ෑډ͕Լ͕ͬͨ
    

    View Slide

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

    View Slide

13. αʔόʔαΠυϨϯμϦϯάͷσϝϦοτ
    • Webαʔόʔ͕ඞਢ

    ʢྫ͑͹ϗεςΟϯάαʔόʔ͚ͩͰ͸ಈ͔ͤͳ͍ʣ
    • ࣮૷೉қ౓͕ߴ͍
    

    View Slide

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

    View Slide

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

    View Slide

16. Jamstack
    SSG + CSR
    

    View Slide

17. View Slide

18. Jamstack
    • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ഑৴ʢʴAPIʹΑΔॲཧʣ
    • SSG + CSRͷϋΠϒϦου
    • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌
    ͸CSRΛߦ͏
    • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ
    

    View Slide

19. Α͋͘ΔJamstackͷߏ੒
    

    View Slide

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

    View Slide

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

    View Slide

22. Ϗϧυͷ࠷దԽ
    Build Optimization
    

    View Slide

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

    View Slide

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छྨͰݕূ
    

    View Slide

25. View Slide

26. ܭଌ݁Ռ
    هࣄ਺
    ฏۉ஋ʢඵʣ
    தԝ஋ʢඵʣ
    https://microcms.io/blog/nuxt-measure-build-time/
    

    View Slide

27. NuxtͷpayloadʹΑΔ

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

    ౉͢
    • APIϦΫΤετ100ຊˠ1ຊ
    

    View Slide

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

    View Slide

29. • Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε
    • αʔόʔαΠυॲཧ΋ಈ࡞͢Δ
    • ඞཁ࠷௿ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ

    ࠷େԽΛਤΔͱ͍͏ํ਑͕͋Γͦ͏
    • Next.jsʹ͸αʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlify΍S3Ͱ͸
    े෼ʹ࢖͍͜ͳͤͳ͍
    

    View Slide

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

    View Slide

31. Gatsby ͷ Conditional Page Builds
    • ͪ͜Β΋ࠩ෼Ϗϧυ༻ͷઃఆ
    • Gatsby Cloud্Ͱͳͯ͘΋࢖͑ͦ͏ʢະ֬ೝʣ
    • https://www.gatsbyjs.org/docs/conditional-page-builds/
    

    View Slide

32. Լॻ͖ϓϨϏϡʔ
    Preview
    

    View Slide

33. Jamstackʹ͓͚ΔϓϨϏϡʔ͸ಛघ
    • ϔουϨεCMSʹ͸Ϗϡʔ͕ͳ͍ͨΊɺϓϨϏϡʔ؀ڥΛผͰ

    ༻ҙ͢Δඞཁ͕͋Δ
    • CMS্ͰهࣄΛԼॻ͖อଘͨ͠ॠؒʹϓϨϏϡʔ͍ͨ͠
    → ຖճϏϧυͯͨ͠Β͔͔࣌ؒΔ
    → ϓϨϏϡʔը໘෦෼ͷΈSSR·ͨ͸CSRͰߏங͢Δ
    

    View Slide

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

    View Slide

35. Next.js ͷ Preview Mode ػೳ
    • Next.jsʹ͸αʔόʔϨεؔ਺ΛىಈͰ͖ΔAPI Routesͱ͍͏ػೳ͕͋Δ
    • ͜ΕΛར༻͠ɺϓϨϏϡʔ༻ͷΤϯυϙΠϯτʹΞΫηεͨ͠ࡍʹ֘౰هࣄʹରͯ͠ϦμΠ
    ϨΫτΛ͔͚Δ
    • ͦͷࡍʹPreview༻ͷCookie͕෇༩͞ΕΔ
    • هࣄଆͰ͸Cookieͷ༗ແΛ൑ఆͯ͠ɺԼॻ͖༻ίϯςϯπΛදࣔ͢Δ
    • SPA؀ڥͳͲͷผ؀ڥΛ༻ҙͤͣͱ΋ηΩϡΞʹϓϨϏϡʔ͕Մೳ
    • ৄ͘͠͸ͪ͜ΒͰղઆ
    • https://microcms.io/blog/nextjs-preview-mode/
    

    View Slide

36. גࣜձࣾΫϥ΢υϫʔΫε༷ͷࣄྫ
    • ίʔϙϨʔτϖʔδͷϦχϡʔΞϧͰmicroCMSΛ࠾༻
    • NuxtͰߏஙɺJamstack
    • χϡʔεهࣄ͸3000݅௒͑
    • Ϗϧυ࣌ؒ͸ʓʓ෼
    • ৄ͘͠͸ɺTAMੁՈ͞ΜͷηογϣϯͰ
    

    View Slide

37. ·ͱΊ
    Summary
    

    View Slide

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

    View Slide

39. ࠷ޙʹϫʔΫγϣοϓͷએ఻
    • 14:00 - 16:00ʹϧʔϜCͰϫʔΫγϣοϓ΍Γ·͢
    • ʮmicroCMS + NuxtͰJamstackϒϩάΛ࡞ͬͯΈΑ͏ʯ
    • ϫʔΫγϣοϓதʹࢀՃऀશһ͕Jamstackϒϩά͕࡞ΕΔΑ͏αϙʔ
    τ͠·͢
    • RemoͰ։࠵
    

    View Slide

40. Thanks :)
    !TIJCF
    

    View Slide