How do we test ISR to make sure subsequent requests are serving the cached page?

Support
1

We have a site/project setup at: https://metrie-staging.netlify.app/

This is a Next.js build which utilizes Contentful and a handful of other services such as Algolia. The site has about 10,000 products so we use ISR to generate the first couple hundred product detail pages and then use ISR to generate remaining pages upon request.

One of the things those pages do at build/generation is hit a few endpoints that query against Algolia. We’re noticing that Algolia is being hit upon every request of the page so we’re curious if the caching is simply not working.

The question is, how do we test ISR within our Netlify environment? Is there a way for us to test if a request is serving a cached page?

Thanks!

3

Hi @MikeAtHansonInc , we can definitely check if a particular request was a cache hit or miss if you can provide us with a request ID or a HAR file! Let us know if that works for you or if you have any additional questions.

4

Hi, @MikeAtHansonInc. There are also ways to do this checking on your own.

If incremental static regeneration (ISR) is used, you will see the following HTTP response header:

  • x-nf-render-mode: isr

If you see x-nf-render-mode: ssr that is the server-side rendering. If you see x-nf-render-mode: odb it means the ISR is failing because the props object is missing the revalidate attribute. (The revalidate attribute is a hard requirement for Next.js itself as covered in the documentation.)

To see how long a URL has been cached, you can check the age header. The integer value is the number of seconds this content has been cached at the time of the response.

​Please let us know if there are other question if you you want us to check a specific x-nf-request-id.

1 Like
5

Netlify team, I’m working with @MikeAtHansonInc on this issue and we’ve made progress, but the output I’m seeing for the x-nf-render-mode doesn’t exactly match the notes above, and I wanted to confirm whether ISR is working or if we still have a problem.

Here’s a URL in question: https://deploy-preview-544--metrie-dev.netlify.app/products/moulding/1692401

This page is being served with getStaticProps(). The redacted function is as follows:

const REVALIDATE_THRESHOLD = 60 * 60 * 12; // 12 hours

interface IParams extends ParsedUrlQuery {
	productGroup: string;
	slug: string;
}

export const getStaticProps: GetStaticProps<ProductDetailLayoutProps, IParams> = async ({
	params,
	locale,
	preview = false,
}) => {

	// Code to fetch the product and menu from the CMS

	return {
		props: {
			product,
			menus,
			preview,
			urlBase,
		},
		revalidate: REVALIDATE_THRESHOLD,
	};
};

See the attached screenshot for the headers I’m seeing on the request:

Screenshot 2022-12-15 141006
Screenshot 2022-12-15 1410061236×537 56 KB

The key bit that differs is:

x-nextjs-cache: REVALIDATED
x-nf-render-mode: odb ttl=43200
x-nf-request-id: 01GMBJW7FJQ5DXTGHJWM4G8QR0

Can you tell me if this output means ISR is working, or if we stll have an issue, and if ISR is still not working, what are likely next steps to pursue?

Thanks,

Dave

1 Like
6

Good catch!

We’ve changed that output from isr to odb ttl=X so indeed, it does seem to be working as you’ve specified. once X seconds have passed, the next request will still serve stale content, but trigger the revalidation; in another minute, we’ll have repopulated the cache with a new copy and you should see the ttl start counting down again.

7

We’ve confirmed that this is now working in production and we’re seeing much lower Algolia usage, thanks for the support Netlify team!