Livestream: Optimize a Figma design for Import | 3/20

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact SalesGo to App

Livestream: Optimize a Figma design for Import | 3/20

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Back arrow icon
Back to Glossary
ISR (Incremental Static Regeneration) Definition
Incremental Static Regeneration (ISR) in Next.js lets you update static pages without a full rebuild. It's like having a cache that refreshes itself. You set a revalidation time, and Next.js regenerates the page in the background after that time expires, keeping your content fresh while maintaining the speed of static sites.
ISR (Incremental Static Regeneration) hero image
What's on this page? 

    Glossary Terms

    What's on this page? 

      What is ISR?

      Incremental Static Regeneration (ISR) in Next.js lets you pre-render pages at build time and update them later without a full rebuild. It's useful for sites that need regular content updates.

      ISR merges static site generation (SSG) performance with dynamic content capabilities. This makes it a good fit for blogs, news sites, and e-commerce platforms.

      ISR allows you to:

      • Pre-render pages for faster initial loads
      • Update specific pages without rebuilding the whole site
      • Serve static HTML with fresh data, which can help with SEO

      Let's look at how ISR works under the hood and its implementation details.

      Benefits of incremental static regeneration

      ISR offers several advantages that make it a go-to choice for modern web development:

      Real-time updates

      ISR ensures your users always see the most up-to-date content. Pages are regenerated in the background, keeping your site fresh without sacrificing performance.

      Personalized content

      You can generate static pages based on user-specific data, creating a personalized experience for each visitor.

      SEO-friendly

      Search engines love static HTML files. ISR helps improve your SEO by serving pre-rendered pages that are easily crawlable and indexable.

      Developer experience

      Next.js makes implementing ISR a breeze with its built-in support and intuitive APIs. You don't need to be a rocket scientist to get started.

      Improved performance

      By leveraging static site generation, ISR provides blazing-fast page loads. This translates to happier users and better Core Web Vitals scores.

      Reduced server load

      ISR avoids rebuilding your entire site for small updates. This makes the development and deployment process more efficient, saving you time and resources.

      How ISR works?

      Understanding the inner workings of ISR can help you make the most of this feature. Here's a breakdown of the process:

      1. Initial Static Generation: When a user first requests a page, Next.js serves a pre-generated static HTML file.
      2. Revalidation Interval: You set a revalidation interval for each page, determining how often Next.js should attempt to regenerate it.
      3. Stale-While-Revalidate: Next.js serves the existing static page while attempting to regenerate it in the background.
      4. Revalidation Process: Next.js checks for updates in the data source and regenerates the page if changes are found.

      The magic happens in the getStaticProps function:

      export async function getStaticProps() {
        const data = await fetchData();
        return {
          props: { data },
          revalidate: 60, // Regenerate page every 60 seconds
        };
      }
      

      This function pre-renders static pages at build time and sets the revalidation interval.

      Use cases for ISR

      ISR shines in various scenarios:

      • News websites and blogs that need to display the latest articles
      • E-commerce platforms with frequently changing product information
      • Stock market tickers or live sports scores
      • Social media feeds or live chat applications
      • A/B testing on static pages

      Basically, any application that requires frequent content updates while maintaining high performance can benefit from ISR.

      Implementing ISR in Next.js

      Getting started with ISR is straightforward. Here's a quick guide:

      1. Specify the revalidate property in your page component to set the revalidation interval.
      2. Generate static pages using Next.js's static site generation capabilities.
      3. Enable ISR by setting the fallback property to either true or 'blocking' in the getStaticPaths function.
      4. Handle fallback rendering by displaying a loading state until the page is fully generated.

      Here's a simple example:

      export async function getStaticPaths() {
        return {
          paths: [
            { params: { id: '1' } },
            { params: { id: '2' } },
          ],
          fallback: true,
        };
      }
      
      export async function getStaticProps({ params }) {
        const res = await fetch(`https://api.example.com/posts/${params.id}`);
        const post = await res.json();
      
        return {
          props: { post },
          revalidate: 60,
        };
      }
      

      This setup will generate static pages for posts with IDs 1 and 2 and enable ISR for other posts with a revalidation interval of 60 seconds.

      Optimizing ISR for performance

      To get the most out of ISR, consider these optimization techniques:

      Automatic revalidation

      This is the default option. Pages are regenerated after a fixed interval that you specify.

      On-demand revalidation

      Regenerate static pages on demand, triggered by specific events or API calls.

      Mix different approaches

      Combine automatic and on-demand revalidation for maximum flexibility.

      Combine ISR with dynamic data

      Merge ISR with dynamic data fetching to create hybrid pages that are both static and dynamic.

      export async function getStaticProps() {
        const staticData = await fetchStaticData();
        return {
          props: { staticData },
          revalidate: 60,
        };
      }
      
      function Page({ staticData }) {
        const { data: dynamicData } = useSWR('/api/dynamic-data', fetcher);
        // Render page using both staticData and dynamicData
      }
      

      This approach allows you to have the best of both worlds: fast initial loads with static content and real-time updates with dynamic data.

      Common challenges and solutions

      While ISR is powerful, it comes with its own set of challenges:

      Cache invalidation

      Careful caching strategies are crucial. Implement proper cache invalidation mechanisms to ensure users always see the most up-to-date content.

      Compatibility with external data sources

      Ensure your data sources can handle the frequency of regeneration requests. Consider implementing rate limiting or caching at the data source level.

      Increased complexity

      ISR adds another layer of complexity to your application. Invest time in proper documentation and testing to make debugging easier.

      Server load

      Background regeneration can impact server resources. Monitor your server load and adjust revalidation intervals accordingly.

      Enhancing web experience with ISR

      Incremental Static Regeneration in Next.js offers a powerful solution for creating dynamic, yet highly performant web pages. It combines the strengths of static site generation with real-time data updates, providing a flexible and efficient approach to building modern web applications.

      By leveraging ISR, you can create fast, SEO-friendly, and always up-to-date websites. Whether you're building a blog, an e-commerce platform, or a data-driven application, ISR can help you deliver a superior user experience.

      How Builder integrates with Next.js

      Builder.io seamlessly integrates with Next.js, enhancing Incremental Static Regeneration (ISR) and providing visual editing capabilities. This combination offers a powerful, flexible development environment.

      Visual Editing

      Builder's drag-and-drop interface allows non-technical team members to update content easily:

      import { Builder, BuilderComponent } from '@builder.io/react'
      
      export async function getStaticProps({ params }) {
        const page = await Builder.get('page', {
          userAttributes: {
            urlPath: '/' + (params?.page?.join('/') || '')
          }
        }).toPromise()
      
        return {
          props: { page: page || null },
          revalidate: 5,
        }
      }
      
      export default function Page({ page }) {
        return <BuilderComponent model="page" content={page} />
      }
      

      Dynamic imports and A/B testing

      Builder supports dynamic imports and works well with Next.js's code splitting. It also facilitates A/B testing, allowing you to serve different page versions to different users.

      Content API and custom components

      Builder's Content API integrates with Next.js's data fetching methods:

      export async function getStaticProps() {
        const content = await builder.get('page', { url: '/my-page' }).toPromise()
        return {
          props: { content },
          revalidate: 60,
        }
      }
      

      You can also register custom React components with Builder, making them available in the visual editor.

      Performance optimization

      Builder's integration includes optimizations like automatic image optimization and lazy loading of off-screen components, maintaining Next.js's high-performance standards.

      By combining Builder with Next.js and ISR, you get the performance and SEO benefits of static generation, the flexibility of server-side rendering and ISR, and the ease of use of a visual CMS. This allows for fast, dynamic, and easily maintainable websites that both developers and content creators can update.


      RELATED CONTENT


      Connect to learn more about Builder.io
      Get a demo
      Sign up for free

      Share this page

      Glossary Terms