Update a static page by event #16488

MohammadPCh · 2020-08-23T08:59:26Z

MohammadPCh
Aug 23, 2020

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:

build all the pages again! (worst idea! build 200K pages just for one page)
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).
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

Answered by leerob

Feb 18, 2022

I'm incredibly excited to share that Next.js 12.1 was just released, which includes on-demand Incremental Static Regeneration! We know many of you have been looking forward to this for a while, including myself, and I'm so happy it is here.

View full answer

mdehghani · 2020-08-25T10:23:26Z

mdehghani
Aug 25, 2020

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 👍

0 replies

ysvahn · 2020-08-26T07:30:44Z

ysvahn
Aug 26, 2020

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.

0 replies

MohammadPCh · 2020-09-01T08:28:04Z

MohammadPCh
Sep 1, 2020
Author

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.

0 replies

devklepacki · 2020-09-01T18:47:57Z

devklepacki
Sep 1, 2020

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.

0 replies

MohammadPCh · 2020-09-02T07:07:24Z

MohammadPCh
Sep 2, 2020
Author

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.

0 replies

tam315 · 2020-11-07T04:36:28Z

tam315
Nov 7, 2020

@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

1 reply

michrome Feb 2, 2021

Cross linking this to #16112 which is a request for the same: regeneration based on an event, to cut short the wait for a revalidation period.

MohammadPCh · 2020-11-08T17:39:14Z

MohammadPCh
Nov 8, 2020
Author

@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.

2 replies

techstarterau Nov 29, 2020

Hi Mohammad - I would be VERY interested to hear how you resolved this. Been waiting every day for a solution, I'm ready to just hack together anything that works.

lorenzosignoretti Feb 2, 2021

Hi @MohammadPCh, +1. Would you be willing to share your solution?

rodbs · 2020-11-24T19:10:05Z

rodbs
Nov 24, 2020

Same here. I'd love to update pages based on listening to events (CMS webhooks)

0 replies

Nick-Mazuk · 2021-02-07T22:37:27Z

Nick-Mazuk
Feb 7, 2021

It would be absolutely great to have this, it would solve a ton of headaches and tradeoffs on my sites.

1 reply

lorenzosignoretti Feb 10, 2021

How are you currently handling the issue? Did you find any useful workaround?

FSaldanha · 2021-02-23T14:43:35Z

FSaldanha
Feb 23, 2021

Here's a provisional solution: #22384

0 replies

antonioberetini · 2021-03-28T19:54:09Z

antonioberetini
Mar 28, 2021

Same here this is a huge gap from feature perspective specially if you pair Next with a headless CMS where content folks often modify and create new content.

0 replies

kristijorgji · 2021-09-07T08:07:12Z

kristijorgji
Sep 7, 2021

Hi, looking for this feature too.
Any updates or plans to have this ?

3 replies

kristijorgji Sep 8, 2021

In the meanwhile would like to share my current non official solution to this , while waiting for vercel team to officially provide a proper hook system.

I found that just deleting the page statically generated data (or via isr) will force next to re-render it

rm .next/server/pages/${locale}/posts/${postId}.json
rm .next/server/pages/${locale}/posts/${postId}.html

on next request will force next to rebuild it with latest data 🗡️ 😄 and works like expected.

It is working fine for a pet project, where only one web server is serving all requests.
For distributed load with multiple servers, can still build something forcing all servers to delete this particular page data but would rather wait and look forward to next official solution to this.

IMO they can easily provide a hook for it, or cli command like next invalidate url that does something similar as I am doing now on redis subscribe event (post update event)

FSaldanha Sep 8, 2021

Besides these static files, data is saved in the internal cache. You should purge it too to make sure you won't serve stale content (see #22384)

kristijorgji Sep 9, 2021

@FSaldanha thnx for info, how can I do that ? Will check linked issue
Is there any way to do that without using custom server.js (also would prefer to have server.ts in our project)

kokoskiwi · 2021-10-07T19:41:46Z

