next/link with "optimistic" route changing

[jonahallibone]

Hi all -- I wanted to add a suggestion for the operation of next/link and the general next/router. This may not be a compatible change for reasons I am not privy too, but nonetheless I wanted to share this idea.

Currently the behavior of next/link is as follows:

• depending on the prefetch setting, a <Link /> on the page fetches SSG'd pages when they enter the viewport, or on hover
• a link is clicked, and the page requested is navigated to
• the url is changed

The UX with this, to me, seems to break convention

• For those of us (myself) who can't use the default prefetch behavior, grabbing SSR'd or SSG'd pages with fallback: blocking can take quite a while to navigate to. Without NProgress or the like, there's not indication to the user that a link was clicked and information is being fetched
• The UX seems to be pretty standard on websites like Github, YouTube, and Facebook, Google Products,
• The inclination to reload when a page is hanging, mid load, would land the user back on the page they started forcing them to relocate and interact with the link
• This matches the behavior of other sites built with React not using Next.js (those using reach router, react-router, etc).
• Purely conjecture, but I'd be willing to bet a lot of users glance at the URL bar when they click a link to establish their action registered
• The only way I could think to create this behavior is to write a wrapper around <Link /> that fires a shallow change with useRouter on click, which doesn't seem ideal

My suggestion is to have an option to allow an "optimistic" route change to be pushed to the history stack, regardless of page loaded status. This would allow for a routing experience that emulate most websites users are most used to interacting with, and ones I think many developers look to emulate.

Let me know your thoughts!

[olegyablokov]

Hello, +1. I am working on my website using Nextjs and I also see that the current page is not updated until the new page has been fully SSRed with all the data and given to the client. Adding loading.js or using <Suspense fallback={...}> didn't help.

On the other hand this feature seems to be so straightforward I think I am missing something... Anybody help please?

[Inviz]

Quite puzzled on what to do here. My website has animations to hide the navigation delay, but now i can't leverage it