0

From reading this page in the Next JS docs, this is my current understanding of ISR. When contents are updated in an external CMS (or other APIs), the following takes place behind Next JS:

  1. On the first request, Next JS will serve the cached page that is now outdated from the CMS content; however, this request triggers a rebuild of that page (provided that the revalidation time has passed).
  2. On the following and subsequent requests, Next JS will now serve the newly generated page which is now up to date.
  3. It will serve the new cached page until the revalidation time has passed, at which point Next JS will repeat step no. 1.

A potential issue I see is that whoever visits the page for the first time, after the content on CMS had been changed won't see the new content. The second person to visit the same page will see the new content for the first time, but not the first person.

I was wondering if there are any ways to make sure that the first person to visit also sees the latest content? For example, I can think of two possible work arounds, but I'm wondering if there are better solutions.

  1. When a content is updated for a specific page on the CMS side, manually visit the new or updated page to manually trigger a rebuild of that page (or have this automated so that when CMS saves a change, some serverless function visits the new page to trigger rebuild of the page). This way, when an actual website visitor loads the page, they will see the latest content. Similar discussion I found here but a built-in way to do it without serverless?: #11698 Comment
  2. Somehow have Next JS inject new props into the page when it finishes rebuilding. This way the first visitor will see the old content for a very short time, and then the content (page props) are swapped.
  3. (maybe a feature to add in the future), have a helper function from Next to invalidate the cached page and force pre-rendering again (but for per page basis)

Are there recommended solutions to this? Or are the two possible solutions feasible? Thank you in advance for reading my very long question.

Shu Takahashi
  • 46
  • 4
  • 1
    Just a small correction to your understanding of ISR: _"When contents are updated in an external CMS (or other APIs), the following takes place (...)"_ - Not quite - all the steps you describe occur when the `revalidate` interval has passed, not when an update occurs in the CMS. ISR's regeneration occurs on interval, not when an event occurs nor on-demand - what you're requesting isn't currently supported out-of-the-box. See the related question: [Next.js Static Regeneration on demand](https://stackoverflow.com/questions/66995817/next-js-static-regeneration-on-demand). – juliomalves Jan 08 '22 at 18:15
  • 1
    @juliomalves Thanks for the correction. Just to clarify, ISR is triggered when the `revalidate` interval has passed AND a request has been made? Or does ISR trigger after the `revalidate` interval by itself even if no requests had been made (e.g. Next keeps on rebuilding the page even if there are no page visits)? – Shu Takahashi Jan 09 '22 at 01:38
  • 1
    It does not trigger by itself, the request is still needed, as you mention in your steps. – juliomalves Jan 09 '22 at 02:06
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Jan 15 '22 at 05:15

0 Answers0