How do we pre-fetch the page using next/router . Tried some way but none worked.

[lakshmajee]

I have seen a feature available with next/router to pre-fetch some of the pages on the fly. (Link from next/link internally uses this). and Link is not a choice for my requirement.

By referring to the example available at documentation, I've came up with following piece of code

try {
   await router.prefetch(
      '/[organization]/reports/[id]/view',
      `/${organization}/reports/${reportId}/view`,
   );

    // navigate to page
   router.push(`/${organization}/reports/${reportId}/view`); // <------------------- not worked
   router.push(                                           // <----------------------- not worked
       '/[organization]/reports/[id]/view',
       `/${organization}/reports/${reportId}/view`
   );
} catch (err) {
   console.log('Pre-fetch error ', err);
}

In the above snippet neither of them worked!! router.push(path, as) & router.push(path) .

Am i doing anthing wrong

[jamesmosier]

Hi @ananth-minions.

Aside from that, in your example the second .push attempt should've worked:

   router.push(
       '/[organization]/reports/[id]/view',
       `/${organization}/reports/${reportId}/view`
   );

when you say they didn't work, what didn't work about them? Did the page not transition? Also do you happen to have a repository with some of the code you could share?

[jamesmosier]

Sorry, it looks like it does return a promise I was looking at the wrong prefetch method.

But yes, omitting the as will cause a full page refresh. But prefetch only works in production so that is why you are seeing oddities.

You'll see that there is a check for NODE_ENV !== 'production' below and that just returns, it does not resolve the promise

next.js/packages/next/next-server/lib/router/router.ts

Lines 817 to 820 in e4e3ad3

	// Prefetch is not supported in development mode because it would trigger on-demand-entries
	if (process.env.NODE_ENV !== 'production') {
	return
	}

[lakshmajee]

Oh! yes, you're right! Ignoring as causes entire page to reload!. Suppling as to push solved my issue.!!

Thanks @jamesmosier

[lakshmajee]

Sorry reopening this issue, as I've got an alternative solution with as.
But what if we want to programmatically pre-fetch the page with router.prefetch and then trigger a redirect with router.push()? (actually, the original question is this, but in the middle I've got the solution to m current problem)

[jamesmosier]

You could check for the NODE_ENV before performing the prefetch

if (process.env.NODE_ENV === 'production') {
  // only resolves in production
  await router.prefetch(
    '/[organization]/reports/[id]/view',
    `/${organization}/reports/${reportId}/view`
  );
}

router.push(
  '/[organization]/reports/[id]/view',
  `/${organization}/reports/${reportId}/view`
);

[lakshmajee]

Oh! I missed that previous comment !!
Marked as the answer:+1: