Gatsby: Cannot use HTTP caching

[lilyntalmers]

Description

I want to use cache-control in my header. For that reason I searched on Google and found Gatsby Official Documentation. The article gives clear instructions to apply cache control but there is only plugin available for Netlify and Amazon. But I am using Gitlab Pages and Cloudflare. So, I cannot use cache-control. On the other hand when I Lighthouse Audit on my website it gives me this warning Serve static assets with an efficient cache policy 16 resources found.

Steps to reproduce

• Create GatsbyJS website

• Upload it to Gitlab Pages

• Run Lighthouse Audit

Expected result

A plugin for Gitlab Pages Header cache-control

Actual result

The is no plugin for Gitlab Pages Header cache-control

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

[herecydev]

It doesn't look like gitlab pages supports cache-control: https://gitlab.com/gitlab-org/gitlab-pages/-/issues/82

Which makes it a poor choice for production static sites. There's not really anything Gatsby can do to help with that, it's extremely flexible with your hosting model, but that means you have to find a way to make cache-control headers work, For netflify that's simple (which is why gatsby plugins exist for it), in your case it just doesn't seem possible

[sidharthachatterjee]

Hey @lilyntalmers

Thank you for opening this. In the issue linked (https://gitlab.com/gitlab-org/gitlab-pages/-/issues/82) to by @herecydev, I see discussion that suggests that GitLab Pages _does_ supports Cache Control headers and not E-tag. I would possibly open an issue there to discuss why you aren't able to work with?

Since this is hosting service related and out of scope of Gatsby, I'll go ahead and close this issue for now. Do let me know if there is anything else (Gatsby related) we can help with.

Cheers!

[lilyntalmers]

Hey everybody,

I hope you all are safe and well. I was able solve the first problem from the official docs about caching everything inside static folder. I was able to do this by the help of Cloudflare CDN. I set the page rule to cache everything for a year inside this link*tahsinproduction.com/static/* and it worked.

Now, I want to solve the last problem, which is JavaScript and CSS files generated by webpack should also be cached forever. Now I have to find a to distinguish JavaScript and CSS files generated by webpack so I can create a custom page rule in Cloudflare.

Any suggestions will be really appreciated. Thanks a lot @herecydev @sidharthachatterjee for your suggestions. Stay safe.

-Lily

[herecydev]

JavaScript and CSS files generated by webpack

By default that's everything in Gatsby as I understand (@sidharthachatterjee correct me if I'm wrong). I think the caveat of "...by webpack" is only there if you start including static js files yourself that you want included in the gatsby site.

[sidharthachatterjee]

@lilyntalmers Yes, @herecydev is correct. That's all JS and CSS in the public directory and should be safe to cache forever.

The files you _don't_ want to cache are /public/page-data/** and *.html