web-dev-qa-db-ja.com

ReactJS:ブラウザが静的ファイルをキャッシュしないようにする方法は?

私はReactJSを使用してプロジェクトに取り組んでおり、create-react-appアプリを作成します。プロジェクトをビルドした後、サーバーを使用してbuildフォルダーを提供します。また、アプリを更新しても、静的ファイル(js、css)をキャッシュするため、ユーザーのブラウザーは引き続き古いバージョンのアプリを使用します。では、ブラウザが静的ファイルをキャッシュしないようにする方法はありますか?ありがとうございました !

4
Phuong

TLDR:HTTPヘッダーを介してキャッシュ命令を送信する必要があります。

Cache-Controlヘッダーには、キャッシュの動作、有効期限、および検証を制御するいくつかのディレクティブがあります。

キャッシュ動作: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Cache-Control:パブリックリソースは任意のキャッシュでキャッシュできます

Cache-Control:プライベートリソースはブラウザでのみキャッシュできます

Cache-Control:no-store常にサーバーからリソースを要求するようにブラウザーを設定します

Cache-Control:no-cacheこれは、ブラウザーにファイルをキャッシュするように指示しますが、サーバーに確認して最新バージョンがあることを確認するまでファイルを使用しません。この検証はETagヘッダーで行われます。 ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

3
Esther Cuan

Create反応アプリはService Workerを提供し、これはクライアント側のさまざまなファイルをキャッシュします。必要に応じて、Service Workerの登録を解除できます。ただし、PWAのようにアプリをオフラインモードで提供することはできません。

1