Next.js: Update a static page by event

Created on 23 Aug 2020  路  7Comments  路  Source: vercel/next.js

Feature request

Provide an API to update a static page not all of them.

Problem

NEXTJS introduced Incremental Static Re-generation mechanism to update existing pages, but it's useless for cases like this:
consider you have a website about movies, with this the general URL is:
https://example.com/movies/[id]
your website has about 200K movies and they build in build time or run time. so you build about 400K files (.json & .html) on your disk. your movies page doesn't change continuously, maybe a typo occurred or site visitors add comments then your page should update.
Now how we can update only that page and avoid build all 200K pages again? Is it clear? let me give you an example:
NextJs build all 200K page and we want to change the description of a movie with id 60, so... What should we do?
We have 3 ways:

  1. build all the pages again! (worst idea! build 200K pages just for one page)
  2. use Incremental Static Re-generation (worse idea! because it builds all the page continuously but change frequency of movie page is constant maybe change every second may change once in a year).
  3. remove 60.html and 60.json file from build folder and restart the nextjs server! (a bad idea! we need to restart nextjs because it serves files from memory);
    all of these ways are inefficient and useless.

Suggested solution

Nextjs needs to provide an API to get a route and update/remove it.
for example:

import { ssgUpdate, ssgPurge } from "next";
/*
.
.
.

*/
// for update
ssgUpdate('movies/[id]','movies/60').then(res=>{
    console.log('successful')
}).catch(err=>{
    console.log(err)
});

//for remove
ssgPurge('movies/[id]','movies/60').then(res=>{
    console.log('successful')
}).catch(err=>{
    console.log(err)
});

If ssgPurge called that page files removed from disk and memory;
If ssgUpdate called that page regenerates and if it's successful it updates memory and disk;

Thanks

Most helpful comment

Hi @pklepacki ,
Why we need to wait for a request?
When a comment received your back-end knows that this page should change. it's exactly the time that we can build new page and we don't need to wait someone request this page and then build it.

All 7 comments

Same issue here.
We want to update a specific static page in case of occurrence of an event (e.g. when a specific message is gotten on the message broker), but there isn't any solution to do that. The suggested solution solves our problem too 馃憤

In the case of ISR, Next.js does not rebuild every page every time a change occurs, it only rebuilds the page when a user navigates to it and only if the page changed.

When would your functions be called ? ISR seems to do exactly the same without having to manually call these functions.

Hi @Kroonax
There is difference between what i want and you solution!
consider you have static page about movie. the sample URL is:
https://example.com/1/god-father
This page has about 1 million visitors in day.
i want to update it once when an event occurs for example when page received a comment. not all the time.
in your solution the page builds many times! but i need only once regeneration.
and thought about situation that you have about 100 thousands movie pages.

My understanding of this feature is that it regenerates only after a page changed. So on each request page is checked for newer version (with comment in your example). User is served a stale version and newer is build in background. Next time any other user requests it, the newer version is served statically each time, until there is again newer version.

Hi @pklepacki ,
Why we need to wait for a request?
When a comment received your back-end knows that this page should change. it's exactly the time that we can build new page and we don't need to wait someone request this page and then build it.

@MohammadPCh
Hi, I found following blog.
I hope that these features will be comming.

https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration

Up next, we will be working on a supplemental RFC to address two additional incremental static generation capabilities:

  • Re-generating and invalidating multiple pages at once (like your blog index and a certain blog post)
  • Re-generating by listening to events (like CMS webhooks), ahead of user traffic

@junkboy0315
Thank Shota Tamura,
I handle it with SSR and my own cache :)
If you interested i can describe how i handle it.
Good luck.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

knipferrc picture knipferrc  路  3Comments

jesselee34 picture jesselee34  路  3Comments

pie6k picture pie6k  路  3Comments

swrdfish picture swrdfish  路  3Comments