I’m experiencing some issues. I have recalibrate set at 10s. I’m using contentful to host my blog content. On first load, my blog post shows stale data every time until a refresh. It’s as though the old cache isn’t being recalibrated at all
I didn't quite get this... Using a CMS wouldn't require me to rebuild anything, since it's already fetching the information from outside, with the plus that the page wouldn't need to be updated twice to see the difference, but only once.
Thanks for the lucid explanation. The one that confuses me the most was the revalidate property, I thought it works as somewhat like an interval that requests to the server everytime it passes, but it is still actually a user-triggered request.
I have a multi-tenant site that allows tenants to create posts and other content. I'm using SSR bc I don't want my app to rebuild every time someone publishes something new. If I understand correctly, I'll be able to move my tenants blog posts to use ISR to improve load times on static content?
Correct. Further, we're adding a new API soon to programmatically purge the ISR cache, allowing you to instantly show new static content as soon as a user publishes a new post.
Thanks Lee for the great video! Quick question: Is there a way to imperative invalidate a page (or the whole cache) from outside and not by using a revalidate configured time on Next.js + Vercel? My use case is that I have a Next.js site that connects to Wordpress REST API and uses ISR, the user barely changes the content (so I don't want Next.js triggering every now and then calls to WP REST API without a reason) but when the user changes the content and publish, he wants the content to be immediately available in the site... Is there a solution for that? I would be great if it is possible to "revalidate" on demand...
It requires integration with your CDN! The CDN caches the static assets, and then ISR tells your CDN to invalidate the cache when new content is successfully ready. Regeneration happens in the background, so you're always serving static, cached content to your users.
@@leerob Thanks ,is there an example of how this integration setup look like? does this mean we still need a node.js server running to generate the pages? not clear how all of this work !
Hey Lee, i'm building an app that fetch prices from an API, the prices are changing around the clock, and i need the user to see the changes without refreshing the page. Which could be better for this case, SSR, SSG or ISR ?
Yes, when you publish "breaking news", you can only change *that one article*. When I visit /news/my-breaking-news, it fetches the latest content from the CMS. Other articles like /news/old-news don't change.
2 things are not clear to me: 1) if I create a post on the cms does it get generated as well? also is the sitemap going to be updated? 2) are the initial pages all generated after a deploy or only after a request?
1. If you create a post on the CMS, it will be generated on-demand when you visit that new route. The first request will talk to the CMS, generate the static page, and then all subsequent viewers will see the static content. Sitemap is independent of this. 2. You get to control how many pages are initially built! They're only generated once at build time, when deploying.
Excellent video. One thing: Can i use try catch inside getstaticprops or getstaticpaths in order handle errors or if backend is down?. Another doubt is if I’m using docker and the build time is on my local machine before upload to docker hub and maybe I don’t have the backend up yet. If I don’t have try catch the build will fail or how nextjs can work in that case?
Yes, throwing an error will tell ISR _not_ to invalidate the cache. You would need the backend to be available at build-time before you try to generate pages, otherwise it wouldn't be able to fetch data.
If your content doesn't change often, you might as well not make requests to fetch your data. For example, if you're communicating with a CMS, you might be billed based on the amount of requests you make. So if you have a higher revalidation time, you might be able to stay on the CMSs free tier!
You could add authentication on the client-side, lazy loaded. E.g. e-commerce, you load the product page, and then on the client-side you load the user so they can add things to their cart. If you have heavy authentication requirements when you need to validate the user on the server, you probably want to use SSR instead.
@@leerob My use case is a little bit different. Let´s say we have a web app like Instagram. We want to use in the profile pages ISR, for better SEO, loading time, etc. But some of the content is only visible if you are subscribed to the user. So the pages will be generated with all info, but what if some users don't have permission to access some content on that page. Is ISR the wrong use case for this? That sounds like it. I appreciate your fast answer. Thank you!
Thanks Lee for keep making great content! I have a concern about how it can be manage using kubernetes where each pod of the application have your own filesystem. Did you have deal with something related to that?
It will be more cool if I could regenerate static pages based on event. Such that I could regenerate static pages only when I update the content of that page. My point is why I would regenerate a page every 1 or 2 or 60 second when there no content is changed.
Thank you for this Lee! Would it be possible to initiate a rebuild with a hard refresh? That way I could set the rebuild to be less frequent for less critical things, but then I could do a hard refresh if I needed to see something immediately. It seems like it would be a lot of unnecessary other wise
Waw great explanation 🌸 I'm just wondering about next authentication Most examples that I've seen about it was using the internal next api But what if i wanted to use an external api using some other technologiessomething isnt node js or even node js but an external one i mean sperating the frontend from backend so how i can apply this to my nextjs application?
You can now revalidate pages on-demand in Next.js 12.1! Really excited about this feature :)
nextjs.org/blog/next-12-1
I must admit, this is pretty sick, my hat's off to you!
My Nextjs hero🙏🙏 I learned more about web development on this Chanel in last month than 5 years spent at university
This comment section is really helpful. Thanks for replying to all the doubts Lee
No problem, happy to assist!
Cooooool
This is gold!
Great content Lee🔥❤️
Thank you so much!
As usual quality stuff cheers mate
Thanks! So simple and clean 🎉 Solved my issue haha
Hahahaha, the intro is so funny!! 👌👌
How does this work when a CDN is doing the caching and therefore the requests aren't going to the Nextjs origin unless the CDN's cache is flushed?
I’m experiencing some issues. I have recalibrate set at 10s. I’m using contentful to host my blog content. On first load, my blog post shows stale data every time until a refresh. It’s as though the old cache isn’t being recalibrated at all
The best of both worlds. Awesome.
I'm definitely picking ISR this month!! This skill looks hot 🔥
Simply Amazing. Thanks for the detailed explanation.
ISR and SSR make nextjs. (The King 👑 )
Such an incredible technology
Why is my page not deleted in next js that is with static generation increment if I delete it from the database?
Love you moah
I didn't quite get this... Using a CMS wouldn't require me to rebuild anything, since it's already fetching the information from outside, with the plus that the page wouldn't need to be updated twice to see the difference, but only once.
Is ISR only available when we host our site in vercel?
Thanks for the lucid explanation. The one that confuses me the most was the revalidate property, I thought it works as somewhat like an interval that requests to the server everytime it passes, but it is still actually a user-triggered request.
Lee is the man
wait so in your example, the revalidate is triggered either every 60 seconds or when someone visits the website?
If someone visits the site _and_ it's been 60 seconds since the last visitor (so the content is stale).
I have a multi-tenant site that allows tenants to create posts and other content. I'm using SSR bc I don't want my app to rebuild every time someone publishes something new. If I understand correctly, I'll be able to move my tenants blog posts to use ISR to improve load times on static content?
Correct. Further, we're adding a new API soon to programmatically purge the ISR cache, allowing you to instantly show new static content as soon as a user publishes a new post.
Amazing explanation! Thanks a lot for another piece of great content, Lee!
what if I dont want vercel?
OK that is so cool
this working for any server ?
Any ETA for on demand revalidation?
Thanks Lee for the great video! Quick question: Is there a way to imperative invalidate a page (or the whole cache) from outside and not by using a revalidate configured time on Next.js + Vercel? My use case is that I have a Next.js site that connects to Wordpress REST API and uses ISR, the user barely changes the content (so I don't want Next.js triggering every now and then calls to WP REST API without a reason) but when the user changes the content and publish, he wants the content to be immediately available in the site... Is there a solution for that? I would be great if it is possible to "revalidate" on demand...
Hey, Alan! Not yet, but, it's in-progress and coming soon! I'm really really excited about this.
Yesssssss been waiting for this
Lee, How does this work with CDN? if the pages are stored in CDN ,will ISR work? where does the regeneration happen in this case?
It requires integration with your CDN! The CDN caches the static assets, and then ISR tells your CDN to invalidate the cache when new content is successfully ready. Regeneration happens in the background, so you're always serving static, cached content to your users.
@@leerob Thanks ,is there an example of how this integration setup look like? does this mean we still need a node.js server running to generate the pages? not clear how all of this work !
Which VS Code theme is he using? 😍
But how are you going to fetch personalized custom data for an authenticated user and do not show a "loading" indicator?
If you need personalized data for a user, I'd recommend using server-rendering instead!
Hey Lee, i'm building an app that fetch prices from an API, the prices are changing around the clock, and i need the user to see the changes without refreshing the page.
Which could be better for this case, SSR, SSG or ISR ?
Hi Lee, at what point would you say there’s too many pages for ISR?
No limit :) static-tweet.vercel.app/
What CMS would you recommend for graphql?
I've used Contentful / Dato, both have good GraphQL APIs!
1:06 wouldn't nextjs optimize building process so only that one article would be "built" since no code has changed?
Yes, when you publish "breaking news", you can only change *that one article*. When I visit /news/my-breaking-news, it fetches the latest content from the CMS. Other articles like /news/old-news don't change.
2 things are not clear to me: 1) if I create a post on the cms does it get generated as well? also is the sitemap going to be updated? 2) are the initial pages all generated after a deploy or only after a request?
1. If you create a post on the CMS, it will be generated on-demand when you visit that new route. The first request will talk to the CMS, generate the static page, and then all subsequent viewers will see the static content. Sitemap is independent of this.
2. You get to control how many pages are initially built! They're only generated once at build time, when deploying.
When is the support for programmitically revalidating the cache coming?
Sooooon :)
Excellent video.
One thing: Can i use try catch inside getstaticprops or getstaticpaths in order handle errors or if backend is down?. Another doubt is if I’m using docker and the build time is on my local machine before upload to docker hub and maybe I don’t have the backend up yet. If I don’t have try catch the build will fail or how nextjs can work in that case?
Yes, throwing an error will tell ISR _not_ to invalidate the cache. You would need the backend to be available at build-time before you try to generate pages, otherwise it wouldn't be able to fetch data.
This is great 👍
But what is the use case for setting the revalidate timer higher the 1 sec ??
Does it affect the hosting cost or something ?
If your content doesn't change often, you might as well not make requests to fetch your data. For example, if you're communicating with a CMS, you might be billed based on the amount of requests you make. So if you have a higher revalidation time, you might be able to stay on the CMSs free tier!
@@leerob thanks for the quick response 😉
I would love to see a example for ISR and Authentication (Protected Pages). I don't know why, but still struggling with it.
You could add authentication on the client-side, lazy loaded. E.g. e-commerce, you load the product page, and then on the client-side you load the user so they can add things to their cart.
If you have heavy authentication requirements when you need to validate the user on the server, you probably want to use SSR instead.
@@leerob My use case is a little bit different. Let´s say we have a web app like Instagram. We want to use in the profile pages ISR, for better SEO, loading time, etc. But some of the content is only visible if you are subscribed to the user. So the pages will be generated with all info, but what if some users don't have permission to access some content on that page. Is ISR the wrong use case for this? That sounds like it.
I appreciate your fast answer. Thank you!
Thanks Lee for keep making great content! I have a concern about how it can be manage using kubernetes where each pod of the application have your own filesystem. Did you have deal with something related to that?
Pls explain, fetch lists and fetch list detail pages.. using ISG in static sites..
It will be more cool if I could regenerate static pages based on event.
Such that I could regenerate static pages only when I update the content of that page.
My point is why I would regenerate a page every 1 or 2 or 60 second when there no content is changed.
This is coming soon :)
Thank you for this Lee! Would it be possible to initiate a rebuild with a hard refresh? That way I could set the rebuild to be less frequent for less critical things, but then I could do a hard refresh if I needed to see something immediately. It seems like it would be a lot of unnecessary other wise
Waw great explanation 🌸
I'm just wondering about next authentication
Most examples that I've seen about it was using the internal next api
But what if i wanted to use an external api using some other technologiessomething isnt node js or even node js but an external one i mean sperating the frontend from backend so how i can apply this to my nextjs application?
Hi Lee :D