fallback: true - fallback page could optionally load ASAP when next.js Link is clicked

Feature request

Scenario.

1. We have a page /product/[handle] with fallback: true.
2. Let’s say /product/123 is not yet generated statically.
3. We have a page /collection with next link to /product/123, no prefetching, or haven’t prefetched yet.
4. We click on a link.
5. Nothing is happening until page is generated and then page reloads. Fallback page wasn’t loaded at any point in time.

Last point could have optional alternative behaviour: showing fallback page ASAP.

Is your feature request related to a problem? Please describe.

We already designed a loading page for when router.isFallback = true. I want to reuse this loader for next.js reloads when static site is being generated.

Now after clicking next.js link I have either 1-2 seconds moment of “nothing happening” which is bad UX. I cold build a loader on router events, but then I’d have to maintain two loading states instead of one.

Describe the solution you’d like

A flag for Link? Something like showFallbackImmediately? Could default to false to preserve backward compatibility.

Potentially it could be a trait of a page too.

[danielcolinjames]

I actually thought this was how fallback: true already worked, but just implemented it and realized it doesn’t work like that… Did anyone figure out any way to achieve this? I really wanted to eliminate that 1-2 seconds of no-visual-feedback loading time when clicking a Next <Link /> and getStaticProps has to build the page…

[danny-dang]

In my case, router.isFallBack doesn’t work really well for me. The page still freeze for about few seconds before redirecting to a new route. After several hours of reading docs. I found these 2 events from router: routeChangeStart and routeChangeComplete Basically you can listen to when the page has finish redirecting.

I’m doing something like this

  const router = useRouter()
...

  useEffect(() => {
    const handleRouteChange = (url) => {
      dispatch(setLoading(true))
      console.log(
        `App is changing to ${url} `
      )
    }

    const handleRouteComplete = (url) => {
      dispatch(setLoading(false))
      console.log(
        `App changed to ${url} `
      )
    }

    router.events.on('routeChangeStart', handleRouteChange)
    router.events.on('routeChangeComplete', handleRouteComplete)

    return () => {
      router.events.off('routeChangeStart', handleRouteChange)
      router.events.on('routeChangeComplete', handleRouteComplete)
    }
  }, [])
  
  if(isLoading){
     return <Loading/>
  }
 ...