[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fnginx-cache-based-cookies":3,"$fctLafnSlhr6ncd5uxNRu6cfRlwDKlOxl_LFWgt7D_j8":289,"i-local-icon:calendar-days":292,"i-local-icon:tag":297,"i-local-icon:eye":299},{"id":4,"title":5,"body":6,"categories_slug":277,"comment_count":280,"date_published":281,"description":26,"extension":282,"meta":283,"navigation":284,"path":285,"seo":286,"stem":287,"__hash__":288},"content\u002Fblog\u002F4.nginx-cache-based-cookies.md","NGINX cache based on cookies",{"type":7,"value":8,"toc":273},"minimark",[9,13,18,23,27,31,43,55,65,68,153,161,259,262,269],[10,11,5],"h1",{"id":12},"nginx-cache-based-on-cookies",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26],"p",{},"If you have a website where it is possible to serve multiple versions of the site using the same URL, you may run into problems where NGINX returns from cache the incorrect version. For example, if your site has multiple themes or you use browser user agent sniffing to provide different content to users.",[19,28,30],{"id":29},"solution","Solution",[24,32,33,34,38,39,42],{},"If you set cookies for different types of clients, themes etc… you can then use that cookie as part of your ",[35,36,37],"em",{},"proxy_cache_key"," (or ",[35,40,41],{},"fastcgi_cache_key"," if you are using fastcgi).",[24,44,45,46,54],{},"You can access cookie values in NGINX by using the $cookie_YOUR_COOKIE_NAME variable – a list of all available ",[47,48,53],"a",{":target":49,"href":50,"rel":51},"_blank","https:\u002F\u002Fnginx.org\u002Fen\u002Fdocs\u002Fhttp\u002Fngx_http_core_module.html#variables",[52],"nofollow","NGINX embedded variables can be found here",".",[24,56,57,58,61,62,54],{},"An example where you may use a light and dark theme for your site where the current theme is stored in a cookie called theme and might look something like ",[35,59,60],{},"theme=light"," or ",[35,63,64],{},"theme=dark",[24,66,67],{},"Then in your NGINX configuration file (nginx.conf), add the following code:",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-shell shiki shiki-themes github-dark","# Set different cache for different dark\u002Flight themes.\nmap $cookie_theme $cache_bypass {\n    default \"1\";\n    \"light\" \"2\";\n    \"dark\"  \"3\";\n    \"auto\"  \"4\";\n}\n","shell","",[76,77,78,87,102,114,125,136,147],"code",{"__ignoreMap":74},[79,80,83],"span",{"class":81,"line":82},"line",1,[79,84,86],{"class":85},"sAwPA","# Set different cache for different dark\u002Flight themes.\n",[79,88,90,94,98],{"class":81,"line":89},2,[79,91,93],{"class":92},"svObZ","map",[79,95,97],{"class":96},"s95oV"," $cookie_theme $cache_bypass ",[79,99,101],{"class":100},"sU2Wk","{\n",[79,103,105,108,111],{"class":81,"line":104},3,[79,106,107],{"class":92},"    default",[79,109,110],{"class":100}," \"1\"",[79,112,113],{"class":96},";\n",[79,115,117,120,123],{"class":81,"line":116},4,[79,118,119],{"class":92},"    \"light\"",[79,121,122],{"class":100}," \"2\"",[79,124,113],{"class":96},[79,126,128,131,134],{"class":81,"line":127},5,[79,129,130],{"class":92},"    \"dark\"",[79,132,133],{"class":100},"  \"3\"",[79,135,113],{"class":96},[79,137,139,142,145],{"class":81,"line":138},6,[79,140,141],{"class":92},"    \"auto\"",[79,143,144],{"class":100},"  \"4\"",[79,146,113],{"class":96},[79,148,150],{"class":81,"line":149},7,[79,151,152],{"class":96},"}\n",[24,154,155,156,38,158,160],{},"Now that we have the value from the stored browser cookie, we can add that to the ",[35,157,37],{},[35,159,41],{},") as follows:",[69,162,164],{"className":71,"code":163,"language":73,"meta":74,"style":74},"# Cache configuration\nfastcgi_cache_path \u002Fetc\u002Fnginx\u002Fcache levels=1:2 keys_zone=MYAPP:100m max_size=5g inactive=60m use_temp_path=off;\nfastcgi_cache_key \"$scheme$request_method$host$request_uri $cookie_theme\";\nfastcgi_cache_use_stale error timeout invalid_header http_500;\nfastcgi_ignore_headers Cache-Control Expires Set-Cookie;\nfastcgi_pass_header X-Accel-Expires;\n",[76,165,166,171,196,214,233,249],{"__ignoreMap":74},[79,167,168],{"class":81,"line":82},[79,169,170],{"class":85},"# Cache configuration\n",[79,172,173,176,179,182,185,188,191,194],{"class":81,"line":89},[79,174,175],{"class":92},"fastcgi_cache_path",[79,177,178],{"class":100}," \u002Fetc\u002Fnginx\u002Fcache",[79,180,181],{"class":100}," levels=1:2",[79,183,184],{"class":100}," keys_zone=MYAPP:100m",[79,186,187],{"class":100}," max_size=5g",[79,189,190],{"class":100}," inactive=60m",[79,192,193],{"class":100}," use_temp_path=off",[79,195,113],{"class":96},[79,197,198,200,203,206,209,212],{"class":81,"line":104},[79,199,41],{"class":92},[79,201,202],{"class":100}," \"",[79,204,205],{"class":96},"$scheme$request_method$host$request_uri",[79,207,208],{"class":96}," $cookie_theme",[79,210,211],{"class":100},"\"",[79,213,113],{"class":96},[79,215,216,219,222,225,228,231],{"class":81,"line":116},[79,217,218],{"class":92},"fastcgi_cache_use_stale",[79,220,221],{"class":100}," error",[79,223,224],{"class":100}," timeout",[79,226,227],{"class":100}," invalid_header",[79,229,230],{"class":100}," http_500",[79,232,113],{"class":96},[79,234,235,238,241,244,247],{"class":81,"line":127},[79,236,237],{"class":92},"fastcgi_ignore_headers",[79,239,240],{"class":100}," Cache-Control",[79,242,243],{"class":100}," Expires",[79,245,246],{"class":100}," Set-Cookie",[79,248,113],{"class":96},[79,250,251,254,257],{"class":81,"line":138},[79,252,253],{"class":92},"fastcgi_pass_header",[79,255,256],{"class":100}," X-Accel-Expires",[79,258,113],{"class":96},[24,260,261],{},"Using this type of NGINX cache configuration, pages will be cached separately for different themes so solves the issue where someone who has your site set to dark mode doesn’t receive cached content of your site which is using the light theme.",[24,263,264,268],{},[265,266,267],"strong",{},"Note:"," Having multiple caches can reduce the effectiveness of your caching system (shouldn’t be a big deal if only storing a dark\u002Flight theme option), but something to keep in mind if using a large number of themes and\u002For user agents.",[270,271,272],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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);}",{"title":74,"searchDepth":89,"depth":89,"links":274},[275,276],{"id":21,"depth":89,"text":22},{"id":29,"depth":89,"text":30},[278,279],"development","nginx",null,"2021-12-26","md",{},true,"\u002Fblog\u002Fnginx-cache-based-cookies",{"title":5,"description":26},"blog\u002F4.nginx-cache-based-cookies","pyoRxXiniD6vtx7DQZ-uMuAxZ-zeon7px1Y1SVslY4A",[290],{"id":116,"name":285,"count":291},5963,{"left":293,"top":293,"width":294,"height":294,"rotate":293,"vFlip":295,"hFlip":295,"body":296},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":293,"top":293,"width":294,"height":294,"rotate":293,"vFlip":295,"hFlip":295,"body":298},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":293,"top":293,"width":294,"height":294,"rotate":293,"vFlip":295,"hFlip":295,"body":300},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]