Automatically Update Static Content in Next.js with ISR

Revalidate content automatically with Incremental Static Regeneration (ISR).

🧐 What's Inside

00:00 - Intro
05:22 - Running a production build locally with next build and next start
07:03 - Configuring the revalidate property in getStaticProps to use Incremental Static Regeneration
11:10 - Setting new page routes to fallback to blocking to generate on the fly with ISR
18:45 - Outro

💾 Code

🗒️ Read More

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Caching in Apollo Client

How to disable cache in apollo-link or apollo-client? on StackOverflow

🎼 Music
Music from Uppbeat (free for Creators!):
License code: VYDZW215SVLYC7PC

#colbyfayock #nextjs #headlesscms #wordpress #webdevelopment

[saschametz]

Thanks Colby, like your detailed and calm approach of explaining concepts.

[drewstifler]

Exactly what I am searching for. Neat and simple yet explained fully. Thank you!

[spencerbigum]

Would definitely love more insight into the double caching issue going on and how your dealing with it in production vs. using some other state management tool.

[rolibernanda]

Hi, great content. Have you tried hosting ISR on AWS amplify? Is amplify support it?

[AndriusLauFullstack]

Great content! What is interesting for me is the pagination. Maybe you have an example of this case:

Let's say that I have different landing pages for listings in different cities. Each page /listings/city is using ISR and I want to add pagination which works using query params (page=2) and the data is pulled on the client side when the page number is pressed.

A mix of ISR and client-side fetching if query params are presented.

[debjit]

When and where does the ISR run? Does it rebuild the entire site with new content? Would it work if I used another jamstack provider (Cloudflare)?

[dailymeow]

Next js and wp seems like i'm eating hot pizza 🍕 and icecream mixed together

[merotuts]

How can one still use the caching feature of Apollo client and ISR feature at the same time. Or can we only use one at a time ?

[mohamedalaa]

The revalidate didn't work with the Docker deployment mentioned in nextjs docs!
Any ideas what should be the problem ?

[chanmyaemaung]

Is there any way to update the contents without refreshing the whole page to get a new data just like this?

Can we use the Statics Site Generation with using setInterval?

Usually, I implement with swr library to achieve refresh contents in every 6s.

[xstanley]

is there any way to create next js app offline similar to NPM CRAO (Create React App Offline ) Library ?

[BarisPalabiyik]

On-demand ISR Wordpress plugin would be pretty useful I guess. You type in your secret and domain, whenever you update or publish a post it adds the slug(path) to the url and makes a request to it automatically.

[shubhamrathod]

Greate Tutorial ever. i have one question how can I cache invalidation on apollo client when my Wordpress data change ? please help me

[koko]

Great content as usual. I have one question about ISR, the example your showing works when you edit a post, but what about adding a post. Can i just revalidate the new post added or should i rebuilt the entire website when adding a new post ?
Thank you keep it awesome.

[divyanshurawat]

how to do this in app router, getstaicprops not working in app router.

[imLOSTirl]

Hi Colby, huge fan of your vidoeos - another great one.

I love the idea of this but when building sites like this for clients, you really need to make it as user friendly as possible, so at the very least, we'd need to take what you did just there and go further with it.

When in WP backend, trigger that revalidation url when you click the save / update button in WP. Would that be possible?

And a real sticking point for me with headless CMSs is the inability to preview a post / page. It's literally a show stopper if you can't check what you're posting looks nice before posting it. Any ideas there?

[RiccardoCosenza]

and when post is deleted?? you always see a modified post, but when it is deleted does the revalidate work? delete the static file?

[HSBTechYT]

With this approach do you still keep the revalidate property or just remove it

[supafast]

Thanks man, you saved my a$$, I was facing an unpredictable behavior, content sometimes gets updated sometimes not, I was able to solve this by disabling the Apollo cache following your article/video .. sounds like there is a conflict in caching when using ISR and Apollo

[filipevalentegomes]

The problem with using wordpress as a headless cms and a next app, is that if you want to host them with the same hosting company using the same domain name. You are gonna struggle to find a hosting company that lets you do that. I personally still haven’t found a hosting company where I can host a next js site and a wordpress site, unless you use static generated pages for next, but you can’t always do that