Menu
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.
557
To use Cache-Control headers, choose Content Management | Cache Control Directives in the administration server. Then, using the Resource Picker, choose the directory where you want to set the headers. After setting the headers, click 'OK'.
To use cache-control in HTML, you use the meta tag, e.g. The value in the content field is defined as one of the four values below. HTTP 1.1. Allowed values = PUBLIC | PRIVATE | NO-CACHE | NO-STORE.
According to the HTTP/1.1 specification, all HTML documents, CSS style sheets, and JS scripts are heuristically cacheable. Browsers cache the index.
The Cache-Control header has two other directives to specify who can cache the content. The private directive indicates that the content in the response is meant only for the end user - the final consumer of the content.
No cache header for HTML and other dynamic content The content in the HTML or in an API response can change very frequently and on a per user basis. For example, product recommendations will change as the user browses through different products on the website and will be different for two different users.
The Cache-Control header has two other directives to specify who can cache the content. The private directive indicates that the content in the response is meant only for the end user - the final consumer of the content. Therefore, intermediate layers, like the CDN, should not cache it.
The Cache-Control header has a lot of other directives to control the cache behavior. To specify the time for which the content can be cached, Cache-Control has a max-age directive. It defines a relative time in seconds for which the content can be cached. The directive below allows the content to be cached for 1 hour or 3600 seconds.
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:
res.setHeader('Cache-Control', 'no-cache');
add_header Cache-Control no-cache;
157
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.
23
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
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
