Learn NextJS's Superpower ISR in 15 Minutes 

NextJS SSR, SSG, ISG is probably one of the most timetaking thing to understand. Loved the video!

This guy is such a beast he even has the Nike logo tatted above his right cheekbone. Thank you for these videos, they're truly appreciated👏

What about the fact that Next.js official documentation says that revalidation doesn’t work with generateStaticParams? “During revalidation (ISR), generateStaticParams will not be called again” And you can check that it really doesn’t revalidate if you set dynamicParams = false

Great explanation, Josh. There are definitely a lot of great uses for these examples.

thanks. it helped a lot. In addition, revalidation doesn't work for generateStaticParams, whether it's exported separetly or called for the fetch inside generateStaticParams. if you set dynamicParams to false which will only show pages with generated params you'll get a 404 for new pages after build.

why should i use ISR if i have to revalidate pages every minute of seconds, shouldn't I just stick to SSR? and also we can use revalidate() function in SSR and i think we are good to go.

Cool, would be nice to see, on demand ISR.

Is ISR would be great for example a dynamic user created posts blog, like a Twitter clone? Can I revalidate the cache dynamically When somebody uploads a new post?

12:49 13:55 pretty sure you would always have to redeploy to see changes in the array you are mentioning because next js says "During revalidation (ISR), generateStaticParams will not be called again" by setting export const revalidate = 60; you are saying every cached fetch request at that page level and below should be revalidated. But generate static params will not rerun and build any new pages in the array you mention. A user would have to go to that route then next js will attempt to build that page.

Love your channel ! Glad i found this, hope ur channel grow :)

Love your channel bro. Thanks for this! Learned something new!

we can do it in next 12. In N13, Vercel was change syntax a bit. But it's so amazing

is there no way to revalidate dynamically rather than timer based? So create a new static page for new user only when the new user is added rather than regenerate static pages for all users?

When we use generatestaticparams, does loading tsx still render? Cuz when I use it in my app loading.tsx does not seem to load right after I click it.

What if we have [userId]/anotherSection , [userId]/anotherSection2 , in this case we have 2 children pages under userId, if those pages fetches a data from another api in their page.tsx file(by usind userId), will all children pages also generate html on server in build time?

Let's say we have 1 billion users, I don't want to generate static page for all the users but only when the user is visiting the page for the first time. Can we add to the userids only when the user visits the page?

I have some progress bars that show amount of money donated. I need to update ONLY AFTER SOMEONE DONATED. I think this is possible right?

So when I go for server side rendering? any example

How is he getting the intellisense for the new revalidate export? I don't seem to have any way to set that up.

Thank you so much, great video

heres some quetions. is ISR "SSG generator" ? is ISR NextJS version of SSG? why should i be using ISR for short validation time, and why should i use ISR for long revalidation time if i can use SSG? if set revalidate to 3day , is that mean after every 3days new build will be generated ?

I'm glad that you're using typescript by default!

I didn't get the reson for that map, you just made a redundant code, using map in an array of one value to return an array with the same one value.

How does ISR affect SEO?

Thank you so much, you explained every single thing. It was really helpful understanding easily. I have two questions. I set revalidate 60 seconds, when it's built, the static files will be generated. And then there are no users in 10 mins, then somebody comes to the page, does it generate users one more at this point, not every 60 seconds? If I come to think of performance, it should do work like this though. and another question is that does it generate all static files when a user comes in after the revalidate time? Then it means that if there are 10000 users, it generates 10000 static files. I'm not sure if I wrote questions correctly though, anyway, Thank you very much for the awesome video 👍

What if your data fetching requires a bearer token (which it often does) that of course changes every hour or so. I guess you cant benefit from this then? 😢

Thanks for your great videos

Interesting. Love learning new things for Next

you videos are amazing !!! thanks

i finally understand, thanks a lot ❤

I think I done everything correctly but it is not working. This is meant to represent a project object. export default interface Project { name: string; slug: string; description: string; imageURL?: string; imagesList?: string[]; repoURL?: string; siteURL?: string; articleURL?: string; programmingLanguage: string; technologies?: string[]; type: | "Web Dev" | "Extra Web Dev" | "Backend Web Dev" | "Machine Learning" | "Java Assignments" | "Other"; } Each project has its own page with its appropriate metadata. app/projects/[slug] export const generateStaticParams = async () => { // get all projects with metadata const projects = [ ...webdevProjects, ...extraWebDevProjects, ...backendWebDevProjects, ...machineLearningProjects, ...javaAssignments, ...otherProjects, ]; return projects.map((project) => ({ slug: project.slug })); }; interface ProjectPageProps { params: { slug: string; }; } const ProjectPage: React.FC = ({ params }) => { const pathname = usePathname(); // used to determine the current route // const params = useParams(); // retrieve the URL parameters const router = useRouter(); const slug = params.slug; const allProjects: Project[] = [ ...webdevProjects, ...extraWebDevProjects, ...backendWebDevProjects, ...machineLearningProjects, ...javaAssignments, ...otherProjects, ]; const project = getProjectBySlug(slug, allProjects); const projectName = getNameBySlug(slug, allProjects); const projectTechnologies = getTechnologiesBySlug(slug, allProjects); const projectLanguage = getLanguageBySlug(slug, allProjects); const projectDescription = getDescriptionBySlug(slug, allProjects); let gallery = getImagesListBySlug(slug, allProjects); // Adds full path to images if (gallery) { gallery = gallery.map((image) => `/projects/${slug}/${image}`); } // If the project does not exist, redirect to the 404 page if (!project) { router.push("not-found"); }...

Can you make an video on how to deploy ISR to AWS-Amplify, I am stuck because SSG works but ISR does not. I don't seem to find any good resources on this topic. If there are, I would be happy about some links :)

❤❤thank you for this video

This is great for small size user base

It is nice if you cover the state managements in NextJs with prisma in ssr.

Is there a way to push data from the server into the system instead of polling?

Thank you ❤

can you do this for query params

Now a example 👏 please.

What if 10,000 users?

Is it really best practice to use this for users? Lets just say that you have thousands of users, then you need to cache all of those routes. Seems pretty demanding. I think that to remove latency for userId specific pages the better practice is SSR or even client side fetch as the user does not care much about speed there. I would even say that it is safer. But for high traffic routes like blogs or eshop products etc the ISR would be more appropriate.

my nextjs app images not lazy load

video build production nextjs to hosting, please

Yes we need example for this boss. Can you show it how we can connect this with sanity. I want to make blog site

so... what about a real world ?

Put off the nextjs moonboi glasses inmediately, you’re missing out on nuxt3

do you have discord kind sir?