Learn NextJS’s Superpower ISR in 15 Minutes
NextJS is a popular React framework that offers powerful features for building modern web applications. One of its superpowers is Incremental Static Regeneration (ISR), which allows you to update static pages without rebuilding the entire site. In this article, we’ll show you how to harness the power of ISR in just 15 minutes.
Step 1: Create a NextJS Project
First, make sure you have Node.js installed on your machine. Then, open a terminal and run the following command to create a new NextJS project:
npx create-next-app my-nextjs-appStep 2: Enable ISR in NextJS
Open the next.config.js file in your project’s root directory. Add the following configuration to enable ISR:
module.exports = {
experimental: {
isr: {
enabled: true,
},
},
}
Step 3: Create a Static Page
Create a new file called about.js in the pages directory. Add some content to the file to create a static page:
function AboutPage() {
return About Us;
}
export default AboutPage;
Step 4: Test ISR
Start your NextJS development server by running the following command in your terminal:
npm run devOpen your web browser and navigate to http://localhost:3000/about. You should see the “About Us” content displayed on the page.
Step 5: Update the Static Page
Now, make a change to the content of the about.js file. For example, change the text to “About Us – Updated”. Save the file and refresh the http://localhost:3000/about page in your browser. You should see the updated content without needing to rebuild the entire site.
Conclusion
With just a few simple steps, you’ve learned how to harness the superpower of ISR in NextJS. This powerful feature allows you to update static pages in real-time without the need for a full site rebuild, making your web applications faster and more dynamic. Now that you’ve learned the basics, you can explore more advanced use cases and take full advantage of NextJS’s ISR capability.
can you do this for query params
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 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?
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 ?
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.
❤❤thank you for this video
What if 10,000 users?
Thank you ❤
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<ProjectPageProps> = ({ 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 🙂
How is he getting the intellisense for the new revalidate export? I don't seem to have any way to set that up.
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? 😢
you videos are amazing !!! thanks
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.
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.
This is great for small size user base <1000 user for 20 dynamic routes, but what happens to bigger routes or bigger user base?
Is there a way to push data from the server into the system instead of polling?
I'm glad that you're using typescript by default!
Great explanation, Josh. There are definitely a lot of great uses for these examples.