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

by semigura

Slide 1

Slide 1 text

Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏ ੴ֞঵ଠ࿠ @semigura 2022.1.27 δϟϜδϟϜʂʂJamstack_4ʲॳ৺ऀ׻ܴLTେձʳ

Slide 2

Slide 2 text

ੴ֞ɹ঵ଠ࿠   twitter: @semigura • גࣜձࣾGaji-Laboʹ2018೥͔Βॴଐ • React, TypeScript, Next.js Λۀ຿Ͱѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏ੒ͷ   ίʔϙϨʔταΠτͷ࣮૷पΓ΋୲౰ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕޷͖ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 3

Slide 3 text

Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏ 1. ISR (Incremental Static Regeneration) ͱ͸ʁ 2. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ ࠓճͷςʔϚ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 4

Slide 4 text

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) Λ࢖͏

Slide 5

Slide 5 text

ISR Λ࢖͏ͱԿ͕͍͍͔ʁ • ϦΫΤετ͕͔͋ͬͯΒϖʔδੜ੒͞ΕΔͨΊɺSSGͱҧͬͯαΠτ ΛશͯϏϧυ͠ͳ͍ʹॳճͷϏϧυ͕࣌ؒ୹ॖ͞ΕΔ • SSRͨ͠ϖʔδ͕ฦͬͯ͘ΔͷͰද͕ࣔߴ଎ • ౎౓Ϗϧυ͢Δ͜ͱͳ͘ϖʔδΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ • SSG, SSRͷڧΈΛ͔͚߹Θͤͨ΋ͷ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 6

Slide 6 text

׬શରԠ͸ Vercel ͷΈ ↓ ࠷ۙʹͳͬͯ Netlify ΋׬શରԠʂ   ʢ2021/12/14ʣ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 7

Slide 7 text

࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ Jamstack αΠτͷ४උ ࢀߟ: https://blog.microcms.io/microcms-next-jamstack-blog/ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 8

Slide 8 text

࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ   ·ͣ͸ී௨ʹϏϧυ • Կ΋ઃఆͤͣʹϏϧυ • ॴཁ࣌ؒɿ1m 23s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 9

Slide 9 text

࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ   ISR Λ༗ޮʹ͢Δ • getStaticProps ʹ revalidate Λઃఆ͢Δ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏ • revalidate ͷ஋͸ɺΩϟογϡΛੜ੒͔ͯ͠Β࠶ੜ੒͢Δ·Ͱͷ࣌ؒ

Slide 10

Slide 10 text

࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ   ISR Λ༗ޮʹͯ͠Ϗϧυ • ॴཁ࣌ؒɿ1m 23s → 57s Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 11

Slide 11 text

·ͱΊˍײ૝ • ISR ͸ SSG, SSR ͷར఺Λ͔͚߹ΘͤͨϏϧυํ๏ • getStaticPropsʹ1ߦ଍͚ͩ͢Ͱ ISR ʹରԠͰ͖ΔͷͰָʹ࣮૷Ͱ͖Δ • ॳճϏϧυͰશϖʔδੜ੒͠ͳ͍ͷͰϏϧυ͕࣌ؒ୹ॖͰ͖Δʢˠα Πτͷن໛͕େ͖͍΄ͲϝϦοτ͕େ͖͘ͳΔʣ • Vercel ͚ͩͰͳ͘ Netlify ΋׬શରԠͨ͜͠ͱͰɺJamstack ߏ੒ͷબ ୒ࢶ͕޿͕Γͦ͏ Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

Slide 12

Slide 12 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 13

Slide 13 text

גࣜձࣾGaji-LaboͰ͸ݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ౳ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ౓͓࿩ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo Wantedly: https://www.wantedly.com/companies/gaji