How to set where the prerendered HTML of new pages generated at runtime is stored with incremental static generation (ISR) in Next.js e.g. to AWS S3?

Suppose I have a multi-user blog website like a Medium-clone, and when a user creates a new blog page from the web UI of the website itself, I want its HTML to be statically prerendered and served from that cache in the future under a dynamic route like /posts/[user]/[pid], without me having to reboot the server or run any custom manual commands to rebuild the static rendered caches.

The same issue would arrise with incremental static generation where I might want to only prerender a subset of the most actively viewed pages at build time.

When running things locally, generated prerendered files will be stored in the local filesystem under .next/server/pages (though I couldn't find a clear example of this under https://github.com/vercel/next.js/tree/c7596be786ebe1fa5860c0f5efd7781faae0f931/examples in which pages are generated at runtime).

However, when deploying e.g. to Heroku and other PaaS systems, I would definitely need a way to specify where those newly generated HTML pages will be stored, some kind of push/fetch adapter, since Heroku's filesystem is ephemeral, and those files under .next/ that are not generated at build time by next build can disappear randomly at any moment. Maybe it Next would just regenerate them and users wouldn't notice, but I don't want to bet on that, and at the very least there would be some performance hit. So I would likely use something like Amazon AWS S3 to store those static assets.

Is this possible or documented somewhere?

Some possibly related threads I could find:

Upvotes: 4

Views: 716

Answers (1)

I ended up learning more about Next.js What is the difference between fallback false vs true vs blocking of getStaticPaths with and without revalidate in Next.js? and this cleared some things in my mind.

First, ISR is does trigger a rebuild for every page hit (except for the n second grace period). But what I wanted was a mechanism that:

  • when the page is updated by an user, invalidate the CDN/S3. More generally, I need to encode a dependency graph on "which user actions might change how a page renders", and any of them would have to change the page. Feature request at: https://github.com/vercel/next.js/discussions/11698

  • if the CDN/S3 does not contain a page, I would want it to somehow contact my server, so that it can generate the page for the first time, then return that to the user, and update the CDN

    I'm not sure CDNs have that capability at all, although capabilities mentions in "more modern CDNs" at https://formidable.com/blog/2019/modern-cdns-lambda/ might allow it

I have also launched a test on Heroku with standard ISR https://github.com/cirosantilli/node-express-sequelize-nextjs-realworld-example-app/tree/63150b632f5e6feda8ba3b8029e22de25543f162 and it seems to run OK, so maybe the worst thing that will happen when the filesystem gets nuked is that I'll lose some caches. It's not as amazing as the setup that I wanted to achieve, but I'm not sure that would even be possible due to the CDN capabilities, so I'm going to start with standard ISR and see how it goes.

Upvotes: 1

Related Questions