How to specify a Cache-Control header for index.html in create-react-app

Question

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
– Ajeet Shah, Commented Apr 8, 2021 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
– DS9, Commented Apr 8, 2021 at 12:57

Serhii Mamedov · Accepted Answer · 2021-04-13 17:34:25Z

13

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;

answered Apr 13, 2021 at 17:34

Serhii Mamedov

1,3637 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Evans · Accepted Answer · 2021-04-09 21:19:13Z

11

+25

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.

answered Apr 9, 2021 at 21:19

Evans

6515 silver badges13 bronze badges

1 Comment

JimmyTheCode Over a year ago

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?

Saurish Kar · Accepted Answer · 2021-04-14 14:06:00Z

4

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

answered Apr 14, 2021 at 14:06

Saurish Kar

7969 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to specify a Cache-Control header for index.html in create-react-app

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related