getStaticProps fails the frontend build instead of leaving page to be built on-demand
Unanswered
Red-throated Pipit posted this in #help-forum
Red-throated PipitOP
Hello! At work we're trying to build some static pages. Our setup would be something like this
The question now - we're using Apollo Client to fetch here. Our backend is separate from the frontend and uses GraphQL. If the fetch call fails it will throw an error. Ideally, we would like to let the error unhandled and essentially retry building the page once a user visits it. For some reason, if a page fails, the entire build will fail. We don't want to throw 404 on these, we want to retry building. Is this achievable at all?
** Using Next.js 12.3.4
export async function getStaticPaths(){
const paths = await getPlaylistsPaths();
return paths;
}
export async function getStaticProps({ params }){
const playlist = await getPlaylist(params.id);
return {
props: {
playlist
}
}
}The question now - we're using Apollo Client to fetch here. Our backend is separate from the frontend and uses GraphQL. If the fetch call fails it will throw an error. Ideally, we would like to let the error unhandled and essentially retry building the page once a user visits it. For some reason, if a page fails, the entire build will fail. We don't want to throw 404 on these, we want to retry building. Is this achievable at all?
** Using Next.js 12.3.4
4 Replies
if you return
fallback: 'blocking' from getStaticPaths, it will defer the building of pages not included in the paths array to be on-demand: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths#generating-paths-on-demandRed-throated PipitOP
Okay, thats good - but the thing is that I do want to render every page statically. The problem I have is that the fetch from the server could throw an error on getStaticProps. I would then want to defer the build process of this page and instead leave it as it had
Our root problem is that these pages are quite big and the server is suffering to handle all the requests at once. I know that scaling the server or making the requests lighter would be the best scenario, but management doesn't think the same 🥲
fallback: 'blocking' and try to build again when a user visits the page. Our root problem is that these pages are quite big and the server is suffering to handle all the requests at once. I know that scaling the server or making the requests lighter would be the best scenario, but management doesn't think the same 🥲
the page would still be static with fallback. do you mean you want the page to load instantly when first acessing it?
I'm afraid there's not really a solution here since next.js has no "retry" option for static generation. maybe you could wrap your API requests that are failing into a small API that retries the requests for you