Next.js ISR
Incremental Static Regeneration
- Create / update static pages after the site is built
- Use static-generation on a per-page basis without needing to rebuilding the entire site
1 page = 0.5 sec
10 pages = 5 sec
100 pages = 50 sec
- Flexibility to choose which pages are generated at build or on-demand
- Choose which fits your needs & use case better:
A) Faster builds
B) More cached pages
How to enable ISR
getStaticPaths - fallback prop ("blocking" / true)
// pages/products/[id].js
export async function getStaticPaths() {
const products = await getTop1000Products();
const paths = products.map((product) => ({
params: { id: product.id },
}));
return { paths, fallback: 'blocking' };
}How to enable ISR
Update static page
getStaticProps - revalidate prop
// pages/products/[id].js
export async function getStaticProps({ params }) {
return {
props: {
product: await getProductFromDatabase(params.id),
},
revalidate: 60,
};
}Update static page
Next.js ISR
By tume
