Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm trying to follow the guidance on create-react-app.dev's Production Build documentation :

To deliver the best performance to your users, it's best practice to specify a Cache-Control header for index.html, as well as the files within build/static. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what Cache-Control does, see this article for a great introduction.

Using Cache-Control: max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated index.html file, and will cache all of the build/static files for one year. Note that you can use the one year expiration on build/static safely because the file contents hash is embedded into the filename.

Is the correct way to do this to use HTML headers in index.html - eg something like:

<meta http-equiv="Cache-Control" content="max-age: 31536000, no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
(Credit: this stack overflow response and this YouTube tutorial)
If so, how do I follow the documentation's suggestion that I should set "max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else"? I don't know how to set different controls for different assets.
                Those should be set in Response Headers at the server side which is serving your production build files.
– Ajeet Shah
                Apr 8 at 10:53
                Where? When we run build command in react it generates one index.html file and one folder as "static" which we can directly upload on server.
– DS9
                Apr 8 at 12:57
As Evans mentioned this headers should be set from the server side. How you actually set the headers differs between backend programming languages/servers.
Here are a few examples:
Node.js res.setHeader('Cache-Control', 'no-cache');
Nginx add_header Cache-Control no-cache;
                Thanks, so if I want to use cache control, as per the docs quoted above: "Using Cache-Control: max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated index.html file", how do I actually go about this? Is this something done in a back-end server? Or in the index.html headers?
– JimmyTheCode
                Apr 12 at 7:34
You can specify different cache behaviour on the server / CDN from where you are serving your asset files.
Example: If you are using AWS S3 bucket, you can do so under the metadata properties of the object.
Ref: https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingMetadata.html#object-metadata
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.