kokoskiwi
Oct 7, 2021

we really need that feature
https://www.reddit.com/r/nextjs/comments/q0rla1/can_i_tell_nextjs_if_a_site_needs_to_get/

0 replies

alexandrosk · 2021-12-29T17:39:32Z

alexandrosk
Dec 29, 2021

This is really important, not sure why its not stressed our aalready!
I can only clear the cache when rebuilding the product -.-

0 replies

antonioberetini · 2021-12-29T17:43:16Z

antonioberetini
Dec 29, 2021

Maybe automatically hitting the URL when content changes will do the trick 😕 Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Alexandros Koukis ***@***.***> Sent: Wednesday, December 29, 2021 11:39:48 AM To: vercel/next.js ***@***.***> Cc: Tony Beretini ***@***.***>; Comment ***@***.***> Subject: Re: [vercel/next.js] Update a static page by event (Discussion #16488) This is really important, not sure why its not stressed our aalready! I can only clear the cache when rebuilding the product -.- — Reply to this email directly, view it on GitHub<#16488 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APUUMIA6D4SZJ4Y5RBRKSBLUTNBWJANCNFSM4UGZ7AXQ>. You are receiving this because you commented.Message ID: ***@***.***>

0 replies

antonioberetini · 2021-12-29T17:50:39Z

antonioberetini
Dec 29, 2021

@enes-get-local sounds like a good challenge for you 😜 to work on

0 replies

meotimdihia · 2021-12-30T04:29:04Z

meotimdihia
Dec 30, 2021

Next.js's developer promised he won't forget this problem:
#11552 (comment)
We have to wait for it.

leerob 23 days ago
No update - I promise I'm not ignoring y'all, it's just still being worked on! What we originally thought was a good option took a bit more iteration. We are still really excited about this and want to improve ISR further. The reason for the delay isn't due to lack of effort, but just ensure we get the APIs and design correct 👍 Expect a public RFC for this, too.

1 reply

antonioberetini Dec 30, 2021

A year before and it is still not here... Sure they are working on it

leerob · 2022-02-18T03:28:52Z

leerob
Feb 18, 2022

I'm incredibly excited to share that Next.js 12.1 was just released, which includes on-demand Incremental Static Regeneration! We know many of you have been looking forward to this for a while, including myself, and I'm so happy it is here.

5 replies

demonhunter3333 Mar 16, 2022

How do we update pages on dynamic routes with on-demand ISR?

lorenzosignoretti Mar 16, 2022

@demonhunter3333 Depending on what you need to do, a query param on your revalidation API route can do the trick (see this gist). More here.

demonhunter3333 Mar 16, 2022

@demonhunter3333 Depending on what you need to do, a query param on your revalidation API route can do the trick (see this gist). More here.

Thank you!

kristijorgji Mar 16, 2022

@demonhunter3333
Your blog post is not correct I think the unstable revalidate does more then just calling fetching page.
It ignores revalidate prop which is very good and excepted behavior from me.
If you make direct call to the page, and have let say revalidate: 120 but only 30 seconds passed you don't refresh cache

lorenzosignoretti Mar 16, 2022

@demonhunter3333

Your blog post is not correct I think the unstable revalidate does more then just calling fetching page.

It ignores revalidate prop which is very good and excepted behavior from me.

If you make direct call to the page, and have let say revalidate: 120 but only 30 seconds passed you don't refresh cache

You're right, I'll clarify that. Thanks for pointing this out

Update a static page by event #16488

Uh oh!

Uh oh!

Feature request

Problem

Suggested solution

Replies: 18 comments · 13 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MohammadPCh Sep 1, 2020 Author

Uh oh!

Uh oh!

Uh oh!

MohammadPCh Sep 2, 2020 Author

Uh oh!

Uh oh!

Uh oh!

MohammadPCh Nov 8, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 18 comments 13 replies

MohammadPCh
Sep 1, 2020
Author

MohammadPCh
Sep 2, 2020
Author

MohammadPCh
Nov 8, 2020
Author