question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

res.statusCode=404 in getServerSideProps results in unnecacery redirect

See original GitHub issue

Bug report

Describe the bug

export async function getServerSideProps({ res }) {
  res.statusCode = 404
  return {
    props: {
      error: `couldn't find the thing`
  };
};

this will return 404 on both /my-route and /_next/data/..../my-route.json?slug=my-route, which in it self is fine, but client side navigation will react to a 404 with a redirect.

So the current behaviour is:

  1. if I request /my-route I get a 404 http status code and the rendered 404 page
  2. if I (client side) navigate to /my-route it will request /_next/data/..../my-route.json?slug=my-route in the background, then because of the 404 response, it will do a redirect with a full page refresh to /my-route and then (1) happens

(This means that for every 404 that is accessed with (client side) navigation, the getServerSideProps is called 2 times)

Expected behavior

  1. if I request /my-route I get a 404 http status code and the rendered 404 page
  2. if I (client side) navigate to /my-route it should use the data from /_next/data/..../my-route.json?slug=my-route (if there is data, it should be used even if 404) to render the 404 page directly without a page refresh

Screenshots

image First request in the screenshot is the loading of / (full page load). The second is XHR by next which then performs a redirect to /foo which is a full page load.

System information

  • Version of Next.js: 9.5.5
  • Version of Node.js: v14.12.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
Zauberfischcommented, Oct 24, 2020

Workaround:

I’ve worked around this for now by only setting 404 when it’s /my-route but not when it’s /_next/data/..../my-route.json?slug=my-route:

export async function getServerSideProps({ res }) {
  if (!req.url.match(/^\/_next\/data\/.*slug=.*$/)) {
    res.statusCode = 404
  }
  return {
    props: {
      myStatusCode: 404,
      error: `couldn't find the thing`
  };
};

This results in the expected behaviour described in the bug above

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js, redirect to 404 page inside getServerSideProps
I am looking for a best practice in a server-side rendered page on handling an HTTP 404 if the requested page does not...
Read more >
How to return a 404 error in getServerSideProps with Next.js
Ever wondered how to redirect to a 404 error in getServerSideProps with Next.js? Follow our guide for the simples solution we've found!
Read more >
What are HTTP Status Codes? List Of Important Status ... - Moz
An HTTP status code is a server response to a browser's request. ... Outside of these instances, it may be necessary for a...
Read more >
What are HTTP Status Codes? - Crawling and Indexing - Next.js
The HTTP 301 Moved Permanently redirect status response code indicates that the resource requested has been definitively moved to the destination URL.
Read more >
18 Making a custom 404 page in Next.js - YouTube
... a custom 404 page in Next.js and 503 redirects and 404 redirectsnext js custom 404 not working, next js 404 getserversideprops, nex......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found