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

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

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. ISR Λ࢖͏ͱԿ͕͍͍͔ʁ • ϦΫΤετ͕͔͋ͬͯΒϖʔδੜ੒͞ΕΔͨΊɺSSGͱҧͬͯαΠτ ΛશͯϏϧυ͠ͳ͍ʹॳճͷϏϧυ͕࣌ؒ୹ॖ͞ΕΔ • SSRͨ͠ϖʔδ͕ฦͬͯ͘ΔͷͰද͕ࣔߴ଎ • ౎౓Ϗϧυ͢Δ͜ͱͳ͘ϖʔδΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ • SSG, SSRͷڧΈΛ͔͚߹Θͤͨ΋ͷ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
6. ׬શରԠ͸ Vercel ͷΈ ↓ ࠷ۙʹͳͬͯ Netlify ΋׬શରԠʂ 
 ʢ2021/12/14ʣ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
7. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ Jamstack αΠτͷ४උ ࢀߟ: https://blog.microcms.io/microcms-next-jamstack-blog/ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
8. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ·ͣ͸ී௨ʹϏϧυ • Կ΋ઃఆͤͣʹϏϧυ • ॴཁ࣌ؒɿ1m 23s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
9. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ISR Λ༗ޮʹ͢Δ • getStaticProps ʹ revalidate Λઃఆ͢Δ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏ • revalidate ͷ஋͸ɺΩϟογϡΛੜ੒͔ͯ͠Β࠶ੜ੒͢Δ·Ͱͷ࣌ؒ
10. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ 
 ISR Λ༗ޮʹͯ͠Ϗϧυ • ॴཁ࣌ؒɿ1m 23s → 57s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
11. ·ͱΊˍײ૝ • ISR ͸ SSG, SSR ͷར఺Λ͔͚߹ΘͤͨϏϧυํ๏ • getStaticPropsʹ1ߦ଍͚ͩ͢Ͱ ISR ʹରԠͰ͖ΔͷͰָʹ࣮૷Ͱ͖Δ • ॳճϏϧυͰશϖʔδੜ੒͠ͳ͍ͷͰϏϧυ͕࣌ؒ୹ॖͰ͖Δʢˠα Πτͷن໛͕େ͖͍΄ͲϝϦοτ͕େ͖͘ͳΔʣ • Vercel ͚ͩͰͳ͘ Netlify ΋׬શରԠͨ͜͠ͱͰɺJamstack ߏ੒ͷબ ୒ࢶ͕޿͕Γͦ͏ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏
12. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
13. גࣜձࣾGaji-LaboͰ͸ݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ౳ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ౓͓࿩ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo Wantedly: https://www.wantedly.com/companies/gaji