☰

create-react-app で index.html に Cache-Control ヘッダーを指定する方法 質問する

tag-icon • tag-icon html reactjs caching create-react-app
create-react-app で index.html に Cache-Control ヘッダーを指定する方法 質問する

私はcreate-react-app.devのガイダンスに従おうとしていますプロダクションビルドのドキュメント:

ユーザーに最高のパフォーマンスを提供するには、index.html と build/static 内のファイルに Cache-Control ヘッダーを指定するのがベスト プラクティスです。このヘッダーを使用すると、ブラウザーと CDN が静的アセットをキャッシュする期間を制御できます。Cache-Control の機能について詳しくない場合は、こちらの記事で概要を説明しています。

ビルド/静的アセットに Cache-Control: max-age=31536000 を使用し、その他すべてに Cache-Control: no-cache を使用することは、安全で効果的な出発点であり、ユーザーのブラウザーが常に更新された index.html ファイルを確認し、すべてのビルド/静的ファイルを 1 年間キャッシュすることを保証します。ファイル コンテンツのハッシュがファイル名に埋め込まれているため、ビルド/静的の 1 年間の有効期限を安全に使用できることに注意してください。

これを行う正しい方法は、index.html で HTML ヘッダーを使用することです。たとえば、次のようになります。

<meta http-equiv="Cache-Control" content="max-age: 31536000, no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

（クレジット：このスタックオーバーフロー応答そしてこのYouTubeチュートリアル）

もしそうなら、「ビルド/静的アセットには max-age=31536000 を設定し、その他すべてには Cache-Control: no-cache を設定する」というドキュメントの提案にどう従えばよいですか? 異なるアセットに異なるコントロールを設定する方法がわかりません。

ベストアンサー1

Evans が述べたように、このヘッダーはサーバー側から設定する必要があります。実際にヘッダーを設定する方法は、バックエンドのプログラミング言語/サーバーによって異なります。

以下にいくつか例を挙げます。

  1. Node.jsres.setHeader('Cache-Control', 'no-cache');
  2. エンギンクスadd_header Cache-Control no-cache;

おすすめ記事