Cloudflare の Browser Cache TTL を理解する

まとめ

まとめると以下の図のようになります。

• Edge and Browser Cache TTL · Cloudflare Cache (CDN) docs

ケース1

• Origin は Cache-Control:max-age=30 を返す

% curl -sIXGET 'https://grey.example.com/jpeg/cf-logo-h-rgb.jpg?t=20' | grep -i cache
Cache-Control: max-age=30

• Cache Rule なし、デフォルト設定（Caching Configuration > Browser Cache TTL = 4 hours）

この場合、長い方の値（Browser Cache TTL = 4 hours）が返る。

% curl -sIXGET 'https://example.com/jpeg/cf-logo-h-rgb.jpg?t=21' | grep -i cache
cache-control: public, max-age=14400
cf-cache-status: MISS

ケース2

• Origin は Cache-Control:max-age=30 を返す

% curl -sIXGET 'https://grey.example.com/jpeg/cf-logo-h-rgb.jpg?t=22' | grep -i cache
Cache-Control: max-age=30

• Cache Rule で Browser TTL > Override origin and use this TTL > 2 sec と設定

この場合、長い方の値（Origin の Cache-Control 値 max-age=30）が返る。
（短い値での上書きとはならない）

% curl -sIXGET 'https://example.com/jpeg/cf-logo-h-rgb.jpg?t=23' | grep -i cache     
cache-control: public, max-age=30
cf-cache-status: MISS

ケース3

常に Origin の Cache-Control 値を採用したい場合は

• Caching Configuration > Browser Cache TTL = Respect Existing Headers に設定する
  （ゾーン全体の一括設定）

% curl -sIXGET 'https://example.com/jpeg/cf-logo-h-rgb.jpg?t=25' | grep -i cache
cache-control: max-age=30
cf-cache-status: MISS

または

• Cache Rule で Browser TTL > Respect origin TTL を設定する
  （Expression にマッチする条件ごとに適用）

% curl -sIXGET 'https://example.com/jpeg/cf-logo-h-rgb.jpg?t=28' | grep -i cache
cache-control: max-age=30
cf-cache-status: MISS

ケース4

Browser Cache を Bypass したい場合は

• Cache Rule で Browser TTL > Bypass cache を設定する
  （Expression にマッチする条件ごとに適用）

% curl -sIXGET 'https://example.com/jpeg/cf-logo-h-rgb.jpg?t=30' | grep -i cache 
cache-control: no-store
cf-cache-status: MISS