python fastapiでコードを変えてもjsの古いコードが実行される問題の解決方法

初めに

python fastapiなどでサイトを作ってるときにHTMLやjsを書き換えても古いコードが実行された経験はありませんか?そのような人の参考になったら嬉しいです。

問題

HTML,CSS,jsのファイルがキャッシュされてしまっているため
なのでキャッシュを読み込ませないようにすればいいのです。

解決方法

js

<script>
    const uuid = self.crypto.randomUUID();
    script.src = "{{ url_for('static', path='js/test.js')}}?v="+uuid;
    script.type = "text/javascript";
    target.insertAdjacentElement("afterend",script)
</script>

なぜキャッシュ化されないのか

コードの解説

UUIDを生成する

const uuid = self.crypto.randomUUID();

jsファイルの場所の指定とエクリ文字列の指定
'static':HTML,CSS,jsのファイルが入っているファイル
v=:エクリ文字列の指定することによってキャッシュを避けることができる

script.src = "{{ url_for('static', path='js/test.js')}}?v="+uuid;

ファイル形式の指定今回はjsのファイルなため"text/javascript"と指定します。

script.type = "text/javascript";

jsファイルを読み込みます今回は"afterend"なのでHTMLが読み込まれた後に実行されます。

target.insertAdjacentElement("afterend",script)

一番楽な解決方法

スーパーリロード(強制リフレッシュ)を行いましょう。そうするとキャッシュが削除されます。
Chromiumやり方は以下の通りです。
Cmd + Shift + R