CSR / SSR / SSGの動向2020

CSR / SSR / SSGの動向2020

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

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

June 21, 2020
Tweet

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