Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Netlify で Next.js の ISR (Incremental Static Reg...
Search
semigura
January 27, 2022
Programming
0
370
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
2022.1.27 ジャムジャム!!Jamstack_4【初心者歓迎LT大会】
semigura
January 27, 2022
Tweet
Share
More Decks by semigura
See All by semigura
MUI v6, v7 が2024年にリリースされるので新機能を調べてみた
semigura
4
5k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
260
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
2.1k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
66
MUIのオススメコンポーネント5選
semigura
0
230
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
160
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
390
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
170
DatoCMS + Next.js でプレビュー機能付きブログを作る
semigura
0
73
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
Catch Up: Go Style Guide Update
andpad
0
230
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
CSC305 Lecture 05
javiergs
PRO
0
210
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
420
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
CSC305 Lecture 06
javiergs
PRO
0
230
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
A designer walks into a library…
pauljervisheath
209
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Site-Speed That Sticks
csswizardry
12
900
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Scaling GitHub
holman
463
140k
Transcript
Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ͏ ੴ֞ଠ
@semigura 2022.1.27 δϟϜδϟϜʂʂJamstack_4ʲॳ৺ऀܴLTେձʳ
ੴ֞ɹଠ twitter: @semigura • גࣜձࣾGaji-Laboʹ2018͔Βॴଐ • React, TypeScript, Next.js
ΛۀͰѻ͍ͬͯ·͢ • Netlify CMS + GatsbyJS ߏͷ ίʔϙϨʔταΠτͷ࣮पΓ୲ • Headless CMSΛ৮Δͷ͕झຯ • ೣͱԻָ͕͖ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ͏
Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ͏ 1.
ISR (Incremental Static Regeneration) ͱʁ 2. ࣮ࡍʹ Netlify Ͱ ISR ΛͬͯΈΔ ࠓճͷςʔϚ Netlify Ͱ Next.js ͷ ISR (Incremental Static Regeneration) Λ͏
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) Λ͏
ISR Λ͏ͱԿ͕͍͍͔ʁ • ϦΫΤετ͕͔͋ͬͯΒϖʔδੜ͞ΕΔͨΊɺSSGͱҧͬͯαΠτ ΛશͯϏϧυ͠ͳ͍ʹॳճͷϏϧυ͕࣌ؒॖ͞ΕΔ • SSRͨ͠ϖʔδ͕ฦͬͯ͘ΔͷͰද͕ࣔߴ • Ϗϧυ͢Δ͜ͱͳ͘ϖʔδΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ •
SSG, SSRͷڧΈΛ͔͚߹Θͤͨͷ Netlify Ͱ ISR (Incremental Static Regeneration) Λ͏
શରԠ Vercel ͷΈ ↓ ࠷ۙʹͳͬͯ Netlify શରԠʂ ʢ2021/12/14ʣ Netlify
Ͱ ISR (Incremental Static Regeneration) Λ͏
࣮ࡍʹ Netlify Ͱ ISR ΛͬͯΈΔ Jamstack αΠτͷ४උ ࢀߟ: https://blog.microcms.io/microcms-next-jamstack-blog/ Netlify
Ͱ ISR (Incremental Static Regeneration) Λ͏
࣮ࡍʹ Netlify Ͱ ISR ΛͬͯΈΔ ·ͣී௨ʹϏϧυ • ԿઃఆͤͣʹϏϧυ •
ॴཁ࣌ؒɿ1m 23s Netlify Ͱ ISR (Incremental Static Regeneration) Λ͏
࣮ࡍʹ Netlify Ͱ ISR ΛͬͯΈΔ ISR Λ༗ޮʹ͢Δ • getStaticProps
ʹ revalidate Λઃఆ͢Δ Netlify Ͱ ISR (Incremental Static Regeneration) Λ͏ • revalidate ͷɺΩϟογϡΛੜ͔ͯ͠Β࠶ੜ͢Δ·Ͱͷ࣌ؒ
࣮ࡍʹ Netlify Ͱ ISR ΛͬͯΈΔ ISR Λ༗ޮʹͯ͠Ϗϧυ • ॴཁ࣌ؒɿ1m
23s → 57s Netlify Ͱ ISR (Incremental Static Regeneration) Λ͏
·ͱΊˍײ • ISR SSG, SSR ͷརΛ͔͚߹ΘͤͨϏϧυํ๏ • getStaticPropsʹ1ߦ͚ͩ͢Ͱ ISR
ʹରԠͰ͖ΔͷͰָʹ࣮Ͱ͖Δ • ॳճϏϧυͰશϖʔδੜ͠ͳ͍ͷͰϏϧυ͕࣌ؒॖͰ͖Δʢˠα Πτͷن͕େ͖͍΄ͲϝϦοτ͕େ͖͘ͳΔʣ • Vercel ͚ͩͰͳ͘ Netlify શରԠͨ͜͠ͱͰɺJamstack ߏͷબ ࢶ͕͕Γͦ͏ Netlify Ͱ ISR (Incremental Static Regeneration) Λ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
גࣜձࣾGaji-LaboͰݱࡏϑϩϯτΤϯυΤϯδχΞΛืू͍ͯ͠·͢ʂʂ React, TypeScript, Next.js ɺϞμϯͳϑϩϯτΤϯυٕज़Ͱࣄۀձࣾʹߩݙͯ͠Έ͍ͨํɺΧ δϡΞϧʹҰ͓ͯ͠Έ·ͤΜ͔ʁ Website: https://www.gaji.jp/ Twitter: @gaji_labo
Wantedly: https://www.wantedly.com/companies/gaji