I have created really big project with page that have over 800,000 variants. In my current React project I just access the url parameter on www.mywebsite.com/my_page/:id and I use useEffect. Here is simplified example:
url= `${apiAddress}/my_route?id=${props.match.params.id}`
useEffect(() => {
axios({
method: "get",
url: url,
timeout: 60 * 4 * 1000, // Let's say you want to wait at least 4 mins
headers: {
Authorization:......,
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
setResults(res.data);
})
.catch((err) => {
//some error handling....
});
}, [url]);
So this is working pretty fine. The situation is that I fetch here the response every time I open the pages but the information for every single ID is the same for at least one year. So there aren't any changes for at least for a year. It usually takes 5-6 seconds to load the page with the info and I am wondering is it possible with Next.js pre-fetching to pre-build all the pages and to take nothing to load them? I know number 800,000 is quite big so that's why I am asking. If I use getStaticProps I am able to do similar stuff for much less number of ids but if it tooks 5 seconds to fetch data for 1 page and they are 800,000 does this mean that I would have to wait for build 800,000x5 = 46 days?
Thanks in advance!