コンテンツにスキップ
Remix Logo Remix Logo Remix ドキュメント

キャッシュコントロール

ルートモジュールでの設定

各ルートはそのHTTPヘッダーを定義することもできます。これはHTTPキャッシュにとって特に重要です。Remixは、パフォーマンスを向上させるためにウェブサイトを静的ファイルとしてビルドしてCDNにアップロードすることに依存せず、代わりにキャッシュヘッダーに依存します。両方のアプローチの最終的な結果は同じです：CDN上の静的ドキュメント。詳細についてはこのビデオをご覧ください。

通常、キャッシュヘッダーの難しい部分はその設定です。Remixでは、これを簡単にしています。ルートからheaders関数をエクスポートするだけです。

export function headers() {
  return {
    "Cache-Control": "public, max-age=300, s-maxage=3600",
  };
}


export function meta() {
  /* ... */
}


export default function Gists() {
  /* ... */
}

max-ageは、ユーザーのブラウザにそのコンテンツを300秒（5分間）キャッシュするように指示します。これは、5分以内に同じページへの戻りやリンクをクリックした場合、ブラウザはそのページへのリクエストを全く行わず、代わりにキャッシュを使用することを意味します。

s-maxageは、CDNに1時間キャッシュするように指示します。最初の人が私たちのサイトを訪れた時、以下のような流れになります：

  1. リクエストがサイト（実際にはCDN）に到達します
  2. CDNにドキュメントのキャッシュがないため、私たちのサーバー（オリジンサーバー）にリクエストを送ります
  3. サーバーがページを構築し、CDNに送信します
  4. CDNはそれをキャッシュし、訪問者に送信します

次の人が私たちのページを訪れた時、以下のようになります：

  1. リクエストがCDNに到達します
  2. CDNにはドキュメントがキャッシュされているため、オリジンサーバーに触れることなく即座に送信します！

キャッシュについてはCDNキャッシングガイドでさらに多くの話題があるので、必ず時間を見つけて読んでください。

ローダーでの設定

ルートがキャッシュコントロールを定義できることを見てきましたが、これがローダーにとってなぜ重要なのでしょうか？これには2つの理由があります：

第一に、データはマークアップよりも頻繁に変更されるため、データの方がキャッシュコントロールがどうあるべきかをよく知っています。そのため、ローダーのヘッダーはルートのヘッダー関数に渡されます。

app/routes/gists.tsを開き、ヘッダー関数を以下のように更新してください：

export function headers({
  loaderHeaders,
}: {
  loaderHeaders: Headers;
}) {
  return {
    "Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

loaderHeadersオブジェクトはWeb Fetch API Headersコンストラクターのインスタンスです。

これで、ブラウザやCDNが私たちのページをキャッシュしたい場合、データソースからヘッダーを取得します。これは通常、望ましい動作です。この例では、実際にはGitHubが私たちのフェッチレスポンスで送信したヘッダーを使用しているだけです！

これが重要な第二の理由は、Remixがクライアントサイドの遷移時にブラウザのfetchを通じてローダーを呼び出すためです。ここで適切なキャッシュヘッダーを返すことで、ユーザーが戻る/進むをクリックしたり、同じページを複数回訪れたりした場合、ブラウザは実際にデータを再度リクエストせず、代わりにキャッシュされたバージョンを使用します。これにより、CDNにキャッシュできないページでも、サイトのパフォーマンスが大幅に向上します。多くのReactアプリケーションはJavaScriptのキャッシュに依存していますが、ブラウザのキャッシュは既に十分に機能しています！