0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【React/Express】ExpressでEtagによるキャッシュを使用する

Last updated at Posted at 2025-05-11

キャッシュとは?

ブラウザがgetメソッドやpostメソッドで同じAPI先を参照する時に何回も同じデータの問い合わせが発生しないようにブラウザ上で保存されている一時データを使用すること。

Expressでキャッシュを使用するにはヘッダーに'Cache-Control'を追加します。

express.jsx
res.set('Cache-Control', 'private, max-age=15');

expressではres.set関数でセットすることができます。

private ⇒ ブラウザのみ許可
public ⇒ CDNなども許可
max-age ⇒ 秒数を指定

⭐max-ageのパラメータは、動的なページだと要検討

長すぎると古いデータが参照されてしまい、新規データが表示されない(動的ページだと
短すぎると結局ブラウザに問い合わせが行われるため、あまり意味がなくなってしm

Etagとは?

サーバーサイド側でレスポンス情報をハッシュ化したものをEtagヘッダーに乗せてブラウザに保存させる。
ブラウザは『キャッシュを使用するか』を確認するためにサーバー側にIf-None-MatchヘッダーにEtagのハッシュ値を乗せて送信する。

Etagが変わっていない場合 ⇒ 304を返してブラウザにキャッシュを使用させる
Etagが変わっている場合  ⇒ 新しいコンテンツ情報をレスポンスとして返してEtag含むキャッシュも更新

メリット
・キャッシュの時間切れになった際でも更新がなければサーバーサイドに無駄な処理をさせずに済む
・キャッシュ単体だと対応しにくい動的webサイトにも適用しやすい

デメリット
・実装難易度が上がる。
・ブラウザ側で完結するキャッシュと違い、If-None-Match検証のためのサーバーサイドとの通信は発生する。

コード例

express.js
const crypto = require('crypto');
res.set('Cache-Control', 'public, max-age=15');
const hash = crypto.createHash('sha256').update(JSON.stringify(data)).digest('hex');
res.setHeader('ETag', hash);
if (req.headers['if-none-match'] === hash) {
  console.log("return キャッシュ")
  return res.status(304).end();
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?