Zaheer Tariq

Cache Revalidation in Sitecore Website Built Using Next.js Incremental Static Site Generation

In the ever-evolving world of web development, delivering highly performant and dynamic websites is crucial. When building a Sitecore website with Next.js, utilizing Incremental Static Site Generation (ISSG) and hosting it on Vercel, one of the key aspects to ensure optimal performance and up-to-date content delivery is on-demand cache revalidation. This blog will dive into the significance of on-demand cache revalidation, how it works, and why it is essential in modern web architectures.

Incremental Static Site Generation (ISSG)

Next.js’s Incremental Static Site Generation (ISSG) allows developers to build static pages that can be incrementally updated with fresh content. This means that while most of your pages are pre-rendered at build time, specific pages can be regenerated on-demand when they are requested, ensuring that users get the most recent content without the need for a full site rebuild.

Role of Sitecore in Content Management

Sitecore is a powerful content management system (CMS) that enables content authors to create, manage, and deliver personalized digital experiences. When integrated with Next.js, Sitecore provides a robust backend for content management, while Next.js takes care of the front-end rendering, delivering a seamless experience for both content authors and end-users.

The Need for On-Demand Cache Revalidation

In a typical Next.js ISSG setup, pages are generated at build time and cached. While this ensures fast load times, it poses a challenge: content can become outdated if it is not regenerated regularly. This is where on-demand cache revalidation comes into play. Here are some key reasons why it is important:

1. Ensuring Fresh Content Delivery

Content freshness is critical for user engagement and SEO. On-demand cache revalidation ensures that users always see the most up-to-date content. When content is updated in Sitecore, the corresponding static pages can be regenerated immediately, reflecting the changes without delay.

2. Optimizing Performance

Rebuilding the entire site for every content update is inefficient and time-consuming. On-demand cache revalidation allows you to selectively update only the pages that have changed, significantly reducing build times and server load. This leads to faster deployments and better resource utilization.

3. Enhancing User Experience

A seamless and responsive user experience is paramount. On-demand cache revalidation ensures that users access the latest content with minimal latency. This is particularly important for websites with high traffic or frequently updated content, such as news sites, blogs, or e-commerce platforms.

Implementing On-Demand Cache Revalidation in Next.js and Vercel

Implementing on-demand cache revalidation involves several steps:

1. Set Up Incremental Static Regeneration

In your Next.js project, configure pages to use Incremental Static Regeneration. This involves setting the revalidate property in the getStaticProps function, specifying how frequently the page should be regenerated.

import { GetStaticProps } from 'next';

type Props = {
  data: any;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  const data = await fetchDataFromSitecore();

  return {
    props: {
      data,
    },
    revalidate: 60, // Revalidate every 60 seconds
  };
};

const Page: React.FC<Props> = ({ data }) => {
  return (
    <div>
      {/* Render your content using the data */}
    </div>
  );
};

export default Page;

2. Use Webhooks for Content Updates

Configure Sitecore to trigger webhooks whenever content is updated. These webhooks can call a specific API endpoint in your Next.js application to revalidate the cache for the updated pages.

3. Create an API Route for Revalidation

In your Next.js application, create an API route that handles revalidation requests. This route should call the res.revalidate method to revalidate the specified pages.

Below is a generic example using post method

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { slug } = req.body;

    if (!slug || typeof slug !== 'string') {
      return res.status(400).json({ error: 'Invalid slug' });
    }

    try {
      await res.revalidate(slug);
      return res.json({ revalidated: true });
    } catch (err) {
      return res.status(500).json({ error: 'Error revalidating' });
    }
  }

  res.status(405).json({ error: 'Method Not Allowed' });
}

If you are looking a fully working example of API route that handles revalidation requests taking path as query string parameter please check this post.

4. Deploy on Vercel

Deploy your Next.js application on Vercel, taking advantage of its seamless integration with Next.js and support for static site generation. Vercel handles the infrastructure, making it easy to scale and manage your application.

On-demand cache revalidation is a game-changer for modern web development, especially when building dynamic websites with Sitecore, Next.js, and Vercel. It ensures that users always see the freshest content, optimizes performance, and enhances the overall user experience. By implementing on-demand cache revalidation, you can achieve a perfect balance between static performance and dynamic content delivery, making your Sitecore website more efficient, responsive, and engaging.

Keywords: API endpoint implementation, dynamic path query string, revalidate page cache, force page regeneration, statically generated sites, content updates, revalidation value, GraphQL endpoint, site architecture, modern web development, up-to-date content, optimal performance, Sitecore website, Next.js, Incremental Static Site Generation (ISSG), Vercel deployment, on-demand cache revalidation, TypeScript, Get API endpoint, page cache revalidation, runtime revalidation, non-technical content editors, clear cache, view updated page

Posted in Next.jsTagged , , , ,