[{"data":1,"prerenderedAt":808},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F":800},{"id":4,"title":5,"body":6,"description":779,"extension":780,"meta":781,"navigation":793,"path":794,"seo":795,"stem":798,"__hash__":799},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002Findex.md","SWR via Cache-Control vs Service Worker revalidation",{"type":7,"value":8,"toc":771},"minimark",[9,13,33,46,51,63,74,181,185,325,329,337,343,350,357,367,371,374,414,417,617,629,633,636,711,719,723,756,761,764,767],[10,11,5],"h1",{"id":12},"swr-via-cache-control-vs-service-worker-revalidation",[14,15,16,17,22,23,27,28,32],"p",{},"This comparison sits within the ",[18,19,21],"a",{"href":20},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002F","stale-while-revalidate implementation"," guide under ",[18,24,26],{"href":25},"\u002Fadvanced-caching-strategies-cdn-architecture\u002F","Advanced Caching Strategies & CDN Architecture",", and resolves a recurring architecture question: you want stale-while-revalidate behaviour, but should it live as an HTTP ",[29,30,31],"code",{},"Cache-Control"," directive enforced at the CDN edge, or as logic inside a Service Worker on the device?",[14,34,35,36,40,41,45],{},"Both deliver the same user-facing promise — instant cached response now, fresh copy next time — but they operate at different layers, with different blast radius, freshness guarantees, and effects on ",[18,37,39],{"href":38},"\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002F","Interaction to Next Paint"," and ",[18,42,44],{"href":43},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Largest Contentful Paint",". The targets are the same either way: TTFB ≤ 200ms, LCP \u003C 2.5s, INP \u003C 200ms, and no main-thread task over the 50ms long-task budget.",[47,48,50],"h2",{"id":49},"where-each-layer-revalidates","Where each layer revalidates",[14,52,53,54,57,58,62],{},"With ",[29,55,56],{},"Cache-Control: stale-while-revalidate",", the ",[59,60,61],"em",{},"edge"," owns the logic. The first byte the browser receives still comes over the network, but from the nearest point of presence, and the edge — not the device — handles the background refetch from origin. It is declarative: one header, applied to every visitor of every PoP, with no client code.",[14,64,65,66,69,70,73],{},"With a Service Worker, the ",[59,67,68],{},"device"," owns the logic. The worker intercepts ",[29,71,72],{},"fetch",", answers from the Cache API with zero network on a hit, and issues its own background revalidation. It is imperative: JavaScript you ship and version, running per browser, and it works offline.",[14,75,76],{},[77,78,85,86,85,90,85,94,85,104,85,111,85,120,85,126,85,130,85,136,85,141,85,145,85,148,85,152,85,155,85,161,85,164,85,168,85,173,85,177,85],"svg",{"xmlns":79,"viewBox":80,"width":81,"role":82,"ariaLabel":83,"style":84},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","0 0 760 300","100%","img","Two layers where stale-while-revalidate can run: the CDN edge versus the device service worker","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:#001d3d"," ",[87,88,89],"title",{},"SWR at the edge vs SWR in the worker",[91,92,93],"desc",{},"Edge SWR answers from the nearest PoP over the network; worker SWR answers from on-device cache and works offline.",[95,96],"rect",{"x":97,"y":97,"width":98,"height":99,"rx":100,"fill":101,"stroke":102,"style":103},"1","758","298","10","none","currentColor","stroke-opacity:0.18",[105,106,110],"text",{"x":107,"y":108,"fill":102,"style":109},"24","36","font-size:16px;font-weight:700","Where the revalidation runs",[95,112],{"x":113,"y":114,"width":115,"height":116,"rx":117,"fill":118,"stroke":118,"style":119},"40","70","150","56","6","#0466c8","fill-opacity:0.14",[95,121],{"x":122,"y":114,"width":115,"height":116,"rx":117,"fill":123,"stroke":124,"style":125},"300","#ffc300","#b8860b","fill-opacity:0.22",[95,127],{"x":128,"y":114,"width":129,"height":116,"rx":117,"fill":118,"stroke":118,"style":119},"560","160",[105,131,135],{"x":132,"y":133,"fill":102,"style":134},"115","94","font-size:13px;font-weight:600;text-anchor:middle","Origin",[105,137,140],{"x":132,"y":138,"fill":102,"style":139},"113","font-size:12px;text-anchor:middle","source of truth",[105,142,144],{"x":143,"y":133,"fill":102,"style":134},"375","CDN edge",[105,146,147],{"x":143,"y":138,"fill":102,"style":139},"Cache-Control SWR",[105,149,151],{"x":150,"y":133,"fill":102,"style":134},"640","Device worker",[105,153,154],{"x":150,"y":138,"fill":102,"style":139},"Cache API SWR",[156,157],"line",{"x1":158,"y1":159,"x2":122,"y2":159,"stroke":102,"style":160},"190","98","stroke-opacity:0.4",[156,162],{"x1":163,"y1":159,"x2":128,"y2":159,"stroke":102,"style":160},"450",[156,165],{"x1":107,"y1":129,"x2":166,"y2":129,"stroke":102,"style":167},"736","stroke-opacity:0.3",[105,169,172],{"x":107,"y":170,"fill":102,"style":171},"194","font-size:13px","Edge SWR: declarative header, still a network hop, no offline.",[105,174,176],{"x":107,"y":175,"fill":102,"style":171},"226","Worker SWR: zero-network hits, offline, but client code to ship.",[105,178,180],{"x":107,"y":179,"fill":102,"style":171},"258","They compose — edge in front of origin, worker in front of edge.",[47,182,184],{"id":183},"decision-matrix","Decision matrix",[186,187,188,204],"table",{},[189,190,191],"thead",{},[192,193,194,198,201],"tr",{},[195,196,197],"th",{},"Dimension",[195,199,200],{},"Cache-Control SWR (edge)",[195,202,203],{},"Service Worker SWR (device)",[205,206,207,219,230,241,252,263,281,292,303,314],"tbody",{},[192,208,209,213,216],{},[210,211,212],"td",{},"Layer",[210,214,215],{},"CDN \u002F shared cache",[210,217,218],{},"Per-device, in the browser",[192,220,221,224,227],{},[210,222,223],{},"Hit latency",[210,225,226],{},"Network hop to nearest PoP (~20-80ms)",[210,228,229],{},"Zero network — reads local Cache API",[192,231,232,235,238],{},[210,233,234],{},"Offline support",[210,236,237],{},"None — needs the network",[210,239,240],{},"Full — serves from cache offline",[192,242,243,246,249],{},[210,244,245],{},"Freshness control",[210,247,248],{},"Coarse: one TTL\u002Fwindow per route",[210,250,251],{},"Fine: arbitrary per-request logic",[192,253,254,257,260],{},[210,255,256],{},"Who is served stale",[210,258,259],{},"Every visitor on first request after expiry",[210,261,262],{},"Only the specific device, per its cache",[192,264,265,268,271],{},[210,266,267],{},"INP impact",[210,269,270],{},"None — work happens off-device",[210,272,273,274,276,277,280],{},"Slight — background ",[29,275,72],{},"\u002F",[29,278,279],{},"put"," on device",[192,282,283,286,289],{},[210,284,285],{},"LCP impact",[210,287,288],{},"Depends on PoP RTT",[210,290,291],{},"Best — instant on repeat visits",[192,293,294,297,300],{},[210,295,296],{},"First-visit benefit",[210,298,299],{},"Yes — shared cache helps cold clients",[210,301,302],{},"No — cache is empty until first fetch",[192,304,305,308,311],{},[210,306,307],{},"Setup complexity",[210,309,310],{},"Low — one header \u002F edge rule",[210,312,313],{},"High — register, version, debug a worker",[192,315,316,319,322],{},[210,317,318],{},"Failure blast radius",[210,320,321],{},"Edge config, easy to roll back",[210,323,324],{},"Buggy worker can break the whole site",[47,326,328],{"id":327},"when-to-pick-which","When to pick which",[14,330,331,332,336],{},"Reach for ",[333,334,335],"strong",{},"Cache-Control SWR at the edge"," as the default. It benefits first-time and cold-cache visitors (a shared edge object is warm for everyone), needs no client JavaScript, has a trivial rollback (change the header), and keeps the main thread free — so it never threatens INP. Use it for HTML, API JSON, and any resource where a sub-100ms PoP response is good enough and you do not need offline.",[14,338,331,339,342],{},[333,340,341],{},"Service Worker SWR"," when you specifically need what HTTP cannot give you: true offline support, zero-network repeat-visit reads (an installable PWA or app shell), or per-request revalidation logic too nuanced for a single header — for example revalidating only when a client-side ETag or auth scope changes. Accept that you are shipping, versioning, and debugging code, and that a bug has a large blast radius.",[14,344,345,346,349],{},"In practice the strongest setups ",[333,347,348],{},"compose both",": edge SWR protects the origin and warms cold clients, while a worker layered in front gives returning users offline and instant reads. They are not mutually exclusive — they revalidate at different layers.",[14,351,352,353,356],{},"The most consequential difference, and the one that decides most real cases, is ",[59,354,355],{},"who gets served stale and for how long",". Edge SWR is a shared cache: when the window opens, the very next visitor to that PoP gets the stale object and triggers the single background refresh that then benefits everyone behind that node. The staleness is broad but short-lived and self-healing across the whole audience. Worker SWR is per-device: each browser carries its own copy and its own revalidation cycle, so a user who has not returned in a week is served a week-old object on their next visit regardless of how many other users refreshed in the meantime. For frequently-read shared content, the edge's shared cache converges on freshness far faster; for a returning-after-a-gap individual on a flaky connection, the worker's local copy is the only thing that paints at all. Naming which of those two users you are optimising for usually settles the choice.",[14,358,359,360,362,363,366],{},"There is also an operational asymmetry worth weighing explicitly. An edge header change propagates in seconds and reverts just as fast, and a mistake degrades to \"slightly staler than intended\" — annoying, rarely catastrophic. A Service Worker, once installed, is sticky: a buggy ",[29,361,72],{}," handler can intercept ",[59,364,365],{},"every"," request on the origin and a bad deploy can be hard to claw back, because the broken worker is the very thing that controls whether the fixed worker can be fetched. That is why a worker-based approach demands a tested update-and-skipWaiting path and a rehearsed kill switch before it ships, whereas edge SWR carries almost none of that operational tax.",[47,368,370],{"id":369},"reference-implementations","Reference implementations",[14,372,373],{},"Edge SWR is a single declarative header:",[375,376,381],"pre",{"className":377,"code":378,"language":379,"meta":380,"style":380},"language-http shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","# Origin\u002Fedge response — the CDN owns the background refresh.\nCache-Control: public, max-age=60, stale-while-revalidate=600\n# trade-off: the window is one coarse value for all visitors. You cannot\n# revalidate \"only when the user's permissions changed\" — for per-request\n# freshness logic you need the worker version below, not this header.\n","http","",[29,382,383,390,396,402,408],{"__ignoreMap":380},[384,385,387],"span",{"class":156,"line":386},1,[384,388,389],{},"# Origin\u002Fedge response — the CDN owns the background refresh.\n",[384,391,393],{"class":156,"line":392},2,[384,394,395],{},"Cache-Control: public, max-age=60, stale-while-revalidate=600\n",[384,397,399],{"class":156,"line":398},3,[384,400,401],{},"# trade-off: the window is one coarse value for all visitors. You cannot\n",[384,403,405],{"class":156,"line":404},4,[384,406,407],{},"# revalidate \"only when the user's permissions changed\" — for per-request\n",[384,409,411],{"class":156,"line":410},5,[384,412,413],{},"# freshness logic you need the worker version below, not this header.\n",[14,415,416],{},"Worker SWR puts the same idea on-device, with explicit control:",[375,418,422],{"className":419,"code":420,"language":421,"meta":380,"style":380},"language-javascript shiki shiki-themes github-light-high-contrast github-light-high-contrast github-light-high-contrast","\u002F\u002F Device-side SWR — zero-network hits, works offline, per-request logic.\nasync function swr(request) {\n  const cache = await caches.open('data-v1');\n  const cached = await cache.match(request);\n  const fresh = fetch(request).then((res) => {\n    if (res.ok) cache.put(request, res.clone());\n    return res;\n  });\n  \u002F\u002F trade-off: this runs on the device's main-thread event loop. A large\n  \u002F\u002F synchronous response body cloned\u002Fparsed here can blow the 50ms long-task\n  \u002F\u002F budget and regress INP — do NOT use it for big payloads without chunking,\n  \u002F\u002F and prefer edge SWR when you don't actually need offline.\n  return cached || fresh;\n}\n","javascript",[29,423,424,430,454,484,504,537,557,566,572,578,584,590,596,611],{"__ignoreMap":380},[384,425,426],{"class":156,"line":386},[384,427,429],{"class":428},"sIIH1","\u002F\u002F Device-side SWR — zero-network hits, works offline, per-request logic.\n",[384,431,432,436,439,443,447,451],{"class":156,"line":392},[384,433,435],{"class":434},"sP5qI","async",[384,437,438],{"class":434}," function",[384,440,442],{"class":441},"ssM3C"," swr",[384,444,446],{"class":445},"syybb","(",[384,448,450],{"class":449},"seIZK","request",[384,452,453],{"class":445},") {\n",[384,455,456,459,463,466,469,472,475,477,481],{"class":156,"line":398},[384,457,458],{"class":434},"  const",[384,460,462],{"class":461},"sf6mN"," cache",[384,464,465],{"class":434}," =",[384,467,468],{"class":434}," await",[384,470,471],{"class":445}," caches.",[384,473,474],{"class":441},"open",[384,476,446],{"class":445},[384,478,480],{"class":479},"s-_DF","'data-v1'",[384,482,483],{"class":445},");\n",[384,485,486,488,491,493,495,498,501],{"class":156,"line":404},[384,487,458],{"class":434},[384,489,490],{"class":461}," cached",[384,492,465],{"class":434},[384,494,468],{"class":434},[384,496,497],{"class":445}," cache.",[384,499,500],{"class":441},"match",[384,502,503],{"class":445},"(request);\n",[384,505,506,508,511,513,516,519,522,525,528,531,534],{"class":156,"line":410},[384,507,458],{"class":434},[384,509,510],{"class":461}," fresh",[384,512,465],{"class":434},[384,514,515],{"class":441}," fetch",[384,517,518],{"class":445},"(request).",[384,520,521],{"class":441},"then",[384,523,524],{"class":445},"((",[384,526,527],{"class":449},"res",[384,529,530],{"class":445},") ",[384,532,533],{"class":434},"=>",[384,535,536],{"class":445}," {\n",[384,538,540,543,546,548,551,554],{"class":156,"line":539},6,[384,541,542],{"class":434},"    if",[384,544,545],{"class":445}," (res.ok) cache.",[384,547,279],{"class":441},[384,549,550],{"class":445},"(request, res.",[384,552,553],{"class":441},"clone",[384,555,556],{"class":445},"());\n",[384,558,560,563],{"class":156,"line":559},7,[384,561,562],{"class":434},"    return",[384,564,565],{"class":445}," res;\n",[384,567,569],{"class":156,"line":568},8,[384,570,571],{"class":445},"  });\n",[384,573,575],{"class":156,"line":574},9,[384,576,577],{"class":428},"  \u002F\u002F trade-off: this runs on the device's main-thread event loop. A large\n",[384,579,581],{"class":156,"line":580},10,[384,582,583],{"class":428},"  \u002F\u002F synchronous response body cloned\u002Fparsed here can blow the 50ms long-task\n",[384,585,587],{"class":156,"line":586},11,[384,588,589],{"class":428},"  \u002F\u002F budget and regress INP — do NOT use it for big payloads without chunking,\n",[384,591,593],{"class":156,"line":592},12,[384,594,595],{"class":428},"  \u002F\u002F and prefer edge SWR when you don't actually need offline.\n",[384,597,599,602,605,608],{"class":156,"line":598},13,[384,600,601],{"class":434},"  return",[384,603,604],{"class":445}," cached ",[384,606,607],{"class":434},"||",[384,609,610],{"class":445}," fresh;\n",[384,612,614],{"class":156,"line":613},14,[384,615,616],{"class":445},"}\n",[14,618,619,620,623,624,628],{},"For the per-strategy choice ",[59,621,622],{},"inside"," the worker (cache-first vs SWR for a given route in a React app), see the ",[18,625,627],{"href":626},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002Fswr-vs-cache-first-service-worker-for-react-spas\u002F","SWR vs cache-first Service Worker comparison",".",[47,630,632],{"id":631},"verification","Verification",[14,634,635],{},"Confirm SWR is genuinely active at the layer you chose:",[637,638,639,664,682,696,702],"ol",{},[640,641,642,85,645,648,649,652,653,276,656,659,660,663],"li",{},[333,643,644],{},"Edge SWR.",[29,646,647],{},"curl -sI"," the route twice just after expiry. Expected outcome: both return ",[29,650,651],{},"200"," fast, the cache-status header flips from ",[29,654,655],{},"STALE",[29,657,658],{},"REVALIDATING"," to ",[29,661,662],{},"HIT",", and the body updates on the second call — proving the edge revalidated in the background, not on the critical path.",[640,665,666,669,670,673,674,677,678,681],{},[333,667,668],{},"Worker SWR."," In DevTools, Application, Service Workers, reload and watch the Network tab: a hit shows the ",[29,671,672],{},"(ServiceWorker)"," response ",[333,675,676],{},"plus"," one background request to the same URL. Throttle to ",[333,679,680],{},"Offline"," and confirm the page still paints.",[640,683,684,687,688,691,692,695],{},[333,685,686],{},"INP guard (worker only)."," Record a reload in the Performance panel and confirm the worker's ",[29,689,690],{},"cache.put","\u002Fparse callback creates no task over 50ms; defer heavy writes with ",[29,693,694],{},"event.waitUntil"," so they leave the critical path.",[640,697,698,701],{},[333,699,700],{},"RUM field check."," Compare TTFB p75 for edge SWR and repeat-visit LCP for worker SWR before and after rollout. Expected outcome: edge SWR holds TTFB ≤ 200ms across PoPs; worker SWR drops repeat-visit LCP toward the local-read floor.",[640,703,704,707,708,710],{},[333,705,706],{},"Rollback drill."," For edge, revert the header and reconfirm; for the worker, ship a no-op ",[29,709,72],{}," passthrough and confirm the site still works — a worker rollback is the riskier of the two, so rehearse it.",[14,712,713,714,718],{},"Choosing the layer deliberately — and composing them where it pays — is what separates a resilient cache from a fragile one. When either layer hands you a stale object you must actively evict, the ",[18,715,717],{"href":716},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcache-invalidation-patterns\u002F","cache invalidation patterns"," guide covers the purge mechanics.",[47,720,722],{"id":721},"related","Related",[724,725,726,732,738,745,751],"ul",{},[640,727,728,731],{},[18,729,730],{"href":20},"Stale-while-revalidate implementation"," — the parent guide on SWR across headers, edge, and client.",[640,733,734,737],{},[18,735,736],{"href":626},"SWR vs cache-first Service Worker for React SPAs"," — choosing a strategy inside the worker itself.",[640,739,740,744],{},[18,741,743],{"href":742},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002Fconfiguring-stale-if-error-for-origin-outages\u002F","Configuring stale-if-error for origin outages"," — the resilience directive that pairs with edge SWR.",[640,746,747,750],{},[18,748,749],{"href":716},"Cache invalidation patterns"," — evicting stale objects from either layer after a change.",[640,752,753,755],{},[18,754,26],{"href":25}," — the broader architecture both layers serve.",[757,758,760],"script",{"type":759},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"Article\",\n  \"headline\": \"SWR via Cache-Control vs Service Worker revalidation\",\n  \"description\": \"A decision matrix comparing stale-while-revalidate at the CDN edge against stale-while-revalidate implemented inside a Service Worker, covering freshness, offline, INP\u002FLCP, and complexity.\",\n  \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F\",\n  \"datePublished\": \"2026-06-18\",\n  \"dateModified\": \"2026-06-18\",\n  \"author\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\", \"logo\": { \"@type\": \"ImageObject\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Flogo.svg\" } },\n  \"mainEntityOfPage\": { \"@type\": \"WebPage\", \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F\" }\n}\n",[757,762,763],{"type":759},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Choose between Cache-Control SWR at the edge and Service Worker SWR\",\n  \"step\": [\n    { \"@type\": \"HowToStep\", \"name\": \"Verify edge SWR\", \"text\": \"curl the route twice after expiry and confirm a fast STALE-to-HIT transition with an updated body.\" },\n    { \"@type\": \"HowToStep\", \"name\": \"Verify worker SWR\", \"text\": \"Confirm a (ServiceWorker) hit plus a background request, and that the page paints offline.\" },\n    { \"@type\": \"HowToStep\", \"name\": \"Guard INP\", \"text\": \"Confirm the worker's cache write creates no task over the 50ms long-task budget; defer with waitUntil.\" },\n    { \"@type\": \"HowToStep\", \"name\": \"Check RUM\", \"text\": \"Confirm edge SWR holds TTFB under 200ms and worker SWR lowers repeat-visit LCP.\" },\n    { \"@type\": \"HowToStep\", \"name\": \"Rehearse rollback\", \"text\": \"Revert the header for edge, or ship a passthrough worker, and confirm the site still works.\" }\n  ]\n}\n",[757,765,766],{"type":759},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Advanced Caching Strategies & CDN Architecture\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Stale-While-Revalidate Implementation\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 4, \"name\": \"SWR via Cache-Control vs Service Worker revalidation\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F\" }\n  ]\n}\n",[768,769,770],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sIIH1, html code.shiki .sIIH1{--shiki-default:#66707B;--shiki-dark:#66707B;--shiki-light:#66707B}html pre.shiki code .sP5qI, html code.shiki .sP5qI{--shiki-default:#A0111F;--shiki-dark:#A0111F;--shiki-light:#A0111F}html pre.shiki code .ssM3C, html code.shiki .ssM3C{--shiki-default:#622CBC;--shiki-dark:#622CBC;--shiki-light:#622CBC}html pre.shiki code .syybb, html code.shiki .syybb{--shiki-default:#0E1116;--shiki-dark:#0E1116;--shiki-light:#0E1116}html pre.shiki code .seIZK, html code.shiki .seIZK{--shiki-default:#702C00;--shiki-dark:#702C00;--shiki-light:#702C00}html pre.shiki code .sf6mN, html code.shiki .sf6mN{--shiki-default:#023B95;--shiki-dark:#023B95;--shiki-light:#023B95}html pre.shiki code .s-_DF, html code.shiki .s-_DF{--shiki-default:#032563;--shiki-dark:#032563;--shiki-light:#032563}",{"title":380,"searchDepth":392,"depth":392,"links":772},[773,774,775,776,777,778],{"id":49,"depth":392,"text":50},{"id":183,"depth":392,"text":184},{"id":327,"depth":392,"text":328},{"id":369,"depth":392,"text":370},{"id":631,"depth":392,"text":632},{"id":721,"depth":392,"text":722},"A decision matrix comparing stale-while-revalidate at the CDN edge against stale-while-revalidate implemented inside a Service Worker.","md",{"slug":782,"type":783,"breadcrumb":784,"datePublished":792,"dateModified":792},"swr-cache-control-vs-service-worker-revalidation","long_tail",[785,787,788,790],{"name":786,"url":276},"Home",{"name":26,"url":25},{"name":789,"url":20},"Stale-While-Revalidate Implementation",{"name":5,"url":791},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002F","2026-06-18",true,"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation",{"title":796,"description":797},"SWR: Cache-Control vs Service Worker","Compare stale-while-revalidate via HTTP Cache-Control at the CDN against SWR implemented in a Service Worker. Decision matrix on freshness, control, INP\u002FLCP, and complexity.","advanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Fswr-cache-control-vs-service-worker-revalidation\u002Findex","FtnboRByg6966X257VPKqk4Sb-IOL84qPvPlt3JnmY8",[801,804],{"title":789,"path":802,"stem":803,"children":-1},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation","advanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Findex",{"title":805,"path":806,"stem":807,"children":-1},"Core Web Vitals & Measurement","\u002Fcore-web-vitals-measurement","core-web-vitals-measurement\u002Findex",1782237170939]