Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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ฤ
  2. αʔόʔϨεSPAߏ੒ʢAWS൛ʣ ϒϥ΢β CloudFront ʢCDNʣ S3 ʢStorageʣ Lambda ʢCloud Functionʣ HTML

    / JS / CSS / ը૾ औಘɺૹ৴ɺݕࡧ౳ Ωϟογϡ DynamoDB ʢDatabaseʣ CognitoʢIdentityʣ ೝ ূ σʔλ API Gateway JSON
  3. Nuxt Generateͷݕূ • MacBookProʢ13-inch, 2017ʣʹͯݕূ • macOS Catalinaʢ10.15.3ʣ • 3.1GHz

    Core i5 • ϝϞϦ 16GB • هࣄͷຊจʹʮ๥ͪΌΜʯͷ๯಄໿5,000จࣈΛදࣔ • هࣄ਺ʢ10, 100, 1000, 10000, 100000ʣͷ5छྨͰݕূ
  4. ܭଌ݁Ռ هࣄ਺        

    ฏۉ஋ʢඵʣ      தԝ஋ʢඵʣ      https://microcms.io/blog/nuxt-measure-build-time/
  5. Next.js ͷ Incremental Static Regeneration • SSR / SSG /

    CSR ͷϋΠϒϦου • ॳճΞΫηε࣌͸SSR • ୭͔͕Ұ౓Ͱ΋ΞΫηε͢Ε͹ɺͦͷλΠϛϯάͰSSG͕͞ΕΔ • ϖʔδભҠ࣌͸CSR • TwitterͷσϞ https://static-tweet.now.sh/
  6. Next.js ͷ Preview Mode ػೳ • Next.jsʹ͸αʔόʔϨεؔ਺ΛىಈͰ͖ΔAPI Routesͱ͍͏ػೳ͕͋Δ • ͜ΕΛར༻͠ɺϓϨϏϡʔ༻ͷΤϯυϙΠϯτʹΞΫηεͨ͠ࡍʹ֘౰هࣄʹରͯ͠ϦμΠ

    ϨΫτΛ͔͚Δ • ͦͷࡍʹPreview༻ͷCookie͕෇༩͞ΕΔ • هࣄଆͰ͸Cookieͷ༗ແΛ൑ఆͯ͠ɺԼॻ͖༻ίϯςϯπΛදࣔ͢Δ • SPA؀ڥͳͲͷผ؀ڥΛ༻ҙͤͣͱ΋ηΩϡΞʹϓϨϏϡʔ͕Մೳ • ৄ͘͠͸ͪ͜ΒͰղઆ • https://microcms.io/blog/nextjs-preview-mode/
  7. ࠷ޙʹϫʔΫγϣοϓͷએ఻ • 14:00 - 16:00ʹϧʔϜCͰϫʔΫγϣοϓ΍Γ·͢ • ʮmicroCMS + NuxtͰJamstackϒϩάΛ࡞ͬͯΈΑ͏ʯ •

    ϫʔΫγϣοϓதʹࢀՃऀશһ͕Jamstackϒϩά͕࡞ΕΔΑ͏αϙʔ τ͠·͢ • RemoͰ։࠵