next.js: SSG doesn't work for 404 error pages in Vercel environment when using getInitialProps on _app

Bug report

SSG doesn’t work for 404 error pages in Vercel environment when using getInitialProps on _app

Describe the bug

Since there is still no support for getStaticProps on _app, I’m forced to keep using getInitialProps on _app to fetch common data for shared components (header, footer, seo, …). Up until this point, I had no problems with this approach since I’m using getStaticProps to fetch data in all of my pages, and this does not opt-out of SSG. So only downside is that my website cannot use automatic static optimization.

However, today I noticed that when I go to page that does not exists and I get redirected to a 404 error page, I see changes in header that were made after the build. What is even more strange is that even when I clear all of my cache, on all subsequent requests to this page, changes in header are no longer reflected. But they still are reflected on 404 pages that i didn’t access yet (but also only on the first access). The way it works closely resembles how Incremental Static Generation works.

It is important to note that I’m returning an empty getStaticProps in this page also, since I want the 404 error page to be also able to utilize SSG (since I’m using getInitialProps on _app and this is not automatic). (See screenshots below)

When seeing the build log, I get a full dot next to the 404 page meaning the page is statically pre-generated.

When running npm run build and npm run start on localhost, this issue does not occur. Not even when exporting to serverless environment (target: ‘serverless’ in next.config). But once I push the project to Vercel, the problem arises. From what I have discovered during my research, this bug is exclusive to Vercel environment.

To Reproduce

Run getInitialProps on _app
Create a custom 404 error page with empty getStaticProps
Push to Vercel
Go to a page that does not exist

Expected behavior

I expect the page to be statically generated since that is what I’m seeing from the build output.

Screenshots

Custom 404: Screenshot 2020-12-04 at 19 41 13 Build output: Screenshot 2020-12-04 at 19 46 03

System information

OS: macOS 11.0.1
Browser: Chrome 87.0.4280.88
Version of Next.js: 10.0.3
Version of Node.js: 12.14.1
Deployment: Vercel

Additional context

During my research I also discovered that getStaticProps is not passing data to custom 404 component. I don’t know if that’s intentional. I didn’t find it mentioned anywhere in the documentation though.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 25 (13 by maintainers)

Commits related to this issue

[next] Ensure 404 route is correct for GSP/GIP 404 (#5632) This is a follow-up to https://github.com/vercel/vercel/pull/5618 ensuring the 404 route is pointing to the static 404 output correctly when... — committed to vercel/vercel by ijjk 3 years ago
[next] Ensure 404 route is correct for GSP/GIP 404 (#5632) This is a follow-up to https://github.com/vercel/vercel/pull/5618 ensuring the 404 route is pointing to the static 404 output correctly when... — committed to milliHQ/terraform-aws-next-js by ijjk 3 years ago
[next] Ensure 404 route is correct for GSP/GIP 404 (#5632) This is a follow-up to https://github.com/vercel/vercel/pull/5618 ensuring the 404 route is pointing to the static 404 output correctly when... — committed to onlinedev0808/terrafirn-aws-next.js by onlinedev0808 3 years ago

Most upvoted comments

@vajajak the PR isn’t available instantly when merged, it needs to be published to stable before it’s available. I said I’d update here when it’s available as the PR being merged doesn’t mean it’s available.

I just published this change so it should now be available

ijjk on Jan 5, 2021

Hi, this should now be updated to only run getStaticProps with /404.js at build time instead of once per-path during runtime unless you are leveraging revalidate in /404.js, please re-deploy your application and give it a try!

ijjk on Jan 2, 2021

There seem to be a lot of issues when using SSG (getStaticProps) with custom 404 pages in general (not only using getInitialProps in _app). @vajajak I might suggest editing the title of this issue to reflect that.

In my case I’m not using getInitialProps in _app. I’m just trying to use getStaticProps with my custom 404 page (pages/404.tsx) to get some data that is used in the layout (e.g. company address in footer), and here is what I found:

Looking at the output from next build, the icon next to the /404 page indicates “Static” (uses no initial props) rather than SSG (uses getStaticProps). Not an issue itself, but it indicates something is not right. (This happens locally and when building on Vercel.)
When the app is running (in production mode) on Vercel, the /404 page’s getStaticProps gets called when the 404 page is accessed. (Note: I found this out with a simple logging experiment.) I would expect it to behave like the all other pages, which don’t have their getStaticProps called during runtime in production (unless preview mode is enabled, or using revalidate). Strangely, this issue doesn’t apply when the app is running in production mode locally… in this case everything works fine and the /404 page’s getStaticProps is not called unexpectedly.

Number 2 (above) is a real issue for me because my getStaticProps function tries to read a file from the project file tree (e.g. content/global.json)… I guess Vercel doesn’t include all project files in a deployment, so that file isn’t present, so we get an ENOENT error when trying to read it, so we get Vercel’s “NO_RESPONSE_FROM_FUNCTION” error page (looking exactly like the one above https://github.com/vercel/next.js/issues/19849#issuecomment-739573677)

zenflow on Dec 13, 2020