Learn NextJS's Superpower ISR in 15 Minutes
HTML-код
- Опубликовано: 24 авг 2024
- NextJS's Incremental Static Regeneration is a powerful tool for making your dynamic routes BLAZINGLY fast! :D Let's learn how to use it and how to verify that we used it correctly in our app. With ISR, you can convert dynamic routes into pre-rendered, static HTML + JSON routes.
My GitHub: github.com/jos...
ISR Documentation: beta.nextjs.or...
I wish you a lot of fun implementing ISR into your app and seeing the results for yourself. Let me know if you build something cool with it! Cheers
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
Great explanation, Josh. There are definitely a lot of great uses for these examples.
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
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.
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.
we can do it in next 12. In N13, Vercel was change syntax a bit. But it's so amazing
Love your channel ! Glad i found this, hope ur channel grow :)
Love your channel bro. Thanks for this! Learned something new!
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.
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?
I'm glad that you're using typescript by default!
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?
Thank you so much, great video
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?
Thanks for your great videos
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 👍
you videos are amazing !!! thanks
So when I go for server side rendering? any example
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?
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?
i finally understand, thanks a lot ❤
Interesting. Love learning new things for Next
Now a example 👏 please.
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 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?
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?
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 do this for query params
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
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? 😢
Thank you ❤
video build production nextjs to hosting, please
my nextjs app images not lazy load
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
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!
Is there a way to push data from the server into the system instead of polling?
Yes, with revalidate
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 😅😂
so... what about a real world ?
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
Put off the nextjs moonboi glasses inmediately, you’re missing out on nuxt3
do you have discord kind sir?