チャリティーカンファレンス沖縄2020 Vol.1の発表資料です。
CSR / SSR / SSG ͷಈ2020ࣲా ف - Wanta, IncνϟϦςΟʔΧϯϑΝϨϯεԭೄ 2020 Vol.1 Frontendฤ
View Slide
ࣲా ف / Kazuki ShibataΥϯλגࣜձࣾͷڞಉۀऀ$00ɻNJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ+BNTUBDL/FYU/VYU͕͖ɻ!TIJCF
microCMSͷհ• ຊͷϔουϨεCMS• ඇΤϯδχΞͰ͍͍͢ཧը໘• ίϯςϯπAPIܦ༝Ͱऔಘ• ॊೈͳݖݶཧ• Jamstackͱͷ૬ੑ˕
CSRΫϥΠΞϯταΠυϨϯμϦϯά
ΫϥΠΞϯταΠυϨϯμϦϯά• ΫϥΠΞϯταΠυͰϖʔδΛߏங͢Δ• SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣ͕ίϨʹ͋ͨΔ• αʔόʔϨεSPA͕ΠέͯΔ• ExpressͳͲαʔόʔαΠυϑϨʔϜϫʔΫ༻͠ͳ͍• ϒϥβͱσʔλͷΓऔΓΛߦ͏APIͯ͢Cloud FunctionΛ༻͍Δ• microCMSαʔόʔϨεSPAߏ
αʔόʔϨεSPAߏʢAWS൛ʣϒϥβCloudFrontʢCDNʣS3ʢStorageʣLambdaʢCloud FunctionʣHTML / JS / CSS / ը૾औಘɺૹ৴ɺݕࡧΩϟογϡDynamoDBʢDatabaseʣCognitoʢIdentityʣೝূσʔλAPI GatewayJSON
αʔόʔϨεSPAͷϝϦοτ• ϖʔδભҠ࣌JSONͷΓऔΓͷΈͰࡁΉͷͰ͍• Webαʔόʔͷཧ͕ෆཁ• େྔΞΫηε͞ΕͯΦʔτεέʔϧ͢ΔͷͰ৺ͳ͠→ϩάΠϯ͕ඞཁͳWebΞϓϦέʔγϣϯ͖
αʔόʔϨεSPAͷσϝϦοτ• ϝσΟΞͳͲݕࡧIndex͕ඞਢͳഔମʹ͔ͳ͍• ҰԠGoogleIndexͯ͘͠ΕΔ͕ɺTwitterSlackͰͷOGPల։ ͞Εͳ͍
SSR + CSRαʔόʔαΠυϨϯμϦϯά
αʔόʔαΠυϨϯμϦϯά + CSR• ॳظϩʔυ࣌ͷΈαʔόʔαΠυͰHTMLΛߏங͠ɺϖʔδભҠҎ߱CSRʢΫϥΠΞϯτϨϯμϦϯάʣΛߦ͏ΈΛࢦ͢• SPAͷSEOܽɺॳظϩʔυΛิͬͨߏ• ͱͱ࣮͕͔ͳΓେม͕ͩͬͨɺNext / Nuxt ͷొͰ͍ͩͿ ෑډ͕Լ͕ͬͨ
αʔόʔαΠυϨϯμϦϯάͷϝϦοτ• SEOͳ͠• ॳظϩʔυΊ
αʔόʔαΠυϨϯμϦϯάͷσϝϦοτ• Webαʔόʔ͕ඞਢ ʢྫ͑ϗεςΟϯάαʔόʔ͚ͩͰಈ͔ͤͳ͍ʣ• ࣮қ͕ߴ͍
SSGελςΟοΫαΠτδΣωϨʔτ
ελςΟοΫαΠτδΣωϨʔτ• ੩తϖʔδΛࣄલʹੜ͠ɺ৴͢Δ• ୯ͳΔ੩తϖʔδͳͷͰ͍͠ηΩϡΞ• Movable TypeɺHugoɺJekyllɺHexoɺNextɺNuxtɺetc…
JamstackSSG + CSR
Jamstack• ࣄલϏϧυͨ͠੩తϑΝΠϧΛ৴ʢʴAPIʹΑΔॲཧʣ• SSG + CSRͷϋΠϒϦου• ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ࣌CSRΛߦ͏• ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
JamstackͷϝϦοτ• ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ• NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ• APIίʔϧϏϧυ࣌ͷΈ• APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺• ສ͕ҰɺAPI͕མͪͯ҆৺• ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
JamstackͷσϝϦοτ• ϖʔδ͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏• ϓϨϏϡʔͷ࣮͕ͪΐͬͱ໘• εςʔδϯάڥΛͲ͏ͬͯߏங͢Δ͔ɺݟ͕·ͩগͳ͍
Ϗϧυͷ࠷దԽBuild Optimization
JamstackϏϧυ͕9ׂ• JamstackͰ࠷େࣄͳͷϏϧυʂͱݴͬͯաݴͰͳ͍• جຊతʹͯ͢ͷॲཧΛϏϧυ࣌ʹࡁ·͢• ϖʔδੜʹ͔͔Δ࣌ؒΛͰ͖ΔݶΓݮΒ͢ͷ͕ॏཁ• ϖʔδੜ࣌ͷAPIϦΫΤετΛ࠷খݶʹ͑Δ• ແବͳॲཧΛݮΒ͢
Nuxt Generateͷݕূ• MacBookProʢ13-inch, 2017ʣʹͯݕূ• macOS Catalinaʢ10.15.3ʣ• 3.1GHz Core i5• ϝϞϦ 16GB• هࣄͷຊจʹʮͪΌΜʯͷ಄5,000จࣈΛදࣔ• هࣄʢ10, 100, 1000, 10000, 100000ʣͷ5छྨͰݕূ
ܭଌ݁Ռهࣄ ฏۉʢඵʣ தԝʢඵʣ https://microcms.io/blog/nuxt-measure-build-time/
NuxtͷpayloadʹΑΔ ಈతϧʔςΟϯάੜͷߴԽ• Ϗϧυ࣌ͷAPIϦΫΤετΛݮ͢ΔͨΊʹɺpayloadΛ༗ޮతʹ͏• ϧʔςΟϯά࡞࣌ʹίʔϧ͢ΔҰཡAPIͷதΛ֤ϖʔδʹpayloadͱͯ͠ ͢• APIϦΫΤετ100ຊˠ1ຊ
Next.js ͷ Incremental Static Regeneration• SSR / SSG / CSR ͷϋΠϒϦου• ॳճΞΫηε࣌SSR• ୭͔͕ҰͰΞΫηε͢ΕɺͦͷλΠϛϯάͰSSG͕͞ΕΔ• ϖʔδભҠ࣌CSR• TwitterͷσϞhttps://static-tweet.now.sh/
• Next.jsΛ։ൃ͍ͯ͠ΔVercel͕ࣾఏڙ͍ͯ͠ΔϗεςΟϯάαʔϏε• αʔόʔαΠυॲཧಈ࡞͢Δ• ඞཁ࠷ݶͳՕॴΛSSR͠ɺͰ͖ΔݶΓSSGͯ͠ύϑΥʔϚϯεͷ ࠷େԽΛਤΔͱ͍͏ํ͕͋Γͦ͏• Next.jsʹαʔόʔαΠυ༻ͷػೳ͕݁ߏ͋ΔͷͰɺNetlifyS3Ͱेʹ͍͜ͳͤͳ͍
Gatsby ͷ Incremental Builds• Gatsby CloudʢGatsbyࣾͷϗεςΟϯάαʔϏεʣ্ͰࠩϏϧυΛߦ͏͜ͱ͕Ͱ͖Δ• ॳճϏϧυ͚͔͔ͩ࣌ؒΔ͕ɺ2ճҎ߱ߴʢඵʣ
Gatsby ͷ Conditional Page Builds• ͪ͜ΒࠩϏϧυ༻ͷઃఆ• Gatsby Cloud্Ͱͳͯ͑ͦ͘͏ʢະ֬ೝʣ• https://www.gatsbyjs.org/docs/conditional-page-builds/
Լॻ͖ϓϨϏϡʔPreview
Jamstackʹ͓͚ΔϓϨϏϡʔಛघ• ϔουϨεCMSʹϏϡʔ͕ͳ͍ͨΊɺϓϨϏϡʔڥΛผͰ ༻ҙ͢Δඞཁ͕͋Δ• CMS্ͰهࣄΛԼॻ͖อଘͨ͠ॠؒʹϓϨϏϡʔ͍ͨ͠→ ຖճϏϧυͯͨ͠Β͔͔࣌ؒΔ→ ϓϨϏϡʔը໘෦ͷΈSSR·ͨCSRͰߏங͢Δ
εςʔδϯάڥߏஙͷྫ• ຊ൪ڥJamstackɺεςʔδϯάڥSPAͱͯ͠༻ҙ͢Δ• NuxtͰ͍͏ͱɺڥมͰ mode Λ universal / spa ͰΓସ͑Δ
Next.js ͷ Preview Mode ػೳ• Next.jsʹαʔόʔϨεؔΛىಈͰ͖ΔAPI Routesͱ͍͏ػೳ͕͋Δ• ͜ΕΛར༻͠ɺϓϨϏϡʔ༻ͷΤϯυϙΠϯτʹΞΫηεͨ͠ࡍʹ֘هࣄʹରͯ͠ϦμΠϨΫτΛ͔͚Δ• ͦͷࡍʹPreview༻ͷCookie͕༩͞ΕΔ• هࣄଆͰCookieͷ༗ແΛఆͯ͠ɺԼॻ͖༻ίϯςϯπΛදࣔ͢Δ• SPAڥͳͲͷผڥΛ༻ҙͤͣͱηΩϡΞʹϓϨϏϡʔ͕Մೳ• ৄͪ͘͜͠ΒͰղઆ• https://microcms.io/blog/nextjs-preview-mode/
גࣜձࣾΫϥυϫʔΫε༷ͷࣄྫ• ίʔϙϨʔτϖʔδͷϦχϡʔΞϧͰmicroCMSΛ࠾༻• NuxtͰߏஙɺJamstack• χϡʔεهࣄ3000݅͑• Ϗϧυ࣌ؒʓʓ• ৄ͘͠ɺTAMੁՈ͞ΜͷηογϣϯͰ
·ͱΊSummary
্खʹ͍͚Λ͢Δ• ϩάΠϯ͕͋ΔΑ͏ͳWebΞϓϦέʔγϣϯ͚ʹSPA• ϝσΟΞͳͲ੩తίϯςϯπଟΊͷWEBαΠτʹJamstack• Ͳ͏ͯ͠αʔόʔαΠυͰॲཧΛڬΈ͔ͨͬͨΒSSR
࠷ޙʹϫʔΫγϣοϓͷએ• 14:00 - 16:00ʹϧʔϜCͰϫʔΫγϣοϓΓ·͢• ʮmicroCMS + NuxtͰJamstackϒϩάΛ࡞ͬͯΈΑ͏ʯ• ϫʔΫγϣοϓதʹࢀՃऀશһ͕Jamstackϒϩά͕࡞ΕΔΑ͏αϙʔτ͠·͢• RemoͰ։࠵
Thanks :)!TIJCF