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
330
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
4.6k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
250
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
semigura
2
2k
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
61
MUIのオススメコンポーネント5選
semigura
0
200
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
150
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
360
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
160
DatoCMS + Next.js でプレビュー機能付きブログを作る
semigura
0
71
Other Decks in Programming
See All in Programming
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
260
Using AI Tools Around Software Development
inouehi
0
1.2k
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
Java on Azure で LangGraph!
kohei3110
0
120
エラーって何種類あるの?
kajitack
5
140
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
160
Gleamという選択肢
comamoca
6
720
XSLTで作るBrainfuck処理系
makki_d
0
200
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
780
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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