Next.js ISR Tests

Exploration of various ways ISR reacts / responds to errors and different prop returns. See the pages directory for the various tests. Each of the tests are prefixed with isr-.

Note that all test results are taken against a production build npm run build.

• GH Repo - https://github.com/dapperlabs/nextjs-isr-testing
• Vercel Deployment - https://nextjs-isr-testing.vercel.app

Development

• npm ci
• npm run dev

Context

Incremental Static Regeneration (ISR) is made available in next.js by default. It allows us to create and update static pages after the site is built. We can use static generation on a per-page basis, without needing to rebuild the entire site. The individual pages can be (re)generated on demand.

ISR works in tandem with two static generation features from next.js:

• getStaticProps– If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.
• getStaticPaths– If a page has dynamic routes and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time. If you export an async function called getStaticPaths from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.

Reference Links

• A Complete Guide To Incremental Static Regeneration (ISR) With Next.js
• Incremental Static Regeneration

Extra Notes

• Client side transitions do not trigger revalidation
• However next.js link prefetching does have some impact on ISR. From their docs – Prefetch the page in the background. Defaults to true. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch = false. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.
• Refreshing on any page in the app triggers revalidation if the revalidation time period has passed
• If I am the one that loads the page and triggers the revalidation, the revalidation will happen in the background but I will see data that’s stale by one revalidation period.
• In local dev, getStaticProps runs on every page request. If getStaticProps errors, the next.js error overlay view is shown.

Other Thoughts / Findings

• Look into the combination of SSR + Cache-Control header + stale-while-revalidate directive. It could be an alternative to ISR in some (all?) cases, and even be implemented now on certain pages. MDN and web.dev articles.