Cloudflare の Browser Cache TTL を理解する

# まとめ

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

- [Edge and Browser Cache TTL · Cloudflare Cache (CDN) docs](https://developers.cloudflare.com/cache/how-to/edge-browser-cache-ttl/)

```mermaid:
---
title: How Cloudflare responds Browser Cache TTL
---
flowchart TB
1((Start))
2{"Cache Rule?<br>(Browser TTL)"}
3{"Zone-wide<br>Caching Configuration<br>(Browser Cache TTL)"}

4(Cloudflare will use whichever value is longer<br>between Origin Cache-Control and Cloudflare setting)
5(Origin Cache-Control)
6(Bypass cache<br>cache-control: no-store)

1 --> 2

2 ---> |Yes<br>Bypass cache|6
3 --> |Respect Existing Headers|5
2 --> |Yes<br>Respect origin TTL|5

2 --> |No|3
3 --> |"Other values<br>(Default: 4 hours)"|4
2 --> |Yes<br>Override origin and use this TTL|4



10{{For Browser Cache TTL, <br>we cannot override to the shorter value <br>than Origin Cache-Control}}
```

# ケース1

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

```shell:
% 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）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/4d652918-7046-b3e4-602e-59542c9f4524.png)

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

```shell:
% 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` を返す

```shell:
% 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 と設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/10726199-4d7e-6ac5-2429-02cc348e423b.png)

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

```shell:
% 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 に設定する
（ゾーン全体の一括設定）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/cdf844a8-daa4-b6a1-c367-a3632e191924.png)

```shell:
% 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 にマッチする条件ごとに適用）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/e0fc8889-1257-e103-4e62-f93b6c156dd3.png)

```shell:
% 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 にマッチする条件ごとに適用）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/33358444-50c7-753e-81bf-b21d859f3cbc.png)

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