Configure preview for on-demand ISR with Next.js

There are multiple systems in your infrastructure which have their roles: the CMS stores the content and Uniform stores the experience data, like URL structures and how pages are going to look like on the site.

It's important to ensure everything is working correctly before making any digital experience available to users or customers. This article covers sample scenarios for previewing web pages with Uniform.

All the scenarios here are based on Next.js preview and ISR on-demand features. Next.js SSR renders new site content on each request, and so it's not used in this example. If you're using Sitecore, this means with SSR any content in the web database is automatically available in production without an additional logic in code.

Configure preview#

To configure this in your Uniform project:

1. Configure on-demand ISR with Next.js. The Uniform component starter kit has an example with Uniform-specific revalidate logic. You can use the code as is. It expects the Uniform webhook structure payload.

   tip

   For Sitecore, make sure the revalidate option isn't set in getStaticProps, otherwise the content published in Sitecore will automatically appear on the site. This is because Next.js will revalidate the data.

2. Set up a Uniform webhook to point to the invalidate endpoint.

   Example endpoint URL

   https://nov-28-test.vercel.app/api/revalidate?secret=hello-world

   CopyCopied!

Now each Uniform publish will trigger the Next.js revalidation logic on your app, which updates the production site. Until the publish is triggered, updates are only visible in preview.

Limitations#

This approach has some limitations:

1. Uniform preview (based on Next.js preview) doesn’t cache the reply coming from CMS, but the real site does. Default cache timeout is 30 seconds. It will take at lest 30 seconds before the new content appear on the site after the composition is published. This can be configured on the data type.

2. This scenario doesn’t cover Uniform dynamic pages, because when new CMS content is added, the Next.js app may automatically pick it up on the first request if the fallback is set to true or blocking.

Example Scenarios#

Here are example scenarios and how the preview will work.

New content is created and a Uniform composition doesn’t exist or isn't published#

A page isn’t public until a project map node and composition are published in Uniform. CMS content updates aren’t available on the production site until an editor triggers a publish in Uniform. To preview a page before publishing it, one can use Uniform visual editor or copy the link to open the site in a new tab. This will render the most recent content from the web database, because Next.js preview ignores the ISR caching.

How to find the preview URL for testing in a new window or tab.

When the composition is finished, the editor needs to publish the composition.

Existing CMS content is updated which is used on a published Uniform composition#

This scenario is similar to the previous one:

1. Update content in the CMS and publish it when ready.
2. Open the site for preview either in the Uniform visual editor or using the preview URL in a browser window or tab.
3. Publish the composition when satisfied.

The update isn’t public until the revalidate webhook is triggered via Uniform composition publish.