Fallback page is not displayed until getStaticProps is done

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro for Workstations Binaries: Node: 14.18.3 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.4 react: 17.0.2 react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome - 99.0.4844.84

How are you deploying your application? (if relevant)

Bug is detected on local and on Vercel

Describe the Bug

The fallback page is not displayed while getStaticProps is running.

The fallback page is well displayed if the page is directly accessed without routing involved (aka: open directly the page in a new tab).

Expected Behavior

Fallback page should be displayed instantly even if getStaticProps is running.

To Reproduce

Add page “/isr-src.tsx”

import React from 'react'
import Link from "Next/link";


export async function getStaticProps() {
  return {
    props: {}
  }
}

const Page = function () {
  return <div>
    Vercel test ISR - source page
    <div>
      {
        Array.from(Array(50).keys()).map(i => <Link href={`/isr-target/${i}`} prefetch={false} key={i}>page {i}</Link>)
      }
    </div>

  </div>
}
export default Page

Add page “/isr-target/[slug].tsx”

import { GetStaticPropsContext } from "next";
import { useRouter } from "next/router";
import Link from "next/Link";
import React from "react";

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true
  }
}

export async function getStaticProps(context: GetStaticPropsContext) {
  await new Promise(r => setTimeout(r, 4000));

  return {
    props: {},
    revalidate: 10
  }
}

const Page = function () {
  const { isFallback } = useRouter()
  return <div>
    Vercel test ISR - target page
    <br />
    {isFallback ? 'Loading' : 'Final page'}
    <br/>
    <Link href={'/isr-src'} prefetch={false}><a>back</a></Link>
  </div>

}
export default Page

To reproduce:

• start from page “/isr-src”
• open network tab
• because I have used a next/link the hover will start the prefetch. Please care to direct click the link you want to test.
• click one link
• during the fetching of the page we can clairly see in network, the fallback page is not displayed

[carlosfaria94]

Hi, the fallback page is only expected to show when visiting the page directly and not during client-transitions with next/link.

IMO it doesn’t make sense. The fallback page should appear on client-transitions with next/link. I think it’s an expected behavior…

[carlosrsabreu]

Hi, the fallback page is only expected to show when visiting the page directly and not during client transitions with next/link.

How do users know that page is loading if the fallback page appears when visiting the page directly? How do they get feedback that the requested page is loading when visited using next/link through other project pages? I’m facing the same problem as described with more details here.

Thank you!