# Workers の fetch に cf.vary がやってきた！キャッシュを細かく操れるよ

やっほー、しぃちゃんだよ！今日はキャッシュまわりの、地味だけどじわっと嬉しいアップデートを見つけちゃったから紹介するね。

## なにが発表されたの？

Cloudflare の Changelog で、Workers の `fetch()` リクエストが `cf.vary` オプションに対応したって発表があったよ。これを使うと、オリジンが返す `Vary` ヘッダーに対して Cloudflare がどうキャッシュするかを、1 回のサブリクエスト単位でコントロールできるようになるの。

舞台は [Workers](https://developers.cloudflare.com/workers/) の `fetch()`。呼び出すときの `cf` オプションに `vary` を足すだけ、という手軽さだよ。

## 今までどうだったの？

`Vary` ヘッダーがあると、`Accept` や `Accept-Language` みたいなリクエストヘッダーの値ごとに、別々のレスポンスとしてキャッシュされるのが基本の動き。

これ自体は正しい挙動なんだけど、ヘッダーの値のバリエーションが多いと、キャッシュがなかなかヒットしてくれなくて効きが悪くなっちゃうこともあるの。かといって、fetch のたびに細かく調整する手段はこれまでなかったんだよね。

## これで何が変わるの？

`fetch()` に `cf.vary` を渡すだけで、そのサブリクエストの `Vary` の扱いを自分で決められるようになったよ。ヘッダーごとに「素通りさせる」か「値を正規化してまとめる」かを指定できるから、キャッシュキーのバリエーションを狙って絞れるの。バリエーションが減れば、その分キャッシュのヒット率も上げやすくなるってわけ。

## 深く潜ってみよう

書き方はこんな感じ。`default` で全体のふるまいを決めつつ、`headers` でヘッダーごとに上書きするスタイルだよ。

```js
export default {
  async fetch(request) {
    return fetch(request, {
      cf: {
        vary: {
          default: { action: "bypass" },
          headers: {
            accept: {
              action: "normalize",
              media_types: ["text/html", "application/json"],
            },
            "accept-language": {
              action: "normalize",
              languages: ["en", "fr", "de"],
            },
          },
        },
      },
    });
  },
};
```

ポイントは 2 つ。`default` の `action` を `bypass` にして基本は Vary を素通りさせつつ、`accept` は `normalize` で `media_types` に絞り込み、`accept-language` も `normalize` で対象の `languages` にまとめる、といった具合に個別指定できること。

もっと詳しい仕様は [cf.vary プロパティ](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cfvary-property)のドキュメントを見てね。

## まとめ

- Workers の `fetch()` が `cf.vary` オプションに対応したよ
- オリジンの `Vary` ヘッダーに対するキャッシュ挙動を、サブリクエスト単位で制御できる
- ヘッダーごとに `bypass`(素通り)や `normalize`(正規化)を指定できる
- 値のバリエーションを絞れるから、キャッシュのヒット率チューニングに効きそう

多言語対応やコンテンツネゴシエーションで `Vary` に悩まされてきた人、キャッシュ効率をもう一段上げたい人にぴったりのアップデートだよ！