Params don't match when using 'unstable_revalidate' and 'getStaticProps'

[fredrik-sogaard]

Bug report

Describe the bug

When running getStaticPaths on build, the params passed to getStaticProps looks like this (logged from getStaticProps):

{ uri: [ 
       'mat-og-drikke',
       'spisesteder',
       'markedet'
  ] }

This statically builds the pages I want and they work when refreshing the page in a browser.

When I navigate with next/link the pages are blank, and the json fetched is missing data. This is because the params from getStaticProps looks like this when navigating client side (also logged from getStaticProps):

{ uri: [
       '_next',
       'data',
       'w2nXsthsLcSAUfxXKvvWD',
       'mat-og-drikke',
       'spisesteder',
       'markedet.json'
 ] }

Pages directory looks like this:

pages
    [...uri]
         index.tsx

This does not happen if I turn off unstable_revalidate.

I'm using fallback: true in getStaticPaths.

Expected behavior

That the params match both on build time and runtime so data fetched when navigating client side is correct and works.

System information

• OS: macOS, Windows
• Version of Next.js: 9.4.4
• Version of Node.js: Deployed to Vercel

[ijjk]

Hi, can you provide a full reproduction where this is occurring?

I'm not able to reproduce this on Next.js v9.4.4, example deployment here which shows the correct params being returned for the catch-all route during a client-transition and a direct visit.

Code used for the catch-all route for the above deployment

import { useRouter } from 'next/router'

export const getStaticProps = ({ params }) => {
  console.log({params});

  return {
    props: {
      uri: params,
      world: 'world',
      random: Math.random()
    },
    unstable_revalidate: 1
  }
}

export const getStaticPaths = () => {
  return {
    paths: [],
    fallback: true
  }
}

export default function Page({ uri, world, random }) {
  if (useRouter().isFallback) {
    return 'Loading...'
  }

  return (
    <>
      <p>uri {JSON.stringify({ uri })}</p>
      <p>hello {world}</p>
      <p>random {random}</p>
    </>
  )
}

[fredrik-sogaard]

Here's a screencap of the problem: https://share.getcloudapp.com/E0uzRZ9l You can test here: https://samskipnaden-4ui6mllyh.vercel.app/ (the links throw an error because of the app expecting a different base url, but that shouldn't affect this issue).

This is the code:

export async function getStaticPaths() {
  const GET_ENTRIES = `
    query getPages($site: [String]) {
      entries(section: "pages", site: $site, enabledForSite: true) {
        uri
      }
    }
  `
  const data: any = await fetcher(GET_ENTRIES, '_', {
    site: constants.Sites.Norwegian,
  })
  const params = data?.entries.map((entry) => {
    const arr = entry.uri.split('/')
    return { params: { uri: arr } }
  })

  return {
    paths: [...params],
    fallback: true,
  }
}

export async function getStaticProps({ params }) {
  const site = constants.Sites.Norwegian
  const uri = params.uri.join('/')
  console.log('URI: ', uri)
  console.log('PARAMS: ', params)
  const data = await fetcher(GET_PAGE, '_', {
    uri,
    site,
    seoUri: uri,
    seoSite: site,
  })
  return {
    props: { data, site },
    unstable_revalidate: 5,
  }
}

I also found the same issue here: https://github.com/vercel/next.js/issues/12851 where it seems like setting paths: [] fixes the issue (see https://github.com/vercel/next.js/issues/12851#issuecomment-635028038), and the reason why your example works—but that's not what we want.

[ijjk]

Ah I see, yeah this does appear to be the same issue as https://github.com/vercel/next.js/issues/12851 which is related to the usage of the src: '/(.*)', dest: 'packages/app-name/$1' route and unstable_revalidate.

I'm going to close this issue in favor of that one, thanks for the additional details

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.