CSR / SSR / SSGの動向2020

by Kazuki Shibata

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Jamstack SSG + CSR

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Α͋͘ΔJamstackͷߏ੒

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Ϗϧυͷ࠷దԽ Build Optimization

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Nuxt Generateͷݕূ • MacBookProʢ13-inch, 2017ʣʹͯݕূ • macOS Catalinaʢ10.15.3ʣ • 3.1GHz Core i5 • ϝϞϦ 16GB • هࣄͷຊจʹʮ๥ͪΌΜʯͷ๯಄໿5,000จࣈΛදࣔ • هࣄ਺ʢ10, 100, 1000, 10000, 100000ʣͷ5छྨͰݕূ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Լॻ͖ϓϨϏϡʔ Preview

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

·ͱΊ Summary

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Thanks :) !TIJCF