Part 39: Keeping Your Next.js App Up-to-Date with Incremental Static Regeneration
[Pages] Data Fetching
In our previous exploration of data fetching in Next.js, we discussed the advantages and potential drawbacks of both client-side and server-side approaches. One significant aspect of client-side fetching is its ability to always display the latest data from your CMS. However, server-side rendering offers benefits like faster initial load times and improved SEO. But how can we enjoy the best of both worlds? Enter Incremental Static Regeneration (ISR).
Why Static Data Can Become Stale
When using getStaticProps in Next.js, your pages are statically generated at build time. This means that even if you update your data in the CMS, the changes won't be reflected until you rebuild your application. This is evident when you have two pages like index-1a (using getStaticProps) and index-2 (fetching data client-side). The former will not show updates until a rebuild, while the latter fetches fresh data on each load.
Incremental Static Regeneration: A Powerful Solution
ISR allows you to update static content automatically without rebuilding the entire app. By setting a revalidate period in getStaticProps, Next.js will periodically regenerate your page.
How to Implement ISR
Let's see how to set up ISR in practice by creating a new page, index-1b, which uses getStaticProps with ISR.
// pages/index-1b.js
import Head from 'next/head';
import Title from '../components/Title';
import { getProducts } from '../lib/products';
export async function getStaticProps() {
console.log('[HomePage] getStaticProps()');
const products = await getProducts();
return {
props: { products },
revalidate: 30, // seconds
};
}
function HomePage({ products }) {
console.log('[HomePage] render:', products);
return (
<>
<Head>
<title>Next Shop</title>
</Head>
<main className="px-6 py-4">
<Title>Next Shop</Title>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.title}
</li>
))}
</ul>
</main>
</>
);
}
export default HomePage;Understanding ISR in Action
With ISR, you set a revalidate value (e.g., 30 seconds), which determines the validity period of the static props. After this period, the next request triggers getStaticProps to fetch fresh data.
Initial Load: The page displays static content generated at build time.
Revalidation: Once the
revalidateperiod passes, the first request for the page triggers a background regeneration of the page with the latest data.Immediate Response: The initial request after the revalidation period receives the old static data immediately. This avoids making users wait for the new data to be fetched and processed.
Subsequent Requests: Subsequent requests will receive the updated page, ensuring that the content reflects any recent changes in the CMS.
Key Considerations
Production Environment: ISR only works in production mode. You must build your application for production and run it with Node.js or a compatible platform.
No Instant Updates: The first request after the
revalidateperiod still receives the old data. The new data is served only after the regeneration is complete.Periodic Updates: Next.js will call
getStaticPropsregardless of whether the data has changed. It does not automatically detect changes in the CMS.
Conclusion
Incremental Static Regeneration offers a middle ground between static and dynamic content delivery. It allows your Next.js application to remain static while periodically updating to reflect changes in your backend data. This approach is ideal for content that doesn't change frequently but should be up-to-date within a reasonable timeframe.
By implementing ISR, you can leverage the advantages of server-side rendering—like SEO and performance—while ensuring that your users see the most current information. This makes ISR a valuable tool in your Next.js development toolkit, especially for content-driven applications.
Last updated