Search code examples
node.jsreactjsmerncache-control

React Application with Cache Control for images

I don't know how to use cache control for my React application, can someone help me? When I set it up in Nginx, the images don't load, I understand that is because when I build my static assets are renamed. So can someone give me a solution that I can use for this?

If this helps, here is the the website, you can run Light House https://longislandbrainandspine.com/

enter image description here

Solution

  • The cache-control headers need to be defined in the server config. You can set a regex-based query path for all static assets like this

    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    root /folder_where_your_assets_are;
    expires 30d;
    add_header Vary Accept-Encoding;
    add_header Pragma public;
    add_header Cache-Control public;
}

    This should likely be under the server level config.