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

Netlify で Next.js の ISR (Incremental Static Reg...

semigura
January 27, 2022

Netlify で Next.js の ISR (Incremental Static Regeneration) を使う

2022.1.27 ジャムジャム!!Jamstack_4【初心者歓迎LT大会】

semigura

January 27, 2022
Tweet

More Decks by semigura

Other Decks in Programming

Transcript

  1. Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏ ੴ֞঵ଠ࿠

    @semigura 2022.1.27 δϟϜδϟϜʂʂJamstack_4ʲॳ৺ऀ׻ܴLTେձʳ
  2. ੴ֞ɹ঵ଠ࿠ 
 twitter: @semigura • גࣜձࣾGaji-Laboʹ2018೥͔Βॴଐ • React, TypeScript, Next.js

    Λۀ຿Ͱѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏ੒ͷ 
 ίʔϙϨʔταΠτͷ࣮૷पΓ΋୲౰ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕޷͖ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏
  3. Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏ 1.

    ISR (Incremental Static Regeneration) ͱ͸ʁ 2. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ ࠓճͷςʔϚ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏
  4. ISR (Incremental Static Regeneration) ͱ͸ʁ • Next.js ͷػೳͷҰͭͰɺSSG, SSR ͷར఺Λ͔͚߹ΘͤͨϏϧυํ๏

    • ϖʔδϦΫΤετͷ࣌ʹ੩తͳϖʔδΛੜ੒ͯ͠ʢSSGʣɺͦΕΛΩϟογϡͭͭ͠αʔ όʔଆͰߋ৽͢ΔʢSSRʣ • getStaticProps Λ࢖ͬͯϖʔδੜ੒Λ͢Δ΋ͷͷɺSSGͷΑ͏ʹॳճϏϧυͰશͯͷϖʔδ Λੜ੒͢ΔͷͰ͸ͳ͘ɺϦΫΤετ࣌ʹϖʔδΛੜ੒ˍαʔόʔଆʹΩϟογϡ͢Δ • 2ճ໨Ҏ߱Ͱ͸Ωϟογϡ͞ΕͨσʔλΛฦͭͭ࣍͠ͷΞΫηεʹ޲͚ͯΩϟογϡ͕SSR Ͱ࠶ੜ੒͢Δ • https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏
  5. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ·ͣ͸ී௨ʹϏϧυ • Կ΋ઃఆͤͣʹϏϧυ •

    ॴཁ࣌ؒɿ1m 23s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
  6. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ISR Λ༗ޮʹ͢Δ • getStaticProps

    ʹ revalidate Λઃఆ͢Δ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏ • revalidate ͷ஋͸ɺΩϟογϡΛੜ੒͔ͯ͠Β࠶ੜ੒͢Δ·Ͱͷ࣌ؒ
  7. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ISR Λ༗ޮʹͯ͠Ϗϧυ • ॴཁ࣌ؒɿ1m

    23s → 57s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
  8. ·ͱΊˍײ૝ • ISR ͸ SSG, SSR ͷར఺Λ͔͚߹ΘͤͨϏϧυํ๏ • getStaticPropsʹ1ߦ଍͚ͩ͢Ͱ ISR

    ʹରԠͰ͖ΔͷͰָʹ࣮૷Ͱ͖Δ • ॳճϏϧυͰશϖʔδੜ੒͠ͳ͍ͷͰϏϧυ͕࣌ؒ୹ॖͰ͖Δʢˠα Πτͷن໛͕େ͖͍΄ͲϝϦοτ͕େ͖͘ͳΔʣ • Vercel ͚ͩͰͳ͘ Netlify ΋׬શରԠͨ͜͠ͱͰɺJamstack ߏ੒ͷબ ୒ࢶ͕޿͕Γͦ͏ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