Prerendered static HTML does not get first HIT on Vercel

[bitttttten]

Summary

I have some routes in the app route that get prerendered as static HTML, on the first visit to my Next.JS app hosted on Vercel, they take a short time to load and then after that they are instant. They get "PRERENDER"ed, and then subsequent visits, I see "HIT"s.

In my logs I see:

nextjs:build: ├ ● /[slug]/bgs                                    1.23 kB         356 kB
nextjs:build: ├   ├ /big/bgs
nextjs:build: ├   ├ /large/bgs
nextjs:build: ├   ├ /small/bgs
nextjs:build: ├   └ [+5 more paths]

However after deploying, I can see the x-vercel-cache is set to PRERENDER:

curl -I https://my-website.com/large/bgs/
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
x-matched-path: /large/bgs/
x-vercel-cache: PRERENDER

I've omitted some headers.

If I cURL again:

curl -I https://my-website.com/large/bgs/
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 52
cache-control: public, max-age=0, must-revalidate
x-matched-path: /large/bgs/
x-vercel-cache: HIT

I can also see that in the logs, if I do some console.log-ing or look in our telemetry, Vercel is actually rendering this page. In my mind, we've pre-rendered the page so why does it need to render again after deploying?

I now get a HIT on the Vercel Edge Network.

Locally I do get cache hits immediately:

npm run build; npm run start

Now you can see the HIT:

curl -I http://localhost:3002/large/bgs/
HTTP/1.1 200 OK
x-nextjs-cache: HIT

Any help is appreciated.

Additional information

My next.config.js:

const base = {
    logging: {
      fetches: {
        fullUrl: true,
      },
    },
    reactStrictMode: true,
    typescript: {
      ignoreBuildErrors: true,
    },
    eslint: {
      ignoreDuringBuilds: true,
    },
    trailingSlash: true,
    experimental: {
      instrumentationHook: true,
      optimizePackageImports: [
        '@radix-ui/primitive',
        '@radix-ui/react-avatar',
        '@radix-ui/react-tooltip',
        '@radix-ui/react-dialog',
        '@radix-ui/react-popover',
        '@radix-ui/react-select',
        '@radix-ui/react-slider',
        '@radix-ui/react-switch',
        '@radix-ui/react-radio-group',
        '@radix-ui/react-toolbar',
        '@radix-ui/react-tooltip',
      ],
    },
    productionBrowserSourceMaps: branch !== 'production',
}


const withNextIntl = nextIntl('./i18n.js')

export default withNextIntl(base)

Example

No response

[kantarse]

Hi @bitttttten, have you ever found an answer to this question? I am struggling with the exact same issue...

[bitttttten]

Nope! I have since moved on too, I haven't worked in this project for over a year 😢