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

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

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େձʳ

    View full-size slide

  2. ੴ֞ɹ঵ଠ࿠

    twitter: @semigura
    • גࣜձࣾGaji-Laboʹ2018೥͔Βॴଐ


    • React, TypeScript, Next.js Λۀ຿Ͱѻ͍ͬͯ·͢


    • Netlify CMS + GatsbyJS ߏ੒ͷ

    ίʔϙϨʔταΠτͷ࣮૷पΓ΋୲౰


    • Headless CMSΛ৮Δͷ͕झຯ


    • ೣͱԻָ͕޷͖
    Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ࢖͏

    View full-size slide

  3. Netlify Ͱ Next.js ͷ ISR (Incremental
    Static Regeneration) Λ࢖͏
    1. ISR (Incremental Static Regeneration) ͱ͸ʁ


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

    View full-size slide

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

    View full-size slide

  5. ISR Λ࢖͏ͱԿ͕͍͍͔ʁ
    • ϦΫΤετ͕͔͋ͬͯΒϖʔδੜ੒͞ΕΔͨΊɺSSGͱҧͬͯαΠτ
    ΛશͯϏϧυ͠ͳ͍ʹॳճͷϏϧυ͕࣌ؒ୹ॖ͞ΕΔ


    • SSRͨ͠ϖʔδ͕ฦͬͯ͘ΔͷͰද͕ࣔߴ଎


    • ౎౓Ϗϧυ͢Δ͜ͱͳ͘ϖʔδΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ


    • SSG, SSRͷڧΈΛ͔͚߹Θͤͨ΋ͷ
    Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

    View full-size slide

  6. ׬શରԠ͸ Vercel ͷΈ





    ࠷ۙʹͳͬͯ Netlify ΋׬શରԠʂ

    ʢ2021/12/14ʣ
    Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

    View full-size slide

  7. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ


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

    View full-size slide

  8. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ

    ·ͣ͸ී௨ʹϏϧυ
    • Կ΋ઃఆͤͣʹϏϧυ


    • ॴཁ࣌ؒɿ1m 23s
    Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

    View full-size slide

  9. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ

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

    View full-size slide

  10. ࣮ࡍʹ Netlify Ͱ ISR Λ࢖ͬͯΈΔ

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

    View full-size slide

  11. ·ͱΊˍײ૝
    • ISR ͸ SSG, SSR ͷར఺Λ͔͚߹ΘͤͨϏϧυํ๏


    • getStaticPropsʹ1ߦ଍͚ͩ͢Ͱ ISR ʹରԠͰ͖ΔͷͰָʹ࣮૷Ͱ͖Δ


    • ॳճϏϧυͰશϖʔδੜ੒͠ͳ͍ͷͰϏϧυ͕࣌ؒ୹ॖͰ͖Δʢˠα
    Πτͷن໛͕େ͖͍΄ͲϝϦοτ͕େ͖͘ͳΔʣ


    • Vercel ͚ͩͰͳ͘ Netlify ΋׬શରԠͨ͜͠ͱͰɺJamstack ߏ੒ͷબ
    ୒ࢶ͕޿͕Γͦ͏
    Netlify Ͱ ISR (Incremental Static Regeneration) Λ࢖͏

    View full-size slide

  12. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide

  13. גࣜձࣾGaji-LaboͰ͸ݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ


    React, TypeScript, Next.js ౳ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ
    δϡΞϧʹҰ౓͓࿩ͯ͠Έ·ͤΜ͔ʁ


    Website: https://www.gaji.jp/


    Twitter: @gaji_labo


    Wantedly: https://www.wantedly.com/companies/gaji

    View full-size slide