Netlify + Cloudflareでcf-cache-statusがREVALIDATEDになる時の対処方法

原因はNetlifyのレスポンスヘッダ

調べてみたところ、原因はNetlifyのレスポンスヘッダでした。

Netlifyは、デフォルトで、

cache-control: max-age=0,no-cache,no-store,must-revalidate

となっているようで、これが原因でCloudflareでキャッシュされず「cf-cache-status: REVALIDATED」となってしまいます。

Cloudflareはキャッシュするかどうかをオリジンサーバーのレスポンスヘッダで判断するようなので、この設定ではCloudflareがキャッシュしません。

Cloudflareのキャッシュについて理解する

そもそもNetlify自体がCDNサーバーを持っているので、こうした設定(キャッシュコントロールはNetlifyのCDNでする)になっているのでしょう。最近は、CSSなどもハッシュ値を入れるのが標準になってきていますしね。

netlify.tomlにカスタムヘッダ設定を追記する

問題は、オリジンサーバーのレスポンスヘッダなので、Netlifyの設定ファイルからカスタムヘッダを設定します。

[[headers]]
  for = "/*"
  [headers.values]
	cache-control = '''
	public, max-age=31536000'''

上記の例では、全てのファイルのキャッシュを1年としています。これだと、HTMLなどが困ることがあるので、実際にはimgsディレクトリなどディレクトリ指定をした方が良いでしょう。

書き方がちょっとわかりづらいのですが、「cache-control = 」のあとのクォーテーションマーク3つは、複数行文字列のためのtomlファイルのフォーマットです。

Netlify + Cloudflareでcf-cache-statusがREVALIDATEDになる時の対処方法をみてきました。

原因がわかれば簡単なので、困っている方の参考になれば幸いです。