res.statusCode=404 in getServerSideProps results in unnecacery redirect
See original GitHub issueBug 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:
- if I request
/my-route
I get a 404 http status code and the rendered 404 page - 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
- if I request
/my-route
I get a 404 http status code and the rendered 404 page - 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
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:
- Created 3 years ago
- Reactions:1
- Comments:5 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can now return
notFound: true
https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversidepropsWorkaround:
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
:This results in the expected behaviour described in the bug above