Successfully reported this slideshow.

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

1

Share

Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 13
1 of 13

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

1

Share

Download to read offline

2022.1.27のジャムジャム!!Jamstack_4【初心者歓迎LT大会】で発表した資料です。
https://jamjamjamstack.connpass.com/event/233633/

2022.1.27のジャムジャム!!Jamstack_4【初心者歓迎LT大会】で発表した資料です。
https://jamjamjamstack.connpass.com/event/233633/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

  1. 1. Netlify で Next.js の ISR (Incremental Static Regeneration) を使う 石垣祥太郎 @semigura 2022.1.27 ジャムジャム!!Jamstack_4【初心者歓迎LT大会】
  2. 2. 石垣 祥太郎 
 twitter: @semigura • 株式会社Gaji-Laboに2018年から所属 • React, TypeScript, Next.js を業務で扱っています • Netlify CMS + GatsbyJS 構成の 
 コーポレートサイトの実装周りも担当 • Headless CMSを触るのが趣味 • 猫と音楽が好き Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
  3. 3. Netlify で Next.js の ISR (Incremental Static Regeneration) を使う 1. ISR (Incremental Static Regeneration) とは? 2. 実際に Netlify で ISR を使ってみる 今回のテーマ Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
  4. 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. 5. ISR を使うと何がいいか? • リクエストがあってからページ生成されるため、SSGと違ってサイト を全てビルドしない=初回のビルド時間が短縮される • SSRしたページが返ってくるので表示が高速 • 都度ビルドすることなくページを更新することができる • SSG, SSRの強みをかけ合わせたもの Netlify で ISR (Incremental Static Regeneration) を使う
  6. 6. 完全対応は Vercel のみ ↓ 最近になって Netlify も完全対応! 
 (2021/12/14) Netlify で ISR (Incremental Static Regeneration) を使う
  7. 7. 実際に Netlify で ISR を使ってみる Jamstack サイトの準備 参考: https://blog.microcms.io/microcms-next-jamstack-blog/ Netlify で ISR (Incremental Static Regeneration) を使う
  8. 8. 実際に Netlify で ISR を使ってみる 
 まずは普通にビルド • 何も設定せずにビルド • 所要時間:1m 23s Netlify で ISR (Incremental Static Regeneration) を使う
  9. 9. 実際に Netlify で ISR を使ってみる 
 ISR を有効にする • getStaticProps に revalidate を設定する Netlify で ISR (Incremental Static Regeneration) を使う • revalidate の値は、キャッシュを生成してから再生成するまでの時間
  10. 10. 実際に Netlify で ISR を使ってみる 
 ISR を有効にしてビルド • 所要時間:1m 23s → 57s Netlify で ISR (Incremental Static Regeneration) を使う
  11. 11. まとめ&感想 • ISR は SSG, SSR の利点をかけ合わせたビルド方法 • getStaticPropsに1行足すだけで ISR に対応できるので楽に実装できる • 初回ビルドで全ページ生成しないのでビルド時間が短縮できる(→サ イトの規模が大きいほどメリットが大きくなる) • Vercel だけでなく Netlify も完全対応したことで、Jamstack 構成の選 択肢が広がりそう Netlify で ISR (Incremental Static Regeneration) を使う
  12. 12. ご清聴ありがとうございました!
  13. 13. 株式会社Gaji-Laboでは現在フロントエンドエンジニアを募集しています!! React, TypeScript, Next.js 等、モダンなフロントエンド技術で事業会社に貢献してみたい方、カ ジュアルに一度お話してみませんか? Website: https://www.gaji.jp/ Twitter: @gaji_labo Wantedly: https://www.wantedly.com/companies/gaji

×