$30 off During Our Annual Pro Sale. View Details »

CSR / SSR / SSGの動向2020

CSR / SSR / SSGの動向2020

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

Kazuki Shibata

June 21, 2020
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

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