FastAPI・Jinja2でCSSのキャッシュ対策を整理した

ブラウザのキャッシュが原因で、CSSを修正したのに、本番環境で反映されませんでした。

これまでは、HTML側で読み込むstyle.cssと、その中で@importしている個別CSSの両方にバージョンを付けていました。

<link rel="stylesheet" href="/static/style.css?v=2.1.3">

@import url("css/pages/top.css?v=2.0.4");

この方法だと、top.cssを修正した際に、

• top.cssのバージョンを変更
• style.cssのバージョンも変更

という二重管理が必要になります。

そこで、CSSのバージョンを1か所で管理する形に変更しました。

FastAPIでJinja2を使っているため、base.htmlに以下を定義します。

{% set css_version = "2.1.5" %}

各CSSは、その値を使って直接読み込みます。

<link rel="stylesheet" href="/static/css/base.css?v={{ css_version }}">
<link rel="stylesheet" href="/static/css/components/buttons.css?v={{ css_version }}">
<link rel="stylesheet" href="/static/css/pages/top.css?v={{ css_version }}">
<link rel="stylesheet" href="/static/css/responsive.css?v={{ css_version }}">

これに伴い、これまでCSSの入口として使っていたstyle.cssと、その中の@importは削除しました。

今後CSSを変更した場合は、

{% set css_version = "2.0.5" %}

のように、css_versionを1か所変更するだけで済みます。

以前は、

個別CSSを修正
↓
個別CSSのバージョンを変更
↓
style.cssのバージョンも変更

という流れでした。

現在は、

CSSを修正
↓
css_versionを変更

だけです。

小さな変更ですが、CSSファイルが増えてくるほど管理はかなり楽になります。

将来的にはViteなどを使って、ファイル内容から自動的にハッシュを付ける方法もありますが、現状の規模では今回のようにJinja2でバージョンを一元管理する方法がシンプルで扱いやすいと感じました。