ISR - `pageProps` in the `_app` is empty

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 Binaries: Node: 12.22.8 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.7-canary.3 react: 18.1.0 react-dom: 18.1.0

What browser are you using? (if relevant)

firefox 100.0 (64-bit)

How are you deploying your application? (if relevant)

next start

Describe the Bug

pageProps is absent on the _app for ISR pages.

Expected Behavior

pageProps being there.

To Reproduce

git clone https://github.com/GabenGar/repros.git repros
cd repros/nextjs/isr-build-page-props
npm install
npm build

Ignore errors related to _error pages, the point is pages/page/[id] doesn’t have pageProps despite it being passed in getStaticProps() (uncomment the logging line to confirm it does in fact return the props with values).

[icyJoseph]

Hi,

Sorry for this opening, but this is expected behavior.

In pages/page/[id] change getStaticPaths to use fallback: "blocking", and the error goes away.

Why would that be though?

When we use fallback: true, the server sends a loading page to the user agent, and that page is also generated during build time. If you want to have fallback true, do this change (or similar):

function Page({
  locale,
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();

  if (router.isFallback) return <div>Loading...</div>;

  return (
    <div>
      <p>{locale}</p>
      <article>
        <header>{page.id}</header>
        <section>{page.description}</section>
      </article>
    </div>
  );
}

Since ISR pages are generated from next/link, for most cases, the fallback page won’t be shown. Most of the time, only to those who come to a page that has not been generated yet. see the fallback, for a very short time.

Unfortunately, TypeScript can’t really tell that props might undefined, unless isFallback is false, and also check whether the fallback is set to true/“blocking”.

Relevant docs: https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-pages

[GabenGar]

I need to pass some props for SEO (which also have to be calculated server-side) and doing it at page level means destructuring props at every page and passing them to SEO module. Which is as far from DRY as it can get. To be honest ISR should’ve been a separate function, it has way too many gotchas to be just an option of static generation.