CSR / SSR / SSGの動向2020

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

Transcript

1. CSR / SSR / SSG ͷಈ޲2020 ࣲా ࿨ف - Wanta, Inc νϟϦςΟʔΧϯϑΝϨϯεԭೄ 2020 Vol.1 Frontendฤ
2. ࣲా ࿨ف / Kazuki Shibata ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ
 ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL
   
   /FYU
   
   /VYU
   ͕޷͖ɻ !TIJCF
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
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छྨͰݕূ
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