Generating a new static page and route on-demand
Unanswered
Rainbow trout posted this in #help-forum
Rainbow troutOP
TL:DR
just like on-demand Revalidation in ISR, is it possible to generate new page/path on demand? or what should be the right solution to achieve this?
I'm building an e-commerce web app. I want each product page to be a static page for SEO reasons.
As seen in the first image in the attachments, I'm using getStaticProps and getStaticPaths in pages/item/[id] to ensure the pages are generated at build-time.
My problem though is that when a new product is added, the product page is not available when navigated to - because it hasn't been built, but the new item can be found on the home page that is using client-side rendering.
Adding
After reading the docs, it seems like the on-demand revalidation can solve this issue, so I implemented it as seen on the second image. When a new item is added, I send a webhook to the revalidate endpoint as seen on the third slide. But once again, since the page and route are not yet available at the time, this results in an error as well.
The problem I'm facing in a nut-shell is how to build a new page in the background when an item is added since I have plenty of free build time (besides 100s of static pages are generated at build time, so why can't build one on-demand). I desperately need a solution as I need to lunch my product. Thanks
just like on-demand Revalidation in ISR, is it possible to generate new page/path on demand? or what should be the right solution to achieve this?
I'm building an e-commerce web app. I want each product page to be a static page for SEO reasons.
As seen in the first image in the attachments, I'm using getStaticProps and getStaticPaths in pages/item/[id] to ensure the pages are generated at build-time.
My problem though is that when a new product is added, the product page is not available when navigated to - because it hasn't been built, but the new item can be found on the home page that is using client-side rendering.
Adding
revalidate as seen didn't achieve this, even though the ISR docs page makes it seem like it should - I think that only revalidates the data for the existing pages when they change but doesn't build a new page/path when not available. For context, when the new items' product page is navigated to it loads for a while and result in a 505 timeout page and on vercel it shows that the 10s timeout elapsed.After reading the docs, it seems like the on-demand revalidation can solve this issue, so I implemented it as seen on the second image. When a new item is added, I send a webhook to the revalidate endpoint as seen on the third slide. But once again, since the page and route are not yet available at the time, this results in an error as well.
The problem I'm facing in a nut-shell is how to build a new page in the background when an item is added since I have plenty of free build time (besides 100s of static pages are generated at build time, so why can't build one on-demand). I desperately need a solution as I need to lunch my product. Thanks
167 Replies
@Dunker are you on pages dir or app dir
Rainbow troutOP
pages dir
@Rainbow trout pages dir
Dunker
why you are trying to do this, i mean when you add some product it s updating database and showing new data, so that new product page being generated as you add more
@Dunker why you are trying to do this, i mean when you add some product it s updating database and showing new data, so that new product page being generated as you add more
Rainbow troutOP
Yeah, I want a new static page to be built in the background as the product page when a new product is added with the data, in addition to all other static pages that has been generated at build-time
Dunker
yep, but i am saying its already happening like that, thats why its generation
Dunker
for example when you have /product/1, when you add new product, at product list its link becoming product/2, ... n
for on demand route, its same. when you request a route with id, its routing you to that page in structure of [id]
@Rainbow trout Yeah, I want a new static page to be built in the background as the product page when a new product is added with the data, in addition to all other static pages that has been generated at build-time
It won't be static until you re-build with that new data, until then using dynamic routes it'll be a Dynamic Page. If you want, you can setup an action to trigger a new build when a new product is added.
Dunker
it would be overkill imo, also if am not wrong its related with deployed website
@Plague It won't be static until you re-build with that new data, until then using dynamic routes it'll be a Dynamic Page. If you want, you can setup an action to trigger a new build when a new product is added.
Actually, reading the pages router documentation about getStaticPaths, it seems that once that new item page is swapped from the fallback to the newly rendered page it'll be added to the list of pre-rendered pages and will be served like other pages pre-rendered at build time. Seems like you should investigate this approach. @Rainbow trout https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-true
Rainbow troutOP
thanks @Dunker and @Plague
@Rainbow trout thanks <@1017915332305879061> and <@683517071749021779>
No problem, of course for the SEO reasons you described since the page will be new it'll take time to be indexed accordingly, but, it should eventually be there.
Dunker
i have to confess that next is best thing i ve ever seen so far in this industry
sometimes we re complaining from its things but, its best thing ever made in this field for react
when you go out, there is no really much well tools for react
for most of things, its rapidly being like "only tool i use is just next, no more"
@Plague No problem, of course for the SEO reasons you described since the page will be new it'll take time to be indexed accordingly, but, it should eventually be there.
Rainbow troutOP
thanks bro. I've actually explored all of that in the docs earlier. I think by problem with when I set
I hope that works now I'm trying to redeploy again to see if it works on vercel as expected
fallback: true is I failed to handle the rendering for router.isFallback.I hope that works now I'm trying to redeploy again to see if it works on vercel as expected
for real bro @Dunker I couldn't agree any more. I feel like every Idea of next.js and what they're trying to achieve is straight-forward and always like the best in the industry for that use case - baring the fact that we'll still always have to battle with javascript-related prolems like these 😂
@Rainbow trout thanks bro. I've actually explored all of that in the docs earlier. I think by problem with when I set `fallback: true` is I failed to handle the rendering for router.isFallback.
I hope that works now I'm trying to redeploy again to see if it works on vercel as expected
Yeah no problem, sometimes it's hard to catch all the fine print 
@Rainbow trout for real bro <@1017915332305879061> I couldn't agree any more. I feel like every Idea of next.js and what they're trying to achieve is straight-forward and always like the best in the industry for that use case - baring the fact that we'll still always have to battle with javascript-related prolems like these 😂
Dunker
for a sec, imagine a web industry without next
But I agree on the Next.js being the best thing to happen to the industry regarding react.
Been a fan ever since I first used it, haven't looked back since.
Dunker
i have a lot complains about that for sure, but these are not preventing me to use it on my all projects
Oh yeah there is always room for improvement, and I fully believe that they will improve and quickly, they've proven that much to me already.
Dunker
also i realized that, nearly all of web frameworks doing same thing with similar approach
i remember that 13.5 solves 500 bugs, i didnt have any bugs with it tbh
Yeah there are very slight differences between each, and because of that I always tend to choose the one that has the biggest community around it.
Dunker
its even same with frameworks outside of javascript
web architecture itself is not that simple like req, res
if you wrote a frontend with a lang other than js, you can get me better 😄
Rainbow troutOP
of course Next.js are moving very fast in that area - to improve and catch up with all of the problems. version 14 is out, I guess, and I haven't even looked at it or the docs. LOL
Dunker
i could say that so far i was living at history with old versions
after that 14 and new docs, i am updating all of my toolset to latest versions
Dunker
there is Bun also
Rainbow troutOP
will it be easy and straight-forward to just migrate?
Dunker
from where to what
Rainbow troutOP
next js - I mean the update to version 14
Dunker
yep but from which version
@Rainbow trout thanks bro. I've actually explored all of that in the docs earlier. I think by problem with when I set `fallback: true` is I failed to handle the rendering for router.isFallback.
I hope that works now I'm trying to redeploy again to see if it works on vercel as expected
Somali
Did you find out what the issue was?
@Dunker yep but from which version
Rainbow troutOP
I thught you said you're on an older version and will like to update
@Somali Did you find out what the issue was?
Rainbow troutOP
I used that ISR strategy suggested by @Dunker - https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-true
I set fallback to true, then set a loading page for if
I set fallback to true, then set a loading page for if
router.isFallbakc I just deployed now and I'm still having a problemSomali
Ah got it that makes sense. What’s the issue you’re getting now?
Rainbow troutOP
as said on the page, the new product page didn't result in a 404 immediately but the loading component get rendered while waiting for the product page to be server-rendered before hydrating the result. The problem now is that vercel never let it finish building the page before timing out. for free account, they have a maximum of 10s to run
@Dunker shouldn't that be able to finish in less than 10s though? any suggestion on how I can go about it? we don't have the monet to start paying the $20 per month yet - we aint profitable yet
@Rainbow trout I thught you said you're on an older version and will like to update
Dunker
no i was at older version and updated already
@Rainbow trout I used that ISR strategy suggested by <@1017915332305879061> - https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-true
I set fallback to true, then set a loading page for if `router.isFallbakc` I just deployed now and I'm still having a problem
Dunker
i havent suggested anything 😄
Rainbow troutOP
lol - it seems to work to some extent
Dunker
the thing you want is not exists in js
Rainbow troutOP
could it be optimization from my end? or is firebase just slow?
should I avoid fetching recommendations inside of getStaticProps at the same time?
should I avoid fetching recommendations inside of getStaticProps at the same time?
Dunker
😂
the thing is not priced is being always low-end 😄
@Dunker 😂
Rainbow troutOP
lol 😂 this is funny
why has none of you gotten into this specific kind of scenario
why has none of you gotten into this specific kind of scenario
Dunker
you cant eat a fruit without knowing what it is 😄
but the thing i stuck on, the thing you are seeking is the normal behaviour of next
i didnt get the part of why you need all that static pages at every render
add new product, revalidate path, and it ll show on your page
@Dunker add new product, revalidate path, and it ll show on your page
Rainbow troutOP
but you saw my codebase
what am I doing wrong?
what am I doing wrong?
Somali
Try fetching data concurrently
const [product, related] = await Promise.all([
getSingleItem(params.id as string, "items"),
getLimitedItems(product.category as string)
]);
const [product, related] = await Promise.all([
getSingleItem(params.id as string, "items"),
getLimitedItems(product.category as string)
]);
Also is there a reason you’re stringifying then parsing the products again? Why not just do
product: product,
related: related,
product: product,
related: related,
@Rainbow trout but you saw my codebase
what am I doing wrong?
Dunker
make revalidate: 0, and fallback: false
@Dunker make revalidate: 0, and fallback: false
Somali
Why would this change anything?
Dunker
cuz revalidate: 20 means its generating a new page after 20 sec
say when prod added now, its reflecting after 20 sec
so it takes more than 10 sec to rebuild that page
@Somali Also is there a reason you’re stringifying then parsing the products again? Why not just do
product: product,
related: related,
Rainbow troutOP
I'm using firebase and firebase doesn't return json - that's the solution I've found to work with firebase
@Dunker make revalidate: 0, and fallback: false
Rainbow troutOP
fallback to false?
that'll mean a 404 is returned immediately - it won't build a new page!
that'll mean a 404 is returned immediately - it won't build a new page!
Dunker
its not building a new page tho
thats why you are looking at wrong direction
Somali
I think he wants to build a new page tho am I right?
@Rainbow trout but you saw my codebase
what am I doing wrong?
Somali
Have you tried commenting our related items query just to check? I want to see if you’ve got a bottleneck somewhere and I have a feeling it’s somewhere in getSingleItem/getLimitedItems
Dunker
next cannot do that
its like having [item] at root
Somali
What exactly would you say ISR is doing then? If the page didn’t get timed out wouldn’t it have built as expected?
Dunker
yep
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: 'blocking' } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}
export default Blog// We'll pre-render only these paths at build time.
@Somali I think he wants to build a new page tho am I right?
Rainbow troutOP
exactly
@Dunker yep
Somali
I get he’s trying to server render here but is there a way we can get around the timeout he’s runnning into?
Rainbow troutOP
exactly. I switched completely to server-side-rendering earlier and nothing get's rendered before timing out - and I thought that's also not good for user experience - even though I could afford more time. That was why I'm defaulting to ISR - it's best for SEO as well
also at new version of next, there is generateMetaData for SEO
and partial-prerendering
@Dunker burning cash 😂
Rainbow troutOP
Somali
Might just have to take the L until you’re ready to pony up $20/mo
Somali
Damn shame
Rainbow troutOP
want to have a look at the page?
https://www.selleasi.com/
every other product page loads, but watch the behavior of the first one which is the latest item - hasn't been built
https://www.selleasi.com/
every other product page loads, but watch the behavior of the first one which is the latest item - hasn't been built
Dunker
aha
this changes everything
Rainbow troutOP
okay......
Dunker
when i hover on items, am not seeing links
Rainbow troutOP
wait.....
@Dunker when i hover on items, am not seeing links
Rainbow troutOP
there are not links. Navigation is handled programmatically - that is to prevent navigation when Favorite icon is clicked
const handleClickAction = () => router.push(
/item/${product.id});Dunker
yep but URL is not changing
wherever i click, i am still on /
Rainbow troutOP
no it navigates. but on the very first product, you have to wait for a while
Dunker
but waiting too much
and i have errors at console
Rainbow troutOP
exactly!
Dunker
Error: Failed to load static props
Rainbow troutOP
it waits for long - apparently it's building, it then times out! 🤦â€â™‚ï¸
Dunker
its building what, you are already on deployed version
nav should instant
looks like its firebase error
cuz at network tab firebase request is not exists
Rainbow troutOP
click on other items
Dunker
no still same
Failed to load resource: the server responded with a status of 504
@Dunker looks like its firebase error
Rainbow troutOP
okay.... 🤔
Dunker
Error: Failed to load static props
you are getting data in getStaticProps
after this, i am seeing black screen with client side exception
now its looking like i have problems 😂
X-Vercel-Error:
FUNCTION_INVOCATION_TIMEOUT
FUNCTION_INVOCATION_TIMEOUT
wondering that are you having same problems at dev env
@Dunker now its looking like i have problems 😂
Rainbow troutOP
noooo please 😂
If you can't help me I doubt if I can find help anywhere else ðŸ˜
@Dunker wondering that are you having same problems at dev env
Rainbow troutOP
no I'm not having issues on dev
Somali
On the edge of my seat for this one
Rainbow troutOP
@Somali did you open the page?
Somali
Loads the images on the first visit but on refresh I’m just stuck on loading. Weird site.
Don’t have the time to look into this today sadly
How has the site not rebuilt even one time? I thought you had commented out the related posts function and redeployed earlier? This post would have been rebuilt alongside the other pages
We shouldn’t be server rendering this page anymore.
Rainbow troutOP
do you mean the home page?
For the product pages - yes, the earlier ones have been rebuilt - so I added a new product to see the result that we are looking for again
so, please if you want to help me look at it again, refresh the home page. For the product all the product page opens instantly when you navigate to them apart from the first one
Somali
When I asked you to comment out the related items section of your code did you not redeploy to see if it did anything?
Because if you did this product page would have been rebuilt..
Rainbow troutOP
I did
and then added a completely new product
to test again
do you get now
Somali
So only the most recent product is 404’ing? Every time?
Rainbow troutOP
exactly
Somali
Have you tried adding two new products?
Rainbow troutOP
ok let me do that
Somali
I want to see if both fail to load
Alright thanks
Do you not see any console errors when you run next build / production version of the site locally? Or even dev? That’s weird
I’m on mobile so I can’t check but your probably accessing data that isn’t available or is being mismatched somewhere
Rainbow troutOP
I just added a cap
@Somali Do you not see any console errors when you run next build / production version of the site locally? Or even dev? That’s weird
Rainbow troutOP
ok let me build locally
Somali
You haven’t rebuilt the site right?
Neither of these two products load
Rainbow troutOP
no - neither of the two loads
anyways I just run
vercel build@Rainbow trout could it be optimization from my end? or is firebase just slow?
should I avoid fetching recommendations inside of getStaticProps at the same time?
Somali
Can you set fallback to ‘blocking’
@Rainbow trout anyways I just run vercel build locally now and the build failed
Somali
What errors are you getting
Rainbow troutOP
@Somali Can you set fallback to ‘blocking’
Rainbow troutOP
ok let me try that
Somali
Why are you getting a permission error all of a sudden
I’d exit out of your other terminal
@Somali Why are you getting a permission error all of a sudden
Rainbow troutOP
I think it's windows and their non-sense
@Somali Can you set fallback to ‘blocking’
Rainbow troutOP
this will make the new page to default to server-side rendering - I've never been successful with that. Let ne try again thoug
Somali
How did you expect this page to be accessible if not via SSR? The page hasn’t been built so you’d 404
@Rainbow trout no I'm not having issues on dev
Dunker
Can you share your repo with me
Or we can look it at live share session on vscode
Rainbow troutOP
yes yes thank you so much @Dunker
just give me a minute
just give me a minute
Rainbow troutOP
shout out to @Dunker , this issue is solved now
after a loooong thread of over 165 messages.
thank you so much everyone and don't forget to jump in once again when I bring another problem - I'm so grateful
thank you so much everyone and don't forget to jump in once again when I bring another problem - I'm so grateful
@Rainbow trout shout out to <@1017915332305879061> , this issue is solved now
congrats! to officaly mark it as solved i need a message, do you have one that summarises what was needed or should i just mark this?
Somali
What was the issue afterall? lol don't leave us hanging