When you create a website, you often have two important choices on how the pages are made: stable or dynamically.
When you build your project, static pages are made once. They are fast because when a page goes, the server does not need to do any extra work.
Dynamic pages are made on the fly. Whenever the user demands a page, the server makes it refreshed. It may be slow, but that means the content is always the latest.
The benefits and defects of both options. Static pages are very fast, but if they change after construction, they can show the old content. Dying pages are always fresh, but they can be slow because the server has to work hard.
This comes from growing static creation (ISR). ISR provides you with the best in both worlds: the speed of static pages with the freshness of the dynamic pages.
In this article, we will discover what IceR is, how it works in the next dot J, and how you can use it to make your website faster and faster.
The table of content
What is the extra static creation (ISR)?
The next dot JS is a feature that allows you to update static pages after creating your site.
In the past, if you have created a static site and need to change it, you have to rebuild the entire site from the beginning. It can take a lot of time, especially for large websites.
ISR solves this problem. With ISR, you can ask the next dot JS after a certain time, or whenever you ask it, then to rebuild a page in the background. The user still sees a faster stable page, but the page can also update you behind the screen without rebuilding everything.
In simple terms, pages are pre -presented and presented as static files. After a stipulated time, the next dot Je can regenerate the page with fresh data and users always get fast, reliable pages.
How does the ISR work behind the curtain
To understand the ISR, let’s look at the three ways you can make pages in the next dot J:
Static Generation (SSG): Pages are made once when you deploy. They never change until you rebuild the entire site.
Server side rendering (SSR): Pages are fresh on each request. It can slow down things because the server is working every time.
Extra static creation (ISR): Pages are made at the time of application Only if needed After a fixed amount of time has passed. Otherwise, users get a pre -created page immediately.
How ISR originally works:
When you use ISR:
A user goes to your page.
If the page is already built and its term is not expired, the next dot JS KcDard offers a static page.
If this page expires on the basis of your fixed time, the next dot JS rebuilds the page in the background during the old page service.
The next user who visits the fresh new version is automatically found.
You control the pages when you set the time limit revalidate Key inside you getStaticProps Ceremony
Here is the basic setup for ISR:
export async function getStaticProps(context) {
const { id } = context.params;
const post = await fetch(`https://example.com/posts/${id}`).then(res => res.json());
return {
props: {
post,
},
revalidate: 60,
};
}
export async function getStaticPaths() {
const posts = await fetch('https://example.com/posts').then(res => res.json());
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: 'blocking' };
}
What does it do:
This page is made for the first time and is caught when someone visits it.
After 60 seconds, if anyone comes again, the next dot JS will rebuild the page in the background with new data.
Users always get a page immediately. They will never have to wait.
When does the ISR mobilize the new page generation?
Now that you know what ISR is, let’s see when and how a page is actually born again.
Here’s the flow:
The user requests a page.
Next Dot JS checks whether there is a pages (already made) page.
If the page is still “fresh” (within
revalidateTime), it easily serves the cacheed page.If the page is “Basi” (out of this
revalidateTime), this Serves the old ketchide page Immediately but also the background starts rebuilding the page.Once the rebuild is rebuilt, the next user gets the new latest page.
The main:
No one ever waits. ISR always serves something immediately, either a fresh page or previous version.
User visits page --> Is page fresh?
|
Yes | No
Serve cached page Serve cached page + Start background regeneration
|
Regeneration finished
|
Next user sees updated page
Instant example
We say that you set revalidate: 30 Seconds for your page
12:00:00 pm Page Page has been built and cash.
12:00:10 pm → User visit. The page is offered from cache (still fresh).
12:00:35 pm – Another user’s visit. The cache is a stale, so the next dotS serves the old page but triggers rebuilding.
12:00:36 am → Reconstruction. The new page is ready.
12:00:40 pm → The next visit gets a new fresh page.
In short:
The page is always available fast, and it quietly updates itself, even users are considered.
Common -use issues for ISR
You are thinking, when you really should use ISR?
Here are the most common conditions where ISR is the best choice:
1. Blogs and news sites
If you run a blog or news website, new articles are often added. You want your readers to see fresh content, but you also want the pages to be loaded faster.
With ISR:
Articles are made as stable pages.
When you publish a new article, it refreshes quietly after a short time.
Readers always get fast loading speed.
Example:
A tech blog refreshes every few hours. You set up revalidate: 3600 (1 hour) So pages refresh with new content once a time each hour.
2. E -commerce product pages
In online stores, product information such as prices, availability, and specifications often change. You want the data to be very fresh, but good sale you also need a sharp page load.
With ISR:
Product pages are loaded immediately.
If something changes (such as sales), the page quietly refreshes the purchase experience without hurting.
Example:
You set up revalidate: 300 (5 minutes) Your product is so that the changes are rapidly visible without slowing down the store.
3. Dashboards and the content made from the user
If your site has dashboards, reviews, forums, or user profiles that do not change every second, ISR can be a great choice.
With ISR:
You can show the latest posts, comments, or stats without making the server too difficult.
Refreshes the content at your decision intervals.
Example:
A review site refreshes its “Top Products” list every day revalidate: 86400 (24 hours)
In short:
If your page sometimes changes (not every second) and you want a fast and fresh content, use ISR.
Best Best Actions of USS Use
You need to get the best results with ISR, you need to configure it correctly. Some important points to ensure that everything works easily.
1. Choose the right revalidate Time
Think about how often your content really changes.
If your content changes HourYou can set
revalidate: 3600(Which is 1 hour).If your content changes DailyYou can set
revalidate: 86400(Which’s 24 hours).If your content changes In every few minutesYou can set
revalidate: 300(Which is 5 minutes).
Indications:
Pick a revalidate Time that balances new pin and server loads. Less time means fresh data but can put more pressure on your server.
2. Handle the mistakes effectively
Sometimes, your data source (such as API) may fail when creating a page.
To avoid breaking your page:
Example:
export async function getStaticProps() {
try {
const data = await fetch('https://example.com/data').then(res => res.json());
return {
props: { data },
revalidate: 60,
};
} catch (error) {
console.error('Failed to fetch data:', error);
return {
props: { data: null },
revalidate: 60,
};
}
}
3. Think about SEO
Since the ISR offers stable pages faster, it is great for SEO.
Just remember:
Always return the meaningful material even if the data fails to bring.
Avoid displaying “loading …” states when using ISR. Page should feel full for both users and search engines.
Potential losses and how to avoid them
Although ISR is amazing, there are some things that you are not careful if you are not cautious. What to see here
1. Bossy data problems
Sometimes users can see the old data if the page has not yet been reviewed. This happens because the ISR serves the ketchard version unless there is a new construction.
How to handle it:
Set A
revalidateThe time that is meaningful to your content.If your content is very sensitive (such as stock prices), you would like to use server side rendering (SSR) instead of ISR.
2. Deployment Invalid Configures
ISR needs server support to work properly. If you are hosting your site on a platform like Versal or Netif, they handle it for you.
But if you use a custom server or different hosting, make sure:
You have a server equipment functions or back and support.
You do not accidentally convert your site into a stable hosting (such as simple S3 buckets without a background).
Indications:
Always check your hosting provider’s documents so that they can be supported Next Dot JSSR Properly
3. Large reconstruction can cause load spikes
If you revalidate Very small and you have thousands of pages, the server background creation requests can flood.
How to handle it:
Be careful with yourself
revalidateValues.Consider the on-demand ISR (where you control the pages manually-we’ll talk about it).
Advanced indicators: On Demand ISR
Generally, with ISR, pages regenerate after a fixed time you explain revalidate.
But sometimes you want full control. Immediately you have something to do. Want to re -create a page after, such as:
This is the place where the on -demand ISR comes.
With on -demand ISR, you manually trigger a page to rebuild an API path. No wait for the timer – you decide when it happens.
How to configure the on -demand ISR
You need two easy things:
An API root that next. Ask JS to a page.
A secret token to protect your API so that not only can anyone mobilize it.
Example: The Basic API Route for Demand ISR
Create a file like this:
export default async function handler(req, res) {
if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
return res.status(401).json({ message: 'Invalid token' });
}
try {
const pathToRevalidate = req.query.path;
await res.revalidate(pathToRevalidate);
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).json({ message: 'Error revalidating' });
}
}
How to mobilize it
You can make a Post This way your API Route request:
POST /api/revalidate?secret=YOUR_TOKEN&path=/your-page-path
For example:
POST /api/revalidate?secret=MY_SECRET_TOKEN&path=/posts/my-new-post
Next Dot J will rebuild immediately /posts/my-new-postNo need to wait for the timer.
The main:
Conclusion
Additional Static Creation (ISR) is one of the best features of the next dot J. It provides you with the new pin of static pages and dynamic content at the same time.
With ISR:
Your pages are immediately loaded.
Your content remains the latest without complete construction.
Your website feels smooth, modern and professional.
If you use ISR wisely, you can create websites that are sharp and smart without making things complicated.