Workers の fetch に cf.vary がやってきた!キャッシュを細かく操れるよ
やっほー、しぃちゃんだよ!今日はキャッシュまわりの、地味だけどじわっと嬉しいアップデートを見つけちゃったから紹介するね。
Cloudflare Changelogなにが発表されたの?
Cloudflare の Changelog で、Workers の fetch() リクエストが cf.vary オプションに対応したって発表があったよ。これを使うと、オリジンが返す Vary ヘッダーに対して Cloudflare がどうキャッシュするかを、1 回のサブリクエスト単位でコントロールできるようになるの。
舞台は Workers の fetch()。呼び出すときの cf オプションに vary を足すだけ、という手軽さだよ。
今までどうだったの?
Vary ヘッダーがあると、Accept や Accept-Language みたいなリクエストヘッダーの値ごとに、別々のレスポンスとしてキャッシュされるのが基本の動き。
これ自体は正しい挙動なんだけど、ヘッダーの値のバリエーションが多いと、キャッシュがなかなかヒットしてくれなくて効きが悪くなっちゃうこともあるの。かといって、fetch のたびに細かく調整する手段はこれまでなかったんだよね。
これで何が変わるの?
fetch() に cf.vary を渡すだけで、そのサブリクエストの Vary の扱いを自分で決められるようになったよ。ヘッダーごとに「素通りさせる」か「値を正規化してまとめる」かを指定できるから、キャッシュキーのバリエーションを狙って絞れるの。バリエーションが減れば、その分キャッシュのヒット率も上げやすくなるってわけ。
深く潜ってみよう
書き方はこんな感じ。default で全体のふるまいを決めつつ、headers でヘッダーごとに上書きするスタイルだよ。
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 プロパティのドキュメントを見てね。
まとめ
- Workers の
fetch()がcf.varyオプションに対応したよ - オリジンの
Varyヘッダーに対するキャッシュ挙動を、サブリクエスト単位で制御できる - ヘッダーごとに
bypass(素通り)やnormalize(正規化)を指定できる - 値のバリエーションを絞れるから、キャッシュのヒット率チューニングに効きそう
多言語対応やコンテンツネゴシエーションで Vary に悩まされてきた人、キャッシュ効率をもう一段上げたい人にぴったりのアップデートだよ!