1. Home
  2. Forums Index
  3. WebmasterWorld / Webmaster General 12:41 am May 21, 2026

Forum Moderators: phranque

Message Too Old, No Replies

Handling 404 in a SPA

         

NickMNS

5:24 pm on Jan 10, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a web app created with React.js, the app is a single-page-app SPA, but responds to different routes.

example.com is the home page.
example.com/login is the login page
example.com/some-content has some content

But the problem with:
example.com/some-page-that-does-not-exists
since the app routing is handled client side if I return a "page not found" page the server still responds with a 200 status.

So to solve the problem what I have done is to use a JS redirect that redirects the page to an endpoint to which only the server responds to directly. 
window.location.replace("/api/404-error-page");


To be clear about how all this works, nginx proxy server is configured to allow any route to be handled by the node.js server that returns the React app, with the exception of /api which then sends the request to my Python backend server. So by redirecting to a /api route the server can respond with the appropriate status code. But, the initial request for the non-existent page is still handled by node.js and gets a 200 response and only the request from the JS redirect gets 404 status. Is this redirect sufficient, or will this cause a soft 404 or other issues?

I suppose the ideal setup would be to provide nginx with an explicit list of allowable routes and anything else would return a 404.

phranque

10:34 pm on Jan 10, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



since the app routing is handled client side if I return a "page not found" page the server still responds with a 200 status.

"client side" necessarily assumes a page is loaded in the client that is handling a user click on that page.

how would a client directly request such a url (example.com/some-page-that-does-not-exists) in a SPA unless you have provided that link in your SPA?

perhaps i misunderstood the problem...

NickMNS

1:15 am on Jan 11, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



how would a client directly request such a url[?]

Currently the main source of these requests is from your typical no compliant bots, eg: 
example.com/php-login


The problem being that the request returns a 200 response despite the fact that it doesn't exist, which wastes resources and potentially sends them a signal to come back and poke some more.

Even if one handles the bot issue, once the website is fully operational and a large number of humans begin to use it, one will certainly see people typing non-existent parameters into the url or doing other seemingly irrational actions in an attempt to navigate or take shortcuts.

phranque

2:22 am on Jan 11, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



since the app routing is handled client side if I return a "page not found" page the server still responds with a 200 status.

So to solve the problem what I have done is to use a JS redirect that redirects the page to an endpoint to which only the server responds to directly.

The problem being that the request returns a 200 response despite the fact that it doesn't exist, which wastes resources and potentially sends them a signal to come back and poke some more.

responding with the SPA payload and then waiting for the client to request a non-existent url is a waste of resources.
nor is a 200 response followed by a client-side redirect to an error page equivalent to a proper 404 response.

i wouldn't worry too much about the requests from "your typical no compliant bots".

if you are wondering about the SEO aspect of this (i.e., actual search engine bots) keep in mind that googlebot/bingbot/etc will not only have to request your SPA but will also have to render the javascript before it knows about the redirect, and will subsequently have to schedule a request for this url as well, etc.

I suppose the ideal setup would be to provide nginx with an explicit list of allowable routes and anything else would return a 404.

so do i.

NickMNS

4:00 am on Jan 11, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



googlebot/bingbot/etc will not only have to request your SPA but will also have to render the javascript before it knows about the redirect,

Googlebot has become surprisingly good at rendering JS, so I not worried too much about that. As for Bingbot I couldn't say but I generally to pay much attention as they have never sent me much traffic <1%. For this project I'm not overly concerned about SEO as I expect to get most of the traffic from real world sources.

so do i.

Any suggestions on the best way to do that. I'm using Nginx, my setup now is 


location @proxy_to_app {
 ... set a few headers ...
 proxy_pass http://127.0.0.1: port to node server
}
location /api {
 ... set a few more headers ...
 proxy_pass http://127.0.0.1: port to python server
}


Is there a way to pass a an array of valid routes to the location parameter, such that I don't need a location for each route?

phranque

6:20 am on Jan 11, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Is there a way to pass a an array of valid routes to the location parameter, such that I don't need a location for each route?

the location directive will take a regular expression...
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. WebmasterWorld / Webmaster General 12:41 am May 21, 2026