11

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.

JimmyTheCode
  • 418
  • 2
  • 13
  • Those should be set in *Response Headers* at the server side which is serving your production build files. – Ajeet Shah Apr 08 '21 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 08 '21 at 12:57

3 Answers3

4

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:

  1. Node.js res.setHeader('Cache-Control', 'no-cache');
  2. Nginx add_header Cache-Control no-cache;
Serhiy Mamedov
  • 890
  • 2
  • 8
3

These headers would need to be set by the server which will be sending the content and setting the headers. These are HTTP headers and it is not handled in anyway in or with react.

Evans
  • 541
  • 3
  • 12
  • 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 '21 at 07:34
1

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

enter image description here

Saurish Kar
  • 123
  • 1
  • 4