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

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.

Answer

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;