I have a Vue SPA that is served from an S3. After deployment, the app is up and running correctly.
Let's say, for instance, that the SPA serves the home page in
www.foo.com and another page in
www.foo.com/bar. Navigating from the home page to the bar page runs correctly as expected, but if you try to access
www.foo.com/bar just copy-pasting its URL to the browser's address bar or even refreshing the page when the browser is serving it, you get an ugly 404 page (with ugly I mean it's not even styled 😮💨).
So yes, I have done my research and read the docs, which add the solution to this problem:
Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly. Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
(you see, the Vue Router guys agree with me about the uglyness of the 404 page 🥲)
Great! I just have to answer to all my 404 errors with the
index.html file! So that's what I did!
Now, every time I access any page in my app that is not the home page, I get the right page rendered in the browser (yay!), but if I open the network tab in devtools, I get a 404 error before every other request from the page (nay ☹️).
Then, after some more research, I found this tiny little quote about it in this article:
However, it will serve it with a 404 error code, which can confuse browsers and scrapers. We will be setting up a rule that tells CloudFront to always serve 404s with a 200 error code, because we know that all files will either be present, or be served the index.html file (which is a success).
So yeah, I have worked on returning a 200 code for every 404 error with a Cloudflare worker.
"Ma'am, you seem to have the answers for all of your questions then, but you were supposed to ask a question here"
Sorry, I had to make sure you got the context...
But the questions are:
- is it not safe for SEO to have a 404 error for every page? I wanted a more complete answer than only this quote.
- And, if so, is it really okay to return a 200 instead of a 404 every time?