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
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.
Good idea, Next 13 has the option to create an API route just for revalidation that you can call whenever you'd like, for example with a webhook from your cms
12:4913: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.
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 👍
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?
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.
Please I need the Answer . so when use generateStaticParams . and I have array [1,2,3,4] . and next day I add new id on database will be 5 . so if request the page /5 will be not found if I did not use revalidate . ???
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?
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 ?
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 :)
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?
@@joshtriedcoding do you know the build time for 1000 pages as linktree page for example? To have an idea, if NextJs gave some infos about this. Thanks for the value btw!
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? 😢
In this case, dynamic generation makes more sense (as he said at the end). I think tha this feature can prove useful for things that are not overly to many & get shown to many users, like the posts of a blog fetched from another website
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.
As I said towards the end, it is a trade-off between build time and UX. It also depends on the nature of your dynamic route, whether it handles users, documents, posts ... Lots of factors play into the decision whether to use ISR, SSG or SSR pages
@@joshtriedcoding Ah yes, next time I will make sure to watch until the end, great videos tho. Could you also make something about rate limiting and throttling for the T3 stack?
NextJS SSR, SSG, ISG is probably one of the most timetaking thing to understand. Loved the video!
Really is, took me a long time myself. Cheers man
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
i try revalidation with generateStaticParams in nextjs14 and it not woking, then i use revalidation in the page
Yes, it is not supported. We cannot use it as showed in video
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.
Cool, would be nice to see, on demand ISR.
Supabase had a video that had that a month or so ago
Good idea, Next 13 has the option to create an API route just for revalidation that you can call whenever you'd like, for example with a webhook from your cms
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.
Great explanation, Josh. There are definitely a lot of great uses for these examples.
I'm glad that you're using typescript by default!
we can do it in next 12. In N13, Vercel was change syntax a bit. But it's so amazing
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 👍
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?
Love your channel ! Glad i found this, hope ur channel grow :)
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.
Love your channel bro. Thanks for this! Learned something new!
Good explanation
So when I go for server side rendering? any example
Please I need the Answer . so when use generateStaticParams . and I have array [1,2,3,4] . and next day I add new id on database will be 5 . so if request the page /5 will be not found if I did not use revalidate . ???
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.
It is nice if you cover the state managements in NextJs with prisma in ssr.
I second this!
Not sure what exactly you mean, mind elaborating?
I meant using Redux, Xstate or Zustand with NextJs 13 app dir
with Prisma.
The way to manage the state in the react server components.
what if 10,000 users?
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?
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 ?
Thank you so much, great video
How is he getting the intellisense for the new revalidate export? I don't seem to have any way to set that up.
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 :)
can you do this for query params
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?
you videos are amazing !!! thanks
This is great for small size user base
Next has no problem with that, just becomes a trade-off between build times and UX
@@joshtriedcoding do you know the build time for 1000 pages as linktree page for example? To have an idea, if NextJs gave some infos about this. Thanks for the value btw!
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?
Thanks for your great videos
Now a example 👏 please.
Interesting. Love learning new things for Next
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.
i finally understand, thanks a lot ❤
How does ISR affect SEO?
Is there a way to push data from the server into the system instead of polling?
Yes, with revalidate
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
With next auth so users can sign in and post a comment as well
Also with ads components. Thanks
With carousel in the homepage 😅😂
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? 😢
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");
}...
What if 10,000 users?
In this case, dynamic generation makes more sense (as he said at the end). I think tha this feature can prove useful for things that are not overly to many & get shown to many users, like the posts of a blog fetched from another website
❤❤thank you for this video
Thank you ❤
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.
As I said towards the end, it is a trade-off between build time and UX. It also depends on the nature of your dynamic route, whether it handles users, documents, posts ... Lots of factors play into the decision whether to use ISR, SSG or SSR pages
@@joshtriedcoding Ah yes, next time I will make sure to watch until the end, great videos tho. Could you also make something about rate limiting and throttling for the T3 stack?
@@filipfedorisin3457 Cheers, good idea
my nextjs app images not lazy load
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?