How to handle Status codes in React for static files

user_66708 0
Viewed 100

I have created a simple web application, react in the frontend, go in the backend. I'm not an expert in react.

I was testing performance and noticed that react was returning status code 200 for static content already cached (jpg, png, etc) instead of 304 Not modified.

In the image below you see a) the image read directly from the browser triggering a status code 304 status code (this is expected) and b) the same image browsed by from react, triggering a 200 status code (this is not expected).

status code comparsion

My dependencies in frontend are:

"react": "16.8.4",
"react-dom": "16.8.4",
"react-google-recaptcha-v3": "^1.8.0",
"react-redux": "6.0.1",
"react-router-dom": "^5.2.0",

So, my question is if there is a way to handle status code to make this react-dom.production.min.js return 304 status code for all static assets already cached, or if react returns 200 status code by design for all images.

Any information on this is appreciated.

react-router reactjs
1 Answers

Create a new .htaccess file in the root of you react production code (If you dont have one). Then add your caching policy rules to the file. Take a look at this link. The link mentions about .htaccess with apache but the same applies even for static site hosts like Netlify or Firebase Hosting.

user_152411330
Related