{"id":13193,"date":"2026-03-17T06:27:36","date_gmt":"2026-03-17T06:27:36","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=13193"},"modified":"2026-07-14T11:53:38","modified_gmt":"2026-07-14T11:53:38","slug":"etag-browser-cache-optimization","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/etag-browser-cache-optimization\/","title":{"rendered":"ETag\u3067\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u6700\u9069\u5316\uff5cCache-Control\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u30fbCDN\u5b9f\u88c5\u30ac\u30a4\u30c9"},"content":{"rendered":"\n<div class=\"wp-block-group swl-box\"><div class=\"wp-block-group__inner-container\">\n\n<h3 class=\"wp-block-heading\">\u3053\u306e\u8a18\u4e8b\u3067\u308f\u304b\u308b\u3053\u3068<\/h3>\n\n\n<ul class=\"wp-block-list\">\n  <li>ETag\u30fbLast-Modified\u30fbCache-Control\u30fbExpires\u306e\u9055\u3044\u3068\u4f7f\u3044\u5206\u3051<\/li>\n  <li>Cache-Control\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\uff08max-age\u30fbno-cache\u30fbno-store\u30fbimmutable\u7b49\uff09\u306e\u5168\u89e3\u8aac<\/li>\n  <li>stale-while-revalidate\u306b\u3088\u308b\u901f\u5ea6\u3068\u9bae\u5ea6\u306e\u4e21\u7acb\u65b9\u6cd5<\/li>\n  <li>Node.js\uff08Express\uff09\u30fbHono\u30fbNginx\u30fbNext.js App Router\u3067\u306e\u5b9f\u88c5\u4f8b<\/li>\n  <li>CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbVary\u30d8\u30c3\u30c0\u30fc\u30fbCache-Busting\u6226\u7565\u306e\u5b9f\u8df5\u7684\u306a\u8a2d\u8a08<\/li>\n<\/ul>\n\n<\/div><\/div>\n\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-left\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-14.48.08.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u751f\u5f92<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30b5\u30a4\u30c8\u3092\u66f4\u65b0\u3057\u305f\u306e\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u6b8b\u3063\u3066\u3044\u3066\u30e6\u30fc\u30b6\u30fc\u306b\u53e4\u3044\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u305f\u308a\u3001\u9006\u306b\u6bce\u56de\u5168\u90e8\u8aad\u307f\u8fbc\u3093\u3067\u9045\u304b\u3063\u305f\u308a\u3057\u307e\u3059\u2026\u2026\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3063\u3066\u96e3\u3057\u3044\u3067\u3059\u306d<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n<div class=\"swell-block-balloon\"><div class=\"c-balloon -bln-right\" data-col=\"gray\"><div class=\"c-balloon__icon -square\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2025\/06\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2025-06-15-15.11.23.jpg\" alt=\"\" class=\"c-balloon__iconImg\" width=\"80px\" height=\"80px\"><span class=\"c-balloon__iconName\">\u30da\u30f3\u535a\u58eb<\/span><\/div><div class=\"c-balloon__body -speaking -border-none\"><div class=\"c-balloon__text\">\n<p><strong>\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u4ed5\u7d44\u307f\u3092\u6b63\u3057\u304f\u7406\u89e3\u3059\u308c\u3070\u3001\u300c\u5909\u66f4\u304c\u3042\u308c\u3070\u6700\u65b0\u7248\u3092\u53d6\u5f97\u3001\u306a\u3051\u308c\u3070\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u3046\u300d\u3068\u3044\u3046\u7406\u60f3\u7684\u306a\u52d5\u4f5c\u3092\u5b9f\u73fe\u3067\u304d\u308b\u3093\u3058\u3083\uff01ETag\u3068Cache-Control\u3092\u4f7f\u3044\u5206\u3051\u3066\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u9bae\u5ea6\u3092\u4e21\u7acb\u3055\u305b\u3088\u3046\uff01\u3055\u3089\u306bCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbstale-while-revalidate\u30fbNginx\/Next.js\u306e\u5b9f\u88c5\u307e\u3067\u5fb9\u5e95\u89e3\u8aac\u3059\u308b\u305e\uff01<\/strong><\/p>\n<span class=\"c-balloon__shapes\"><span class=\"c-balloon__before\"><\/span><span class=\"c-balloon__after\"><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6700\u9069\u89e3\u306f\u300c\u9759\u7684\u30a2\u30bb\u30c3\u30c8\u306f1\u5e74\u9593immutable\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbHTML\u306fETag\u3067\u6bce\u56de\u78ba\u8a8d\u30fb\u6a5f\u5bc6\u30c7\u30fc\u30bf\u306fno-store\u300d\u3068\u3044\u30463\u539f\u5247\u3067\u3059\u3002<\/strong>\u3053\u308c\u3092\u62bc\u3055\u3048\u308b\u3068\u30012\u56de\u76ee\u4ee5\u964d\u306e\u30a2\u30af\u30bb\u30b9\u3067\u8ee2\u9001\u91cf\u309299%\u4ee5\u4e0a\u524a\u6e1b\u3057\u306a\u304c\u3089\u5e38\u306b\u6700\u65b0\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5c4a\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u8a18\u4e8b\u3067\u306f\u3001<strong><span class=\"swl-marker mark_yellow\">\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e4\u3064\u306eHTTP\u30d8\u30c3\u30c0\u30fc\uff08ETag\u30fbLast-Modified\u30fbCache-Control\u30fbExpires\uff09\u306e\u4ed5\u7d44\u307f\u3068\u4f7f\u3044\u5206\u3051\u30fbCache-Control\u5168\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u8a73\u89e3\u30fbstale-while-revalidate\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u52d5\u4f5c\u30d5\u30ed\u30fc\u30fbCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u3068Vary\u30d8\u30c3\u30c0\u30fc\u30fbCache-Busting\u6226\u7565\u30fbNode.js\/Express\/Hono\/Nginx\/Next.js\/Vercel\u3067\u306e\u5b9f\u88c5\u4f8b\u30fbDevTools\u30c7\u30d0\u30c3\u30b0\u65b9\u6cd5<\/span><\/strong>\u3092\u5b8c\u5168\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e4\u3064\u306eHTTP\u30d8\u30c3\u30c0\u30fc<\/h2>\n\n\n<table>\n  <thead>\n    <tr><th>\u30d8\u30c3\u30c0\u30fc<\/th><th>\u7a2e\u985e<\/th><th>\u52d5\u4f5c<\/th><th>\u7279\u5fb4<\/th><th>\u63a8\u5968\u7528\u9014<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td><strong>Expires<\/strong><\/td><td>\u5f37\u5236\u30ad\u30e3\u30c3\u30b7\u30e5<\/td><td>\u671f\u9650\u5185\u306fHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u3089\u306a\u3044<\/td><td>\u7d76\u5bfe\u65e5\u4ed8\u6307\u5b9a\u30fb\u30b5\u30fc\u30d0\u30fc\u6642\u523b\u4f9d\u5b58\uff08\u65e7\u5f0f\uff09<\/td><td>\u5f8c\u65b9\u4e92\u63db\u6027\u306e\u307f<\/td><\/tr>\n    <tr><td><strong>Cache-Control<\/strong><\/td><td>\u5f37\u5236\u30ad\u30e3\u30c3\u30b7\u30e5<\/td><td>max-age\u79d2\u306e\u9593\u306fHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u3089\u306a\u3044<\/td><td>\u8907\u6570\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u67d4\u8edf\u306b\u8a2d\u5b9a<\/td><td>\u5168\u30ea\u30bd\u30fc\u30b9<\/td><\/tr>\n    <tr><td><strong>Last-Modified<\/strong><\/td><td>\u6761\u4ef6\u4ed8\u304d\u30ad\u30e3\u30c3\u30b7\u30e5<\/td><td>If-Modified-Since \u3067\u5909\u66f4\u78ba\u8a8d\u5f8c\u30ad\u30e3\u30c3\u30b7\u30e5 or \u53d6\u5f97<\/td><td>\u79d2\u5358\u4f4d\u306e\u7cbe\u5ea6\u30fb\u30d5\u30a1\u30a4\u30eb\u30b7\u30b9\u30c6\u30e0\u306e\u66f4\u65b0\u65e5\u6642<\/td><td>\u30b7\u30f3\u30d7\u30eb\u306a\u9759\u7684\u30b5\u30fc\u30d0\u30fc<\/td><\/tr>\n    <tr><td><strong>ETag<\/strong><\/td><td>\u6761\u4ef6\u4ed8\u304d\u30ad\u30e3\u30c3\u30b7\u30e5<\/td><td>If-None-Match \u3067\u30cf\u30c3\u30b7\u30e5\u7167\u5408\u5f8c\u30ad\u30e3\u30c3\u30b7\u30e5 or \u53d6\u5f97<\/td><td>\u9ad8\u7cbe\u5ea6\uff08\u30b3\u30f3\u30c6\u30f3\u30c4\u30cf\u30c3\u30b7\u30e5\u30d9\u30fc\u30b9\uff09<\/td><td>\u52d5\u7684\u30b3\u30f3\u30c6\u30f3\u30c4\u30fbAPI<\/td><\/tr>\n  <\/tbody>\n<\/table>\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010\u5f37\u5236\u30ad\u30e3\u30c3\u30b7\u30e5 vs \u6761\u4ef6\u4ed8\u304d\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u9055\u3044\u3011\n\n\u5f37\u5236\u30ad\u30e3\u30c3\u30b7\u30e5\uff08Cache-Control: max-age=3600\uff09\uff1a\n1. \u30d6\u30e9\u30a6\u30b6\u304c\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6709\u52b9\u671f\u9650\u3092\u78ba\u8a8d\n2. \u6709\u52b9\u671f\u9650\u5185 \u2192 \u30b5\u30fc\u30d0\u30fc\u306b\u4e00\u5207\u901a\u4fe1\u3057\u306a\u3044\uff08\u30cd\u30c3\u30c8\u30ef\u30fc\u30af0\u30ea\u30af\u30a8\u30b9\u30c8\uff09\n3. \u6709\u52b9\u671f\u9650\u5207\u308c \u2192 \u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8 or \u901a\u5e38\u30ea\u30af\u30a8\u30b9\u30c8\n\n\u6761\u4ef6\u4ed8\u304d\u30ad\u30e3\u30c3\u30b7\u30e5\uff08ETag + Cache-Control: no-cache\uff09\uff1a\n1. \u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u306b\u30ea\u30af\u30a8\u30b9\u30c8\uff08\u4f46\u3057 If-None-Match \u30d8\u30c3\u30c0\u30fc\u4ed8\u304d\uff09\n2. \u30b5\u30fc\u30d0\u30fc\u304cETag\u3092\u6bd4\u8f03\n3. \u5909\u66f4\u306a\u3057 \u2192 304\uff08\u30dc\u30c7\u30a3\u306a\u3057\u3001\u6570\u5341\u30d0\u30a4\u30c8\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\uff09\n4. \u5909\u66f4\u3042\u308a \u2192 200 + \u65b0\u3057\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\n\n\u2192 \u9759\u7684\u30a2\u30bb\u30c3\u30c8\uff1a\u5f37\u5236\u30ad\u30e3\u30c3\u30b7\u30e5\uff08max-age=1\u5e74\uff09\u304c\u6700\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\n\u2192 HTML\u30fbAPI\uff1a\u6761\u4ef6\u4ed8\u304d\u30ad\u30e3\u30c3\u30b7\u30e5\uff08no-cache + ETag\uff09\u3067\u9bae\u5ea6\u3092\u4fdd\u3064<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">ETag\u306e\u4ed5\u7d44\u307f\u3092\u8a73\u3057\u304f\u7406\u89e3\u3059\u308b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">ETag\u306e\u52d5\u4f5c\u30d5\u30ed\u30fc\uff08\u521d\u56de\u301c\u5909\u66f4\u691c\u77e5\u307e\u3067\uff09<\/h3>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010ETag\u306e\u52d5\u4f5c\u30d5\u30ed\u30fc\u8a73\u7d30\u3011\n\n\u2501\u2501\u2501 \u521d\u56de\u30a2\u30af\u30bb\u30b9 \u2501\u2501\u2501\n\u30d6\u30e9\u30a6\u30b6  \u2192  GET \/api\/products HTTP\/1.1\n              Host: example.com\n              Accept: application\/json\n\n\u30b5\u30fc\u30d0\u30fc  \u2192  HTTP\/1.1 200 OK\n              Content-Type: application\/json\n              ETag: \"d41d8cd98f00b204e9800998ecf8427e\"\n              Cache-Control: no-cache\n              Content-Length: 1234\n\n              {\"products\": [...]}\n\n\u30d6\u30e9\u30a6\u30b6\uff1a\u30ec\u30b9\u30dd\u30f3\u30b9\u3068ETag\u5024\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u4fdd\u5b58\n\n\u2501\u2501\u2501 2\u56de\u76ee\u306e\u30a2\u30af\u30bb\u30b9\uff08\u6761\u4ef6\u4ed8\u304dGET\uff09\u2501\u2501\u2501\n\u30d6\u30e9\u30a6\u30b6  \u2192  GET \/api\/products HTTP\/1.1\n              Host: example.com\n              If-None-Match: \"d41d8cd98f00b204e9800998ecf8427e\"\n\n\u30b5\u30fc\u30d0\u30fc\uff08\u5909\u66f4\u306a\u3057\uff09  \u2192  HTTP\/1.1 304 Not Modified\n                          ETag: \"d41d8cd98f00b204e9800998ecf8427e\"\n                          \uff08\u30dc\u30c7\u30a3\u306a\u3057 \u2192 \u6570\u5341\u30d0\u30a4\u30c8\u306e\u307f\u8ee2\u9001\uff09\n\n\u30d6\u30e9\u30a6\u30b6\uff1a\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u4ee5\u524d\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u4f7f\u7528\n\n\u2501\u2501\u2501 3\u56de\u76ee\u306e\u30a2\u30af\u30bb\u30b9\uff08\u30b3\u30f3\u30c6\u30f3\u30c4\u5909\u66f4\u5f8c\uff09\u2501\u2501\u2501\n\u30d6\u30e9\u30a6\u30b6  \u2192  GET \/api\/products HTTP\/1.1\n              If-None-Match: \"d41d8cd98f00b204e9800998ecf8427e\"  \u2190 \u53e4\u3044ETag\n\n\u30b5\u30fc\u30d0\u30fc\uff08\u5909\u66f4\u3042\u308a\uff09  \u2192  HTTP\/1.1 200 OK\n                          ETag: \"new_hash_value_xyz\"  \u2190 \u65b0\u3057\u3044ETag\n                          Content-Length: 2345\n\n                          {\"products\": [...updated...]}\n\n\u30d6\u30e9\u30a6\u30b6\uff1a\u65b0\u3057\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u65b0\u3057\u3044ETag\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u66f4\u65b0<\/code><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5f37\u3044ETag\uff08Strong ETag\uff09\u3068\u5f31\u3044ETag\uff08Weak ETag\uff09<\/h3>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\"><code>&gt;\u3010Strong ETag vs Weak ETag\u3011\n\nStrong ETag\uff08\u5f37\u3044ETag\uff09\uff1a\nETag: \"abc123def456\"\n\u2192 \u30d0\u30a4\u30c8\u5358\u4f4d\u3067\u5b8c\u5168\u4e00\u81f4\u306e\u5834\u5408\u306e\u307f\u540c\u4e00\u3068\u307f\u306a\u3059\n\u2192 Range \u30ea\u30af\u30a8\u30b9\u30c8\uff08\u90e8\u5206\u53d6\u5f97\uff09\u306b\u3082\u4f7f\u7528\u53ef\u80fd\n\u2192 \u63a8\u5968\uff1a\u7cbe\u5ea6\u304c\u9ad8\u304f\u4fe1\u983c\u6027\u304c\u9ad8\u3044\n\nWeak ETag\uff08\u5f31\u3044ETag\uff09\uff1a\nETag: W\/\"abc123def456\"\n\u2192 \u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u306b\u540c\u7b49\u3067\u3042\u308c\u3070\u540c\u4e00\u3068\u307f\u306a\u3059\n\u2192 \u4f8b\uff1aHTTP vs HTTPS\u3001gzip\u5727\u7e2e\u6709\u7121\u306e\u9055\u3044\u3092\u7121\u8996\n\u2192 \u7528\u9014\uff1a\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u540c\u3058\u3060\u304c\u8868\u73fe\u304c\u7570\u306a\u308b\u5834\u5408\n\n\u3010ETag\u306e\u751f\u6210\u65b9\u6cd5\u4f8b\u3011\n\n\/\/ \u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u30cf\u30c3\u30b7\u30e5\uff08\u63a8\u5968\uff09\nconst etag = crypto.createHash('sha256').update(fileContent).digest('hex')\n\/\/ \u2192 \"e3b0c44298fc1c149afbf4c8996fb924...\"\n\n\/\/ \u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba + \u6700\u7d42\u66f4\u65b0\u6642\u523b\uff08Nginx\/Apache\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\uff09\nconst etag = `\"${fileSize.toString(16)}-${mtime.toString(16)}\"`\n\/\/ \u2192 \"1a2b-5d3c4e8f9a\"\n\n\/\/ \u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\uff08API\u30ec\u30b9\u30dd\u30f3\u30b9\u5411\u3051\uff09\nconst etag = `\"v${version}-${lastModifiedTimestamp}\"`\n\/\/ \u2192 \"v42-1710000000000\"<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Cache-Control\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u5b8c\u5168\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/h2>\n\n\n<table>\n  <thead>\n    <tr><th>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/th><th>\u5024<\/th><th>\u8aac\u660e<\/th><th>\u5bfe\u8c61<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td><code>max-age<\/code><\/td><td>\u79d2\u6570<\/td><td>\u6307\u5b9a\u79d2\u6570\u306e\u9593\u306f\u518d\u30ea\u30af\u30a8\u30b9\u30c8\u3057\u306a\u3044\uff08Expires\u3088\u308a\u512a\u5148\uff09<\/td><td>\u30d6\u30e9\u30a6\u30b6\u30fbCDN<\/td><\/tr>\n    <tr><td><code>s-maxage<\/code><\/td><td>\u79d2\u6570<\/td><td>\u5171\u6709\u30ad\u30e3\u30c3\u30b7\u30e5\uff08CDN\uff09\u306e\u6709\u52b9\u671f\u9650\uff08max-age\u3088\u308a\u512a\u5148\uff09<\/td><td>CDN\u306e\u307f<\/td><\/tr>\n    <tr><td><code>no-cache<\/code><\/td><td>&#8211;<\/td><td>\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u4fdd\u5b58\u3059\u308b\u304c\u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u306b\u78ba\u8a8d\uff08ETag\u3068\u7d44\u307f\u5408\u308f\u305b\uff09<\/td><td>\u30d6\u30e9\u30a6\u30b6\u30fbCDN<\/td><\/tr>\n    <tr><td><code>no-store<\/code><\/td><td>&#8211;<\/td><td>\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4e00\u5207\u4fdd\u5b58\u3057\u306a\u3044\uff08\u6700\u3082\u53b3\u683c\uff09<\/td><td>\u30d6\u30e9\u30a6\u30b6\u30fbCDN<\/td><\/tr>\n    <tr><td><code>public<\/code><\/td><td>&#8211;<\/td><td>\u30d6\u30e9\u30a6\u30b6\u30fbCDN\u4e21\u65b9\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8a31\u53ef<\/td><td>CDN<\/td><\/tr>\n    <tr><td><code>private<\/code><\/td><td>&#8211;<\/td><td>\u30d6\u30e9\u30a6\u30b6\u306e\u307f\u30ad\u30e3\u30c3\u30b7\u30e5\u53ef\uff08CDN\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u4e0d\u53ef\uff09<\/td><td>CDN\u9664\u5916<\/td><\/tr>\n    <tr><td><code>immutable<\/code><\/td><td>&#8211;<\/td><td>max-age\u5185\u3067\u3082\u518d\u78ba\u8a8d\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u3089\u306a\u3044\uff08Firefox\/Chrome\u5bfe\u5fdc\uff09<\/td><td>\u30d6\u30e9\u30a6\u30b6<\/td><\/tr>\n    <tr><td><code>stale-while-revalidate<\/code><\/td><td>\u79d2\u6570<\/td><td>max-age\u5f8c\u3082\u3053\u306e\u79d2\u6570\u9593\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8fd4\u3057\u306a\u304c\u3089\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u66f4\u65b0<\/td><td>\u30d6\u30e9\u30a6\u30b6\u30fbCDN<\/td><\/tr>\n    <tr><td><code>stale-if-error<\/code><\/td><td>\u79d2\u6570<\/td><td>\u30b5\u30fc\u30d0\u30fc\u30a8\u30e9\u30fc\u6642\u306b\u3053\u306e\u79d2\u6570\u9593\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8fd4\u3059<\/td><td>CDN<\/td><\/tr>\n    <tr><td><code>must-revalidate<\/code><\/td><td>&#8211;<\/td><td>\u671f\u9650\u5207\u308c\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u30b5\u30fc\u30d0\u30fc\u78ba\u8a8d\u304c\u5fc5\u9808<\/td><td>\u30d6\u30e9\u30a6\u30b6<\/td><\/tr>\n  <\/tbody>\n<\/table>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">stale-while-revalidate\uff5c\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3092\u640d\u306a\u308f\u306a\u3044\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>stale-while-revalidate<\/code> \u306f\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u671f\u9650\u5207\u308c\u3067\u3082\u30e6\u30fc\u30b6\u30fc\u306b\u5373\u5ea7\u306b\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u306a\u304c\u3089\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u65b0\u3057\u3044\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u3059\u3002<strong>\u300c\u901f\u3055\u300d\u3068\u300c\u9bae\u5ea6\u300d\u3092\u4e21\u7acb\u3067\u304d\u308b\u5f37\u529b\u306a\u6226\u7565<\/strong>\u3067\u3059\u3002<\/p>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010stale-while-revalidate \u306e\u52d5\u4f5c\u30d5\u30ed\u30fc\u3011\n\nCache-Control: max-age=60, stale-while-revalidate=3600\n\n\u2192 \u6700\u521d\u306e60\u79d2\uff1a\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u5373\u5ea7\u306b\u8fd4\u3059\uff08\u30ea\u30af\u30a8\u30b9\u30c8\u306a\u3057\uff09\n\u2192 61\u79d2\u301c3660\u79d2\uff1a\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3059 + \u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u66f4\u65b0\n\u2192 3661\u79d2\u4ee5\u964d\uff1a\u901a\u5e38\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30df\u30b9\uff08\u30b5\u30fc\u30d0\u30fc\u306b\u540c\u671f\u30ea\u30af\u30a8\u30b9\u30c8\uff09\n\n\u3010\u4f7f\u7528\u4f8b\uff081\u6642\u9593\u3054\u3068\u306b\u5909\u308f\u308b\u30cb\u30e5\u30fc\u30b9\u30b5\u30a4\u30c8\uff09\u3011\nCache-Control: public, max-age=3600, stale-while-revalidate=86400\n\n\u2192 1\u6642\u9593\u4ee5\u5185\uff1a\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u5373\u5ea7\u306b\u8fd4\u3059\n\u2192 1\u6642\u9593\u301c24\u6642\u9593\uff1a\u53e4\u3044\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8fd4\u3057\u306a\u304c\u3089\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u6700\u65b0\u53d6\u5f97\n\u2192 \u30e6\u30fc\u30b6\u30fc\u306f\u5e38\u306b\u9ad8\u901f\u306a\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u4f53\u9a13\u3067\u304d\u308b<\/code><\/pre><\/div>\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\"><code>&gt;\/\/ Hono\uff08Node.js\/Edge Runtime\u5bfe\u5fdc\uff09\u3067\u306estale-while-revalidate\u5b9f\u88c5\nimport { Hono } from 'hono'\nimport { cache } from 'hono\/cache'\n\nconst app = new Hono()\n\n\/\/ API\u30ec\u30b9\u30dd\u30f3\u30b9\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u30d8\u30c3\u30c0\u30fc\u3092\u8a2d\u5b9a\napp.get('\/api\/news', async (c) =&gt; {\n  const data = await fetchLatestNews()\n\n  return c.json(data, 200, {\n    'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',\n    'ETag': generateEtag(data),\n    'Last-Modified': new Date().toUTCString(),\n    'Vary': 'Accept-Language',  \/\/ \u8a00\u8a9e\u5225\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u5206\u3051\u308b\n  })\n})\n\n\/\/ \u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u51e6\u7406\napp.get('\/api\/products', async (c) =&gt; {\n  const data = await fetchProducts()\n  const json = JSON.stringify(data)\n  const etag = `\"${await generateHash(json)}\"`\n\n  \/\/ If-None-Match \u30c1\u30a7\u30c3\u30af\n  const clientEtag = c.req.header('if-none-match')\n  if (clientEtag === etag) {\n    return new Response(null, {\n      status: 304,\n      headers: { 'ETag': etag }\n    })\n  }\n\n  \/\/ If-Modified-Since \u30c1\u30a7\u30c3\u30af\uff08\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff09\n  const lastModified = new Date('2026-03-14').toUTCString()\n  const ifModifiedSince = c.req.header('if-modified-since')\n  if (ifModifiedSince &amp;&amp; new Date(ifModifiedSince) &gt;= new Date(lastModified)) {\n    return new Response(null, { status: 304 })\n  }\n\n  return c.json(data, 200, {\n    'ETag': etag,\n    'Last-Modified': lastModified,\n    'Cache-Control': 'no-cache',\n  })\n})\n\nexport default app<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u76ee\u7684\u5225\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u30d1\u30bf\u30fc\u30f3\u96c6<\/h2>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010\u30ea\u30bd\u30fc\u30b9\u7a2e\u5225\u3054\u3068\u306e\u63a8\u5968\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u30d1\u30bf\u30fc\u30f3\u3011\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f31\uff1a\u9759\u7684\u30a2\u30bb\u30c3\u30c8\uff08\u30cf\u30c3\u30b7\u30e5\u4ed8\u304d\u30d5\u30a1\u30a4\u30eb\u540d\uff09\u2501\u2501\u2501\n\u5bfe\u8c61\uff1amain.a1b2c3d4.js, styles.e5f6g7h8.css, image.webp\n\u8a2d\u5b9a\uff1aCache-Control: public, max-age=31536000, immutable\n\u7406\u7531\uff1aURL\u306b\u30cf\u30c3\u30b7\u30e5\u304c\u542b\u307e\u308c\u308b\u305f\u3081\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u5909\u66f4\u6642\u306fURL\u304c\u5909\u308f\u308b\n     \u2192 \u540c\u3058URL\u306f\u6c38\u9060\u306b\u540c\u3058\u30b3\u30f3\u30c6\u30f3\u30c4\uff08immutable\u3067\u78ba\u8a8d\u30ea\u30af\u30a8\u30b9\u30c8\u3082\u7701\u7565\uff09\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f32\uff1aHTML\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u2501\u2501\u2501\n\u5bfe\u8c61\uff1aindex.html, \/about, \/blog\/post-1\n\u8a2d\u5b9a\uff1aCache-Control: no-cache\n     ETag: \"abc123\"\n\u7406\u7531\uff1a\u30e6\u30fc\u30b6\u30fc\u304c\u5e38\u306b\u6700\u65b0\u306eHTML\u3092\u898b\u308b\u5fc5\u8981\u304c\u3042\u308b\n     \u2192 \u6bce\u56de\u78ba\u8a8d\u3059\u308b\u304c\u5909\u66f4\u304c\u306a\u3051\u308c\u3070304\uff08\u9ad8\u901f\uff09\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f33\uff1aAPI\u30ec\u30b9\u30dd\u30f3\u30b9\uff08\u983b\u7e41\u306b\u5909\u308f\u308b\u30c7\u30fc\u30bf\uff09\u2501\u2501\u2501\n\u5bfe\u8c61\uff1a\/api\/cart, \/api\/user, \/api\/notifications\n\u8a2d\u5b9a\uff1aCache-Control: no-store\n\u7406\u7531\uff1a\u30e6\u30fc\u30b6\u30fc\u56fa\u6709\u30fb\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c7\u30fc\u30bf\u306f\u7d76\u5bfe\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u306f\u3044\u3051\u306a\u3044\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f34\uff1aAPI\u30ec\u30b9\u30dd\u30f3\u30b9\uff08\u5909\u5316\u304c\u5c11\u306a\u3044\u30c7\u30fc\u30bf\uff09\u2501\u2501\u2501\n\u5bfe\u8c61\uff1a\/api\/products, \/api\/categories\n\u8a2d\u5b9a\uff1aCache-Control: public, max-age=300, stale-while-revalidate=3600\n     ETag: \"xyz789\"\n\u7406\u7531\uff1a5\u5206\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u3067\u591a\u304f\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30aa\u30d5\u30ed\u30fc\u30c9\n     SWR\u3067\u671f\u9650\u5207\u308c\u5f8c\u3082UI\u306f\u30b5\u30af\u30b5\u30af\u52d5\u4f5c\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f35\uff1a\u8a8d\u8a3c\u6e08\u307f\u30da\u30fc\u30b8 \u2501\u2501\u2501\n\u5bfe\u8c61\uff1a\/dashboard, \/profile, \/orders\n\u8a2d\u5b9a\uff1aCache-Control: private, no-cache\n     ETag: \"user123-content-hash\"\n\u7406\u7531\uff1aprivate \u3067CDN\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3055\u305b\u306a\u3044\n     no-cache + ETag \u3067\u6bce\u56de\u78ba\u8a8d\uff08personalized content\uff09\n\n\u2501\u2501\u2501 \u30d1\u30bf\u30fc\u30f36\uff1a\u753b\u50cf\u30fb\u52d5\u753b\uff08CDN\u914d\u4fe1\uff09\u2501\u2501\u2501\n\u5bfe\u8c61\uff1a\/images\/hero.jpg, \/uploads\/video.mp4\n\u8a2d\u5b9a\uff1aCache-Control: public, max-age=604800, stale-while-revalidate=86400\n\u7406\u7531\uff1a\u753b\u50cf\u306f1\u9031\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\u3002\u5909\u66f4\u6642\u306fURL\u3092\u5909\u66f4\u3057\u3066\u30ad\u30e3\u30c3\u30b7\u30e5\u30d0\u30b9\u30c8<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b5\u30fc\u30d0\u30fc\u5b9f\u88c5\u4f8b\uff5cNode.js\uff08Express\uff09\u30fbHono\u30fbNginx\u30fbNext.js<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Node.js\uff08Express\uff09\u3067\u306eETag\u5b9f\u88c5<\/h3>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\"><code>&gt;\/\/ Express \u3067\u306e ETag + Cache-Control \u5b9f\u88c5\nimport express from 'express'\nimport { createHash } from 'crypto'\nimport { readFileSync, statSync } from 'fs'\n\nconst app = express()\n\n\/\/ Express\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067 etag: 'weak' \u304c\u6709\u52b9\n\/\/ Strong ETAG\u306b\u5909\u66f4\napp.set('etag', 'strong')\n\n\/\/ \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u306b\u6700\u9069\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u30d8\u30c3\u30c0\u30fc\u3092\u4ed8\u4e0e\napp.use('\/static', express.static('public', {\n  etag: true,\n  lastModified: true,\n  \/\/ \u30cf\u30c3\u30b7\u30e5\u4ed8\u304d\u30d5\u30a1\u30a4\u30eb\u540d\u306e\u5834\u5408\u306f1\u5e74\u30ad\u30e3\u30c3\u30b7\u30e5\n  setHeaders: (res, path) =&gt; {\n    if (path.match(\/\\.[a-f0-9]{8,}\\.(js|css|png|jpg|webp)$\/)) {\n      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')\n    } else {\n      res.setHeader('Cache-Control', 'public, max-age=86400')\n    }\n  },\n}))\n\n\/\/ \u52d5\u7684API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3067ETag\u3092\u624b\u52d5\u8a2d\u5b9a\napp.get('\/api\/products', async (req, res) =&gt; {\n  const products = await db.getProducts()\n  const json = JSON.stringify(products)\n\n  \/\/ \u30b3\u30f3\u30c6\u30f3\u30c4\u306eSHA-256\u30cf\u30c3\u30b7\u30e5\u304b\u3089ETag\u3092\u751f\u6210\n  const hash = createHash('sha256').update(json).digest('hex')\n  const etag = `\"${hash}\"`\n\n  \/\/ If-None-Match \u30d8\u30c3\u30c0\u30fc\u3068\u7167\u5408\n  const clientEtag = req.get('if-none-match')\n  if (clientEtag === etag) {\n    return res.status(304).set({\n      'ETag': etag,\n      'Cache-Control': 'no-cache',\n    }).end()\n  }\n\n  \/\/ Last-Modified \u306e\u78ba\u8a8d\n  const lastModified = new Date(products[0]?.updatedAt || Date.now()).toUTCString()\n  const ifModifiedSince = req.get('if-modified-since')\n  if (ifModifiedSince &amp;&amp; new Date(ifModifiedSince) &gt;= new Date(lastModified)) {\n    return res.status(304).end()\n  }\n\n  res\n    .set('ETag', etag)\n    .set('Last-Modified', lastModified)\n    .set('Cache-Control', 'no-cache')\n    .set('Vary', 'Accept-Encoding')\n    .json(products)\n})<\/code><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Next.js App Router \u3067\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30d8\u30c3\u30c0\u30fc\u8a2d\u5b9a<\/h3>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-javascript\" data-lang=\"JavaScript\"><code>&gt;\/\/ app\/api\/products\/route.ts - Next.js App Router\n\nimport { NextRequest, NextResponse } from 'next\/server'\nimport { createHash } from 'crypto'\n\nexport async function GET(request: NextRequest) {\n  const products = await fetchProducts()\n  const json = JSON.stringify(products)\n  const etag = `\"${createHash('sha256').update(json).digest('hex')}\"`\n\n  \/\/ \u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u51e6\u7406\n  const ifNoneMatch = request.headers.get('if-none-match')\n  if (ifNoneMatch === etag) {\n    return new NextResponse(null, {\n      status: 304,\n      headers: { 'ETag': etag }\n    })\n  }\n\n  return NextResponse.json(products, {\n    headers: {\n      'ETag': etag,\n      'Cache-Control': 'public, max-age=60, stale-while-revalidate=300',\n    }\n  })\n}\n\n\/\/ next.config.js - \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30d8\u30c3\u30c0\u30fc\u8a2d\u5b9a\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  async headers() {\n    return [\n      {\n        \/\/ \u30cf\u30c3\u30b7\u30e5\u4ed8\u304d\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u306f\u6c38\u4e45\u30ad\u30e3\u30c3\u30b7\u30e5\n        source: '\/_next\/static\/:path*',\n        headers: [\n          {\n            key: 'Cache-Control',\n            value: 'public, max-age=31536000, immutable',\n          },\n        ],\n      },\n      {\n        \/\/ HTML\u30da\u30fc\u30b8\u306fno-cache\uff08ETag\u3067\u78ba\u8a8d\uff09\n        source: '\/((?!_next).*)',\n        headers: [\n          {\n            key: 'Cache-Control',\n            value: 'no-cache',\n          },\n        ],\n      },\n    ]\n  },\n}\n\nmodule.exports = nextConfig<\/code><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Nginx \u3067\u306e\u8a73\u7d30\u8a2d\u5b9a<\/h3>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>&gt;# \/etc\/nginx\/conf.d\/app.conf\n# Nginx\u306e\u5b8c\u5168\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u4f8b\n\nserver {\n    listen 443 ssl http2;\n    server_name example.com;\n\n    # ETag \u3092\u6709\u52b9\u5316\uff08Nginx\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u6709\u52b9\uff09\n    etag on;\n\n    # \u30cf\u30c3\u30b7\u30e5\u4ed8\u304d\u9759\u7684\u30a2\u30bb\u30c3\u30c8\uff08JS\u30fbCSS\u30fb\u30d5\u30a9\u30f3\u30c8\uff09\u306f1\u5e74\u30ad\u30e3\u30c3\u30b7\u30e5\n    location ~* \\.(js|css|woff2?|ttf|otf)$ {\n        # \u30cf\u30c3\u30b7\u30e5\u304c\u542b\u307e\u308c\u3066\u3044\u308bURL\u30d1\u30bf\u30fc\u30f3\uff08\u4f8b: main.a1b2c3.js\uff09\n        if ($uri ~* \"\\.[a-f0-9]{8,}\\.\") {\n            add_header Cache-Control \"public, max-age=31536000, immutable\";\n            break;\n        }\n        # \u30cf\u30c3\u30b7\u30e5\u304c\u306a\u3044\u5834\u5408\u306f1\u65e5\u30ad\u30e3\u30c3\u30b7\u30e5\n        add_header Cache-Control \"public, max-age=86400\";\n    }\n\n    # \u753b\u50cf\u306f1\u9031\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\n    location ~* \\.(png|jpg|jpeg|gif|webp|avif|svg|ico)$ {\n        expires 7d;\n        add_header Cache-Control \"public, max-age=604800, stale-while-revalidate=86400\";\n    }\n\n    # HTML\u306f no-cache\uff08ETag\u3067\u6bce\u56de\u78ba\u8a8d\uff09\n    location ~* \\.html$ {\n        add_header Cache-Control \"no-cache\";\n        # ETag\u306fNginx\u304c\u81ea\u52d5\u3067\u4ed8\u4e0e\u3059\u308b\n    }\n\n    # \u30eb\u30fc\u30c8\u3068\u52d5\u7684\u30eb\u30fc\u30c8\u306fno-cache\n    location \/ {\n        add_header Cache-Control \"no-cache\";\n        try_files $uri $uri\/ \/index.html;\n    }\n\n    # API\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u306a\u3044\n    location \/api\/ {\n        add_header Cache-Control \"no-store\";\n        add_header Pragma \"no-cache\";\n        proxy_pass http:\/\/backend:3000;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n\n        # \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306eETag\u3092\u305d\u306e\u307e\u307e\u30d1\u30b9\u30b9\u30eb\u30fc\n        proxy_pass_header ETag;\n        proxy_pass_header Last-Modified;\n    }\n}\n\n# \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u5727\u7e2e\u8a2d\u5b9a\uff08gzip\/brotli\uff09\ngzip on;\ngzip_vary on;  # Vary: Accept-Encoding \u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0\uff08CDN\u5bfe\u5fdc\uff09\ngzip_types text\/plain application\/json application\/javascript text\/css;<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u3068Vary\u30d8\u30c3\u30c0\u30fc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CDN\uff08Cloudflare, CloudFront, Fastly\u7b49\uff09\u306f\u72ec\u81ea\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30ec\u30a4\u30e4\u30fc\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u3002<strong>Vary\u30d8\u30c3\u30c0\u30fc\u306fCDN\u304c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u5206\u3051\u308b\u305f\u3081\u306e\u5224\u65ad\u57fa\u6e96<\/strong>\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002<\/p>\n\n\n<table>\n  <thead>\n    <tr><th>Vary\u5024<\/th><th>\u7528\u9014<\/th><th>\u6ce8\u610f\u70b9<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td><code>Accept-Encoding<\/code><\/td><td>gzip\/brotli\u5727\u7e2e\u6709\u7121\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u5206\u96e2<\/td><td>\u307b\u307c\u5fc5\u9808\u3002\u8a2d\u5b9a\u6f0f\u308c\u3067\u5727\u7e2e\u6e08\u307f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306b\u8fd4\u3059\u53ef\u80fd\u6027<\/td><\/tr>\n    <tr><td><code>Accept-Language<\/code><\/td><td>\u8a00\u8a9e\u5225\u30ad\u30e3\u30c3\u30b7\u30e5\u5206\u96e2<\/td><td>\u591a\u8a00\u8a9e\u30b5\u30a4\u30c8\u3067\u540c\u4e00URL\u304c\u8a00\u8a9e\u306b\u3088\u3063\u3066\u5185\u5bb9\u304c\u5909\u308f\u308b\u5834\u5408<\/td><\/tr>\n    <tr><td><code>Cookie<\/code><\/td><td>\u30e6\u30fc\u30b6\u30fc\u5225\u30ad\u30e3\u30c3\u30b7\u30e5\u5206\u96e2<\/td><td>CDN\u306b\u306f\u975e\u63a8\u5968\u3002\u5168Cookie\u30d1\u30bf\u30fc\u30f3\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u30d2\u30c3\u30c8\u7387\u304c\u6fc0\u6e1b\u3059\u308b<\/td><\/tr>\n    <tr><td><code>Authorization<\/code><\/td><td>\u8a8d\u8a3c\u30c8\u30fc\u30af\u30f3\u5225\u30ad\u30e3\u30c3\u30b7\u30e5<\/td><td>CDN\u306b\u306f\u975e\u63a8\u5968\u3002private\u8a2d\u5b9a\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u3046<\/td><\/tr>\n  <\/tbody>\n<\/table>\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u8a2d\u5b9a\u4f8b\uff08Cloudflare\uff09\u3011\n\n# Cloudflare Page Rule \u307e\u305f\u306f Cache Rules\n# *.js, *.css \u2192 Cache Everything, Edge TTL: 1 year\n# \/api\/* \u2192 Bypass Cache\n\n# Cache-Control \u306e s-maxage \u3067CDN\u306e\u307f\u306e\u6709\u52b9\u671f\u9650\u3092\u8a2d\u5b9a\nCache-Control: public, max-age=60, s-maxage=3600, stale-while-revalidate=300\n\n\u2192 \u30d6\u30e9\u30a6\u30b6\uff1a60\u79d2\u30ad\u30e3\u30c3\u30b7\u30e5\n\u2192 CDN\uff1a1\u6642\u9593\u30ad\u30e3\u30c3\u30b7\u30e5\n\u2192 CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u671f\u9650\u5f8c\uff1a\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u3064\u30645\u5206\u9593\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u66f4\u65b0<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Cache-Busting\uff08\u30ad\u30e3\u30c3\u30b7\u30e5\u7121\u52b9\u5316\uff09\u6226\u7565<\/h2>\n\n\n<table>\n  <thead>\n    <tr><th>\u65b9\u6cd5<\/th><th>\u4f8b<\/th><th>\u30e1\u30ea\u30c3\u30c8<\/th><th>\u30c7\u30e1\u30ea\u30c3\u30c8<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td>\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u30cf\u30c3\u30b7\u30e5\uff08\u63a8\u5968\uff09<\/td><td><code>main.a1b2c3.js<\/code> \u2192 <code>main.e5f6g7.js<\/code><\/td><td>URL\u304c\u5909\u308f\u308b\u306e\u3067\u78ba\u5b9f\u3002CDN\u3082\u81ea\u52d5\u5bfe\u5fdc<\/td><td>\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u304c\u5fc5\u8981\uff08Vite\/webpack\uff09<\/td><\/tr>\n    <tr><td>\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc<\/td><td><code>style.css?v=1.2.3<\/code><\/td><td>\u5b9f\u88c5\u304c\u7c21\u5358<\/td><td>CDN\u304c\u30af\u30a8\u30ea\u3092\u7121\u8996\u3059\u308b\u5834\u5408\u304c\u3042\u308b<\/td><\/tr>\n    <tr><td>CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30d1\u30fc\u30b8API<\/td><td>Cloudflare\/CloudFront API\u3067\u30d1\u30fc\u30b8<\/td><td>\u5373\u6642\u53cd\u6620\u3002URL\u3092\u5909\u3048\u305a\u306b\u4f7f\u3048\u308b<\/td><td>\u30c7\u30d7\u30ed\u30a4\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u304c\u5fc5\u8981<\/td><\/tr>\n  <\/tbody>\n<\/table>\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>&gt;# Cloudflare Cache Purge\uff08\u30c7\u30d7\u30ed\u30a4\u30b9\u30af\u30ea\u30d7\u30c8\u4f8b\uff09\ncurl -X POST \"https:\/\/api.cloudflare.com\/client\/v4\/zones\/${ZONE_ID}\/purge_cache\" \\\n  -H \"Authorization: Bearer ${CF_API_TOKEN}\" \\\n  -H \"Content-Type: application\/json\" \\\n  --data '{\"purge_everything\": true}'<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Chrome DevTools\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u30c7\u30d0\u30c3\u30b0\u3059\u308b<\/h2>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010DevTools\u3067\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30c7\u30d0\u30c3\u30b0\u624b\u9806\u3011\n\n1. Chrome DevTools\u3092\u958b\u304f\uff08F12 or Ctrl+Shift+I\uff09\n\n2. Network\u30bf\u30d6\u3092\u9078\u629e\n\n3. \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u78ba\u8a8d\u65b9\u6cd5\uff1a\n   \u2192 Status\u5217\u3067\u78ba\u8a8d\n   \u2192 200\uff08disk cache\uff09: \u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30a3\u30b9\u30af\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u8fd4\u3055\u308c\u305f\n   \u2192 200\uff08memory cache\uff09: \u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30e2\u30ea\u30ad\u30e3\u30c3\u30b7\u30e5\u304b\u3089\u8fd4\u3055\u308c\u305f\n   \u2192 304: \u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u3067\u5909\u66f4\u306a\u3057\uff08ETag\u7167\u5408\u6210\u529f\uff09\n   \u2192 200: \u901a\u5e38\u306e\u30ea\u30af\u30a8\u30b9\u30c8\uff08\u30ad\u30e3\u30c3\u30b7\u30e5\u306a\u3057\uff09\n\n4. ETag\u306e\u78ba\u8a8d\uff1a\n   \u2192 \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30af\u30ea\u30c3\u30af\n   \u2192 Response Headers \u30bf\u30d6\u3067 ETag \u306e\u5024\u3092\u78ba\u8a8d\n   \u2192 Request Headers \u30bf\u30d6\u3067 If-None-Match \u306e\u5024\u3092\u78ba\u8a8d\n\n5. \u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u7121\u52b9\u306b\u3057\u3066\u30c6\u30b9\u30c8\uff1a\n   \u2192 \"Disable cache\"\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092ON\uff08DevTools\u304c\u958b\u3044\u3066\u3044\u308b\u9593\u306e\u307f\uff09\n   \u2192 \u307e\u305f\u306f Ctrl+Shift+R \u3067\u30cf\u30fc\u30c9\u30ea\u30ed\u30fc\u30c9\n\n6. Lighthouse\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u52b9\u7387\u3092\u6e2c\u5b9a\uff1a\n   \u2192 Audits \u30bf\u30d6 \u2192 \"Uses efficient cache policy on static assets\"\n   \u2192 \u9577\u671f\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u30ea\u30bd\u30fc\u30b9\u306e\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u308b<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3078\u306e\u5f71\u97ff\u6e2c\u5b9a<\/h2>\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-none\" data-lang=\"Code\"><code>&gt;\u3010\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u524d\u5f8c\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6bd4\u8f03\u4f8b\u3011\n\n\u8a2d\u5b9a\u524d\uff08\u30ad\u30e3\u30c3\u30b7\u30e5\u306a\u3057\uff09\uff1a\n\u521d\u56de\u30a2\u30af\u30bb\u30b9\uff1a\n  GET \/app.js \u2192 200 (320KB, 850ms)\n  GET \/styles.css \u2192 200 (45KB, 320ms)\n  GET \/hero.webp \u2192 200 (180KB, 1200ms)\n  \u5408\u8a08\u8ee2\u9001\u91cf\uff1a545KB\u3001\u5408\u8a08\u6642\u9593\uff1a2370ms\n\n2\u56de\u76ee\u30a2\u30af\u30bb\u30b9\uff1a\n  GET \/app.js \u2192 200 (320KB, 800ms) \u2190 \u5168\u90e8\u518d\u53d6\u5f97\n  GET \/styles.css \u2192 200 (45KB, 310ms)\n  \u5408\u8a08\uff1a\u5909\u308f\u3089\u305a\u91cd\u3044\n\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n\n\u8a2d\u5b9a\u5f8c\uff08\u9069\u5207\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\uff09\uff1a\n\u521d\u56de\u30a2\u30af\u30bb\u30b9\uff1a\n  GET \/app.a1b2c3.js \u2192 200 (320KB, 850ms)\n  GET \/styles.d4e5f6.css \u2192 200 (45KB, 320ms)\n  GET \/hero.webp \u2192 200 (180KB, 1200ms)\n  \u5408\u8a08\u8ee2\u9001\u91cf\uff1a545KB\uff08\u521d\u56de\u306f\u5909\u308f\u3089\u306a\u3044\uff09\n\n2\u56de\u76ee\u30a2\u30af\u30bb\u30b9\uff1a\n  GET \/app.a1b2c3.js \u2192 200 (from disk cache, 0ms, 0bytes)\n  GET \/styles.d4e5f6.css \u2192 200 (from disk cache, 0ms, 0bytes)\n  GET \/hero.webp \u2192 200 (from disk cache, 0ms, 0bytes)\n  GET \/index.html \u2192 304 (Not Modified, 18ms, 200bytes)\n  \u5408\u8a08\u8ee2\u9001\u91cf\uff1a200bytes\uff0899.9%\u524a\u6e1b\uff01\uff09\u3001\u5408\u8a08\u6642\u9593\uff1a18ms<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Q1. Vite\/Next.js\u3067\u30d3\u30eb\u30c9\u3059\u308b\u3068\u81ea\u52d5\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A.<\/strong> Vite\u306f\u30d3\u30eb\u30c9\u3067 <code>assets\/main-abc123.js<\/code> \u306e\u3088\u3046\u306b\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u30cf\u30c3\u30b7\u30e5\u3092\u4ed8\u4e0e\u3057\u307e\u3059\u3002\u3053\u306e\u305f\u3081\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5909\u308f\u308c\u3070URL\u81ea\u4f53\u304c\u5909\u308f\u308b\u306e\u3067\u300c\u540c\u4e00URL\u306f\u6c38\u4e45\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u826f\u3044\uff08immutable\uff09\u300d\u3068\u3044\u3046\u8a2d\u5b9a\u304c\u53ef\u80fd\u3067\u3059\u3002<strong>\u30b5\u30fc\u30d0\u30fc\u5074\u3067 <code>Cache-Control: public, max-age=31536000, immutable<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u306e\u304c\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3067\u3059\u3002<\/strong>\u305f\u3060\u3057\u3001\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u306f\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3059\u308b\u3060\u3051\u3067\u3001HTTP\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a\u306f\u30b5\u30fc\u30d0\u30fc\uff08Nginx\/Cloudflare\/Vercel\uff09\u5074\u3067\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q2. \u5f37\u3044ETag\uff08Strong ETag\uff09\u3068\u5f31\u3044ETag\uff08Weak ETag\uff09\u306f\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A.<\/strong> \u901a\u5e38\u306f<strong>\u5f37\u3044ETag<\/strong>\uff08<code>\"abc123\"<\/code>\uff09\u3092\u63a8\u5968\u3057\u307e\u3059\u3002\u30d0\u30a4\u30c8\u5358\u4f4d\u3067\u540c\u4e00\u306e\u5834\u5408\u306e\u307f\u4e00\u81f4\u3059\u308b\u305f\u3081\u3001\u7cbe\u5ea6\u304c\u9ad8\u304f\u4fe1\u983c\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u5f31\u3044ETag\uff08<code>W\/\"abc123\"<\/code>\uff09\u306f\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u306b\u540c\u7b49\u3067\u3042\u308c\u3070\u4e00\u81f4\u3059\u308b\u305f\u3081\u3001HTTP\u3068HTTPS\u9593\u3084gzip\u5727\u7e2e\u306e\u6709\u7121\u306a\u3069\u300c\u5185\u5bb9\u306f\u540c\u3058\u3060\u304c\u8868\u73fe\u304c\u7570\u306a\u308b\u300d\u30b1\u30fc\u30b9\u306b\u4f7f\u3044\u307e\u3059\u3002Nginx\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3068Mtime\u304b\u3089\u5f31\u3044ETag\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c4\u30cf\u30c3\u30b7\u30e5\u3092\u4f7f\u3063\u3066\u72ec\u81ea\u751f\u6210\u3059\u308b\u5834\u5408\u306f\u5f37\u3044ETag\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q3. Cache-Control: no-cache \u3068 no-store \u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A.<\/strong> \u3053\u308c\u306f\u3088\u304f\u6df7\u540c\u3055\u308c\u308b\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002<code>no-cache<\/code>\u306f\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4fdd\u5b58\u3059\u308b\u304c\u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u306b\u78ba\u8a8d\u3059\u308b\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u3059\uff08\u540d\u524d\u306b\u53cd\u3057\u3066\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u308f\u306a\u3044\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\uff09\u3002<code>no-store<\/code>\u306f\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4e00\u5207\u4fdd\u5b58\u3057\u306a\u3044\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u3001\u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30d5\u30eb\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002HTML\u3084API\u30ec\u30b9\u30dd\u30f3\u30b9\u3067\u300c\u5e38\u306b\u6700\u65b0\u3092\u78ba\u8a8d\u3057\u305f\u3044\u304c\u5e2f\u57df\u306f\u7bc0\u7d04\u3057\u305f\u3044\u300d\u5834\u5408\u306f <code>no-cache + ETag<\/code> \u3092\u4f7f\u3044\u307e\u3057\u3087\u3046\u3002\u500b\u4eba\u60c5\u5831\u3084\u6a5f\u5bc6\u30c7\u30fc\u30bf\u306f <code>no-store<\/code> \u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q4. stale-while-revalidate \u3092\u4f7f\u3046\u3068\u53e4\u3044\u30c7\u30fc\u30bf\u304c\u3044\u3064\u307e\u3067\u3082\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u304b\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A.<\/strong> <code>stale-while-revalidate<\/code> \u306e\u7b2c\u4e8c\u5024\u3067\u300c\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u6700\u5927\u671f\u9593\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070 <code>max-age=60, stale-while-revalidate=300<\/code> \u306a\u3089\u3001\u6700\u59275\u5206\u9593\u306f\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u304c\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u65b0\u3057\u3044\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306e\u3067\u6b21\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u304b\u3089\u306f\u6700\u65b0\u30c7\u30fc\u30bf\u304c\u8fd4\u308a\u307e\u3059\u3002SEO\u3084\u516c\u5f0f\u767a\u8868\u306a\u3069\u300c\u5373\u6642\u6700\u65b0\u3092\u8868\u793a\u3059\u3079\u304d\u300d\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u306f\u5411\u304d\u307e\u305b\u3093\u304c\u3001\u4e00\u822c\u7684\u306a\u30ea\u30b9\u30c8\u8868\u793a\u3084\u53c2\u7167\u30c7\u30fc\u30bf\u306b\u306f\u6700\u9069\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Q5. CDN\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306bETag\u306f\u6a5f\u80fd\u3057\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A.<\/strong> CDN\u304c\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3044\u308b\u5834\u5408\u3001CDN\u304cETag\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u8ee2\u9001\u3059\u308b\u304b\u3069\u3046\u304b\u306f\u8a2d\u5b9a\u306b\u3088\u308a\u307e\u3059\u3002Cloudflare\u306f\u901a\u5e38ETag\u3092\u305d\u306e\u307e\u307e\u30d6\u30e9\u30a6\u30b6\u306b\u8ee2\u9001\u3057\u307e\u3059\u3002CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u3042\u308b\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u306f <code>If-None-Match<\/code> \u3092CDN\u306b\u9001\u308a\u3001CDN\u304c\u30aa\u30ea\u30b8\u30f3\u30b5\u30fc\u30d0\u30fc\u306b\u8ee2\u9001\u3059\u308b\u304b\u3069\u3046\u304b\u306fCDN\u306e\u8a2d\u5b9a\u6b21\u7b2c\u3067\u3059\u3002<strong>CDN\u306f <code>Vary: Accept-Encoding<\/code> \u306e\u8a2d\u5b9a\u304c\u91cd\u8981<\/strong>\u3067\u3001\u3053\u308c\u304c\u306a\u3044\u3068gzip\u5727\u7e2e\u6e08\u307f\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306b\u8fd4\u3057\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><strong>ETag<\/strong>\uff1a\u30ea\u30bd\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u30cf\u30c3\u30b7\u30e5\u3002<code>If-None-Match<\/code> \u3067\u5909\u66f4\u78ba\u8a8d\u3057\u3001\u5909\u66f4\u306a\u3057\u306f304\u3092\u8fd4\u3057\u3066\u5e2f\u57df\u3092\u7bc0\u7d04\u3059\u308b\u3002<\/li>\n  <li><strong>Cache-Control<\/strong>\uff1amax-age\u3067\u300c\u4f55\u79d2\u9593\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u3089\u306a\u3044\u304b\u300d\u3092\u5236\u5fa1\u3002\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u7d30\u304b\u304f\u5236\u5fa1\u53ef\u80fd\u3002<\/li>\n  <li><strong>stale-while-revalidate<\/strong>\uff1a\u901f\u5ea6\u3068\u9bae\u5ea6\u3092\u4e21\u7acb\u3059\u308b\u5f37\u529b\u306a\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3002\u671f\u9650\u5207\u308c\u5f8c\u3082\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8fd4\u3057\u306a\u304c\u3089\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u66f4\u65b0\u3002<\/li>\n  <li><strong>\u7528\u9014\u5225\u306e\u4f7f\u3044\u5206\u3051<\/strong>\uff1a\u9759\u7684\u30d5\u30a1\u30a4\u30eb\u306f\u30cf\u30c3\u30b7\u30e5+1\u5e74immutable\u3001HTML\u306fno-cache+ETag\u3001\u30bb\u30f3\u30b7\u30c6\u30a3\u30d6\u30c7\u30fc\u30bf\u306fno-store\u3002<\/li>\n  <li><strong>CDN\u30ad\u30e3\u30c3\u30b7\u30e5<\/strong>\uff1as-maxage\u3067CDN\u5c02\u7528\u306e\u6709\u52b9\u671f\u9650\u3092\u8a2d\u5b9a\u3002Vary\u30d8\u30c3\u30c0\u30fc\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u5206\u5c90\u6761\u4ef6\u3092\u6307\u5b9a\u3059\u308b\u3002<\/li>\n  <li><strong>Cache-Busting<\/strong>\uff1a\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u30cf\u30c3\u30b7\u30e5\u3092\u542b\u3081\u308b\u65b9\u6cd5\u304c\u6700\u3082\u78ba\u5b9f\u3002<\/li>\n  <li><strong>Nginx\u5b9f\u88c5<\/strong>\uff1aetag on \u304c\u57fa\u672c\u8a2d\u5b9a\u3002URL\u30d1\u30bf\u30fc\u30f3\u306b\u3088\u3063\u3066Cache-Control\u3092\u51fa\u3057\u5206\u3051\u308b\u3002<\/li>\n  <li><strong>\u30c7\u30d0\u30c3\u30b0<\/strong>\uff1aDevTools\u306eNetwork\u30bf\u30d6\u3067\u30b9\u30c6\u30fc\u30bf\u30b9\u30fbETag\u30d8\u30c3\u30c0\u30fc\u3092\u78ba\u8a8d\u3002Lighthouse\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u52b9\u7387\u3092\u6e2c\u5b9a\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><span class=\"swl-marker mark_yellow\">\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u76f4\u7d50\u3059\u308b\u91cd\u8981\u306a\u8a2d\u5b9a\u3067\u3059\u3002\u300c\u5909\u3048\u306a\u3044\u3082\u306e\u306f\u9577\u671f\u30ad\u30e3\u30c3\u30b7\u30e5\uff08immutable\uff09\u30fb\u5909\u308f\u308a\u3046\u308b\u3082\u306e\u306fETag\u3067\u78ba\u8a8d\uff08no-cache\uff09\u30fb\u30e6\u30fc\u30b6\u30fc\u56fa\u6709\u30c7\u30fc\u30bf\u306f\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u306a\u3044\uff08no-store\uff09\u300d\u3068\u3044\u30463\u3064\u306e\u539f\u5247\u3067\u8a2d\u8a08\u3059\u308b\u3068\u3001\u5e2f\u57df\u5e45\u306e\u7bc0\u7d04\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u9bae\u5ea6\u3092\u4e21\u7acb\u3067\u304d\u307e\u3059\u3002<\/span><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!-- withmedia-related -->\n<h2 class=\"wp-block-heading\">\u95a2\u9023\u8a18\u4e8b<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/withcode.tech\/media\/engineer_hard_work\">\u3010\u30a8\u30f3\u30b8\u30cb\u30a2\u3011\u304d\u3064\u304f\u3066\u5927\u5909\uff01\u514b\u670d\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\uff01<\/a><\/li>\n<li><a href=\"https:\/\/withcode.tech\/media\/web_product_develop_difference\">\u3010\u3053\u3093\u306a\u306b\u9055\u3046\uff01\u3011Web\u5236\u4f5c\u3068Web\u958b\u767a\u306e\u9055\u3044\u3092\u6bd4\u8f03\uff01<\/a><\/li>\n<li><a href=\"https:\/\/withcode.tech\/media\/web-engineer-future\/\">\u3010\u73fe\u5f79IT\u30a8\u30f3\u30b8\u30cb\u30a2\u304c\u89e3\u8aac\u3011Web\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u5c06\u6765\u306f\uff1f\u958b\u767a\u73fe\u5834\u306e\u73fe\u72b6\u3082\u5408\u308f\u305b\u3066\u89e3\u8aac\uff01<\/a><\/li>\n<li><a href=\"https:\/\/withcode.tech\/media\/wordpress-discord-integration\/\">WordPress\u3068Discord\u3092\u9023\u643a\u3055\u305b\u308b\u306b\u306f\uff1f\u52b9\u679c\u7684\u306a\u7d71\u5408\u65b9\u6cd5\u3092\u89e3\u8aac<\/a><\/li>\n<li><a href=\"https:\/\/withcode.tech\/media\/wordpress-custom-post-type\/\">WordPress\u306e\u30ab\u30b9\u30bf\u30e0\u6295\u7a3f\u3068\u306f\uff1f\u30d7\u30e9\u30b0\u30a4\u30f3\u300cCustom Post Type UI\u300d\u3067\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3092\u5fb9\u5e95\u89e3\u8aac\uff01<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!-- withmedia-references -->\n<h2 class=\"wp-block-heading\">\u53c2\u8003\u30ea\u30f3\u30af\uff08\u516c\u5f0f\u30fb\u4e00\u6b21\u60c5\u5831\uff09<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/HTML\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Docs \u2014 HTML<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Docs \u2014 CSS<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Docs \u2014 JavaScript<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WithCode\u3092\u4f53\u9a13\u3067\u304d\u308b\u521d\u7d1a\u30b3\u30fc\u30b9\u516c\u958b\u4e2d\uff01<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img decoding=\"async\" width=\"600\" height=\"500\" src=\"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2024\/04\/\u30d0\u30ca\u30fc_300\u00d7250_20240425.png\" alt=\"WithCode\u3092\u4f53\u9a13\u3067\u304d\u308b\u521d\u7d1a\u30b3\u30fc\u30b9\u516c\u958b\u4e2d\uff01\" class=\"wp-image-2650\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">\u521d\u7d1a\u30b3\u30fc\u30b9(\u00a549,800)\u304c\u5b8c\u5168\u7121\u6599\u306b\uff01<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u671f\u9593\uff1a1\u9031\u9593<\/strong><\/li>\n<li><strong>\u5b66\u7fd2\u5185\u5bb9\uff1a<\/strong><br><strong>\u30ed\u30fc\u30c9\u30de\u30c3\u30d7\/\u57fa\u790e\u77e5\u8b58\/\u74b0\u5883\u69cb\u7bc9\/HTML\/CSS\/LP\u30fb\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u4f5c\u6210<\/strong><br><strong>\u2192 <span class=\"swl-marker mark_yellow\">\u6b63\u3057\u3044\u5b66\u7fd2\u65b9\u6cd5\u3067\u300c\u78ba\u304b\u306a\u6210\u9577\u300d\u3092\u5b9f\u611f\u3067\u304d\u308b\u30ab\u30ea\u30ad\u30e5\u30e9\u30e0\u3002<\/span><\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u526f\u696d\u30fb\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u304c\u4e3b\u6d41\u306b\u306a\u3063\u3066\u3044\u308b\u4eca\u3053\u305d\u3001\u81ea\u3089\u306e\u30b9\u30ad\u30eb\u3067\u7a3c\u3052\u308b\u4eba\u6750\u3092\u76ee\u6307\u3057\u3066\u307f\u307e\u305b\u3093\u304b\uff1f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u672a\u7d4c\u9a13\u3067\u3082\u5fc3\u914d\u3059\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u521d\u7d1a\u30b3\u30fc\u30b9\u3092\u53d7\u8b1b\u3055\u308c\u308b\u65b9\u306e\u5927\u591a\u6570\u306f\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u672a\u7d4c\u9a13\u3067\u3059\u3002\u307e\u305a\u306f\u7121\u6599\u30ab\u30a6\u30f3\u30bb\u30ea\u30f3\u30b0\u3067\u3001\u60a9\u307f\u3084\u4e0d\u5b89\u3092\u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\uff01<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/withcode.tech\/reservation\/\" style=\"background-color:#ffbf00\"><strong>\u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u7121\u6599\u30ab\u30a6\u30f3\u30bb\u30ea\u30f3\u30b0\u306b\u7533\u3057\u8fbc\u3080 \u2192<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<!-- withmedia-faq-schema -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Vite\/Next.js\u3067\u30d3\u30eb\u30c9\u3059\u308b\u3068\u81ea\u52d5\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u304b\uff1f\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Vite\u306f\u30d3\u30eb\u30c9\u3067 assets\/main-abc123.js \u306e\u3088\u3046\u306b\u30d5\u30a1\u30a4\u30eb\u540d\u306b\u30cf\u30c3\u30b7\u30e5\u3092\u4ed8\u4e0e\u3057\u307e\u3059\u3002\u3053\u306e\u305f\u3081\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5909\u308f\u308c\u3070URL\u81ea\u4f53\u304c\u5909\u308f\u308b\u306e\u3067\u300c\u540c\u4e00URL\u306f\u6c38\u4e45\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u826f\u3044\uff08immutable\uff09\u300d\u3068\u3044\u3046\u8a2d\u5b9a\u304c\u53ef\u80fd\u3067\u3059\u3002\u30b5\u30fc\u30d0\u30fc\u5074\u3067 Cache-Control: public, max-age=31536000, immutable \u3092\u8a2d\u5b9a\u3059\u308b\u306e\u304c\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u306f\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3059\u308b\u3060\u3051\u3067\u3001HTTP\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a\u306f\u30b5\u30fc\u30d0\u30fc\uff08Nginx\/Cloudflare\/Vercel\uff09\u5074\u3067\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"\u5f37\u3044ETag\uff08Strong ETag\uff09\u3068\u5f31\u3044ETag\uff08Weak ETag\uff09\u306f\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u3067\u3059\u304b\uff1f\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"\u901a\u5e38\u306f\u5f37\u3044ETag\uff08\\\"abc123\\\"\uff09\u3092\u63a8\u5968\u3057\u307e\u3059\u3002\u30d0\u30a4\u30c8\u5358\u4f4d\u3067\u540c\u4e00\u306e\u5834\u5408\u306e\u307f\u4e00\u81f4\u3059\u308b\u305f\u3081\u3001\u7cbe\u5ea6\u304c\u9ad8\u304f\u4fe1\u983c\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u5f31\u3044ETag\uff08W\/\\\"abc123\\\"\uff09\u306f\u30bb\u30de\u30f3\u30c6\u30a3\u30c3\u30af\u306b\u540c\u7b49\u3067\u3042\u308c\u3070\u4e00\u81f4\u3059\u308b\u305f\u3081\u3001HTTP\u3068HTTPS\u9593\u3084gzip\u5727\u7e2e\u306e\u6709\u7121\u306a\u3069\u300c\u5185\u5bb9\u306f\u540c\u3058\u3060\u304c\u8868\u73fe\u304c\u7570\u306a\u308b\u300d\u30b1\u30fc\u30b9\u306b\u4f7f\u3044\u307e\u3059\u3002Nginx\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3068Mtime\u304b\u3089\u5f31\u3044ETag\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c4\u30cf\u30c3\u30b7\u30e5\u3092\u4f7f\u3063\u3066\u72ec\u81ea\u751f\u6210\u3059\u308b\u5834\u5408\u306f\u5f37\u3044ETag\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Cache-Control: no-cache \u3068 no-store \u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"\u3053\u308c\u306f\u3088\u304f\u6df7\u540c\u3055\u308c\u308b\u30dd\u30a4\u30f3\u30c8\u3067\u3059\u3002no-cache\u306f\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4fdd\u5b58\u3059\u308b\u304c\u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u306b\u78ba\u8a8d\u3059\u308b\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u3059\uff08\u540d\u524d\u306b\u53cd\u3057\u3066\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4f7f\u308f\u306a\u3044\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\uff09\u3002no-store\u306f\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u4e00\u5207\u4fdd\u5b58\u3057\u306a\u3044\u300d\u3068\u3044\u3046\u610f\u5473\u3067\u3001\u6bce\u56de\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30d5\u30eb\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002HTML\u3084API\u30ec\u30b9\u30dd\u30f3\u30b9\u3067\u300c\u5e38\u306b\u6700\u65b0\u3092\u78ba\u8a8d\u3057\u305f\u3044\u304c\u5e2f\u57df\u306f\u7bc0\u7d04\u3057\u305f\u3044\u300d\u5834\u5408\u306f no-cache + ETag \u3092\u4f7f\u3044\u307e\u3057\u3087\u3046\u3002\u500b\u4eba\u60c5\u5831\u3084\u6a5f\u5bc6\u30c7\u30fc\u30bf\u306f no-store \u3092\u4f7f\u3044\u307e\u3059\u3002\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"stale-while-revalidate \u3092\u4f7f\u3046\u3068\u53e4\u3044\u30c7\u30fc\u30bf\u304c\u3044\u3064\u307e\u3067\u3082\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u304b\uff1f\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"stale-while-revalidate \u306e\u7b2c\u4e8c\u5024\u3067\u300c\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u6700\u5927\u671f\u9593\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070 max-age=60, stale-while-revalidate=300 \u306a\u3089\u3001\u6700\u59275\u5206\u9593\u306f\u53e4\u3044\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u304c\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u65b0\u3057\u3044\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306e\u3067\u6b21\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u304b\u3089\u306f\u6700\u65b0\u30c7\u30fc\u30bf\u304c\u8fd4\u308a\u307e\u3059\u3002SEO\u3084\u516c\u5f0f\u767a\u8868\u306a\u3069\u300c\u5373\u6642\u6700\u65b0\u3092\u8868\u793a\u3059\u3079\u304d\u300d\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u306f\u5411\u304d\u307e\u305b\u3093\u304c\u3001\u4e00\u822c\u7684\u306a\u30ea\u30b9\u30c8\u8868\u793a\u3084\u53c2\u7167\u30c7\u30fc\u30bf\u306b\u306f\u6700\u9069\u3067\u3059\u3002\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"CDN\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306bETag\u306f\u6a5f\u80fd\u3057\u307e\u3059\u304b\uff1f\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"CDN\u304c\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3044\u308b\u5834\u5408\u3001CDN\u304cETag\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u8ee2\u9001\u3059\u308b\u304b\u3069\u3046\u304b\u306f\u8a2d\u5b9a\u306b\u3088\u308a\u307e\u3059\u3002Cloudflare\u306f\u901a\u5e38ETag\u3092\u305d\u306e\u307e\u307e\u30d6\u30e9\u30a6\u30b6\u306b\u8ee2\u9001\u3057\u307e\u3059\u3002CDN\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u3042\u308b\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u306f If-None-Match \u3092CDN\u306b\u9001\u308a\u3001CDN\u304c\u30aa\u30ea\u30b8\u30f3\u30b5\u30fc\u30d0\u30fc\u306b\u8ee2\u9001\u3059\u308b\u304b\u3069\u3046\u304b\u306fCDN\u306e\u8a2d\u5b9a\u6b21\u7b2c\u3067\u3059\u3002CDN\u306f Vary: Accept-Encoding \u306e\u8a2d\u5b9a\u304c\u91cd\u8981\u3067\u3001\u3053\u308c\u304c\u306a\u3044\u3068gzip\u5727\u7e2e\u6e08\u307f\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306b\u8fd4\u3057\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\"\n      }\n    }\n  ]\n}\n<\/script>\n\n\n\n<!-- withmedia-article-schema -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"Organization\",\n      \"@id\": \"https:\/\/withcode.tech\/media\/#organization\",\n      \"name\": \"WithCode\",\n      \"url\": \"https:\/\/withcode.tech\/\",\n      \"description\": \"\u300c\u76ee\u6307\u3059\u306a\u3089\u7a3c\u3052\u308b\u4eba\u6750\u300d\u3092\u30d3\u30b8\u30e7\u30f3\u306b\u7d2f\u8a08400\u540d\u4ee5\u4e0a\u306e\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3092\u8f29\u51fa\u3057\u305f\u5b9f\u8df5\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b9\u30af\u30fc\u30eb\u3002150\u793e\u4ee5\u4e0a\u306e\u5b9f\u6848\u4ef6\u652f\u63f4\u306b\u57fa\u3065\u304dWeb\u5236\u4f5c\u30fbWeb\u30c7\u30b6\u30a4\u30f3\u306e\u60c5\u5831\u3092\u767a\u4fe1\u3002\",\n      \"logo\": {\n        \"@type\": \"ImageObject\",\n        \"url\": \"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2023\/12\/WITHCODE_logo.png\"\n      },\n      \"sameAs\": [\n        \"https:\/\/withcode.tech\/\"\n      ]\n    },\n    {\n      \"@type\": \"WebSite\",\n      \"@id\": \"https:\/\/withcode.tech\/media\/#website\",\n      \"name\": \"WithMedia\",\n      \"url\": \"https:\/\/withcode.tech\/media\/\",\n      \"publisher\": {\n        \"@id\": \"https:\/\/withcode.tech\/media\/#organization\"\n      },\n      \"inLanguage\": \"ja\"\n    },\n    {\n      \"@id\": \"https:\/\/withcode.tech\/media\/author\/withcode-officialgmail-com\/#author\",\n      \"name\": \"WithCode \u7de8\u96c6\u90e8\",\n      \"url\": \"https:\/\/withcode.tech\/media\/author\/withcode-officialgmail-com\/\",\n      \"description\": \"WithCode\uff08\u30a6\u30a3\u30ba\u30b3\u30fc\u30c9\uff09\u306f\u300c\u76ee\u6307\u3059\u306a\u3089\u7a3c\u3052\u308b\u4eba\u6750\u300d\u3092\u30d3\u30b8\u30e7\u30f3\u306b\u3001\u7d2f\u8a08400\u540d\u4ee5\u4e0a\u306e\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3092\u8f29\u51fa\u3057\u3066\u304d\u305f\u8d85\u5b9f\u8df5\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b9\u30af\u30fc\u30eb\u3067\u3059\u3002150\u793e\u4ee5\u4e0a\u306e\u5b9f\u6848\u4ef6\u652f\u63f4\u3092\u7279\u5fb4\u306bWeb\u5236\u4f5c\u30fbWeb\u30c7\u30b6\u30a4\u30f3\u306a\u3069\u306e\u5f79\u7acb\u3064\u60c5\u5831\u3092\u73fe\u5834\u306e\u30ce\u30a6\u30cf\u30a6\u306b\u57fa\u3065\u3044\u3066\u767a\u4fe1\u3057\u3066\u3044\u304d\u307e\u3059\u3002\",\n      \"worksFor\": {\n        \"@id\": \"https:\/\/withcode.tech\/media\/#organization\"\n      },\n      \"@type\": \"Organization\"\n    },\n    {\n      \"@type\": \"BlogPosting\",\n      \"@id\": \"https:\/\/withcode.tech\/media\/etag-browser-cache-optimization\/#article\",\n      \"headline\": \"ETag\u3067\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6700\u9069\u5316\u3059\u308b\u5b8c\u5168\u30ac\u30a4\u30c9\uff5cCache-Control\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u30fbstale-while-revalidate\u30fbCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbNext.js\/Nginx\u5b9f\u88c5\u307e\u3067\u5fb9\u5e95\u89e3\u8aac\",\n      \"mainEntityOfPage\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"https:\/\/withcode.tech\/media\/etag-browser-cache-optimization\/\"\n      },\n      \"datePublished\": \"2026-03-17T06:27:36Z\",\n      \"dateModified\": \"2026-07-06T14:36:38Z\",\n      \"author\": {\n        \"@id\": \"https:\/\/withcode.tech\/media\/author\/withcode-officialgmail-com\/#author\"\n      },\n      \"publisher\": {\n        \"@id\": \"https:\/\/withcode.tech\/media\/#organization\"\n      },\n      \"isPartOf\": {\n        \"@id\": \"https:\/\/withcode.tech\/media\/#website\"\n      },\n      \"inLanguage\": \"ja\",\n      \"description\": \"ETag\u3067\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6700\u9069\u5316\u3059\u308b\u65b9\u6cd5\u3092\u5b8c\u5168\u89e3\u8aac\u3002Cache-Control\u5168\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u30fbstale-while-revalidate\u30fbCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbNext.js\/Nginx\u5b9f\u88c5\u4f8b\u307e\u3067\u3001\u30b3\u30fc\u30c9\u4ed8\u304d\u3067\u5fb9\u5e95\u30ac\u30a4\u30c9\u3057\u307e\u3059\u3002\",\n      \"image\": \"https:\/\/withcode.tech\/media\/wp-content\/uploads\/2026\/07\/13193-eyecatch.jpg\"\n    },\n    {\n      \"@type\": \"BreadcrumbList\",\n      \"@id\": \"https:\/\/withcode.tech\/media\/etag-browser-cache-optimization\/#breadcrumb\",\n      \"itemListElement\": [\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 1,\n          \"name\": \"\u30db\u30fc\u30e0\",\n          \"item\": \"https:\/\/withcode.tech\/media\/\"\n        },\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 2,\n          \"name\": \"\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\",\n          \"item\": \"https:\/\/withcode.tech\/media\/programming\/\"\n        },\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 3,\n          \"name\": \"ETag\u3067\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6700\u9069\u5316\u3059\u308b\u5b8c\u5168\u30ac\u30a4\u30c9\uff5cCache-Control\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u30fbstale-while-revalidate\u30fbCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbNext.js\/Nginx\u5b9f\u88c5\u307e\u3067\u5fb9\u5e95\u89e3\u8aac\",\n          \"item\": \"https:\/\/withcode.tech\/media\/etag-browser-cache-optimization\/\"\n        }\n      ]\n    }\n  ]\n}\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>ETag\u3067\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u6700\u9069\u5316\u3059\u308b\u65b9\u6cd5\u3092\u5b8c\u5168\u89e3\u8aac\u3002Cache-Control\u5168\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u30fb\u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u30fbstale-while-revalidate\u30fbCDN\u30ad\u30e3\u30c3\u30b7\u30e5\u30fbNext.js\/Nginx\u5b9f\u88c5\u4f8b\u307e\u3067\u3001\u30b3\u30fc\u30c9\u4ed8\u304d\u3067\u5fb9\u5e95\u30ac\u30a4\u30c9\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":2,"featured_media":14321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"swell_btn_cv_data":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[34],"tags":[],"class_list":["post-13193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/13193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/comments?post=13193"}],"version-history":[{"count":14,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/13193\/revisions"}],"predecessor-version":[{"id":17842,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/posts\/13193\/revisions\/17842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media\/14321"}],"wp:attachment":[{"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/media?parent=13193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/categories?post=13193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withcode.tech\/media\/wp-json\/wp\/v2\/tags?post=13193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}