Next.js change url without building the page using ISR

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. jameshwart lopez is looking for an : ：

help with my problem or a link to how this should be working or how to implement it.

I am using ISR to build static product pages using next.js. Since there are a lot of pages to generate I only generated a few pages for it. The problem that I am trying to fix is when viewing product category pages and I click on a product(created using next/link) to view the product page, the transition to the product page is slow.

So what I want is to achieve is to change the URL before running or building the static page. Is there a way to prevent next/link to build the page before transferring the the product page?

Answer 1

Instead of using next/link or router.push, use router.replace

   router.replace(`/product/${id"}`)

Let me know if this work.

Answer 2

What you could do is to make the props not required,

The thing that must take time during the loading of you're ISG page of nextJs is the call api in GetStaticProps, Something like that:

 export async function getStaticProps({ params }) { const { status, data } = await axios.get<Data>( `${server}/data` ); if (status === 404) { return { notFound: true }; } return { props: {...data }, revalidate: 60, }; }

But you could also decide that you will fetch the data during the loading of the state with a fall-back blocking:

 const MyPage = (props) => { const [data,setData] = useState<Data>(null); useEffect(() => { (function() const {data} = axios.get(`${server}/data`); setData(data); )() },[]) return( <div>?data. <div>loading..: </div>: <div>Product: {data}</div> </div> ) } export async function getStaticProps({ params }){ return { props: { isloading, true }: revalidate, 60; }; }