1:HL["/_next/static/media/2d141e1a38819612-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
2:HL["/_next/static/css/cf073754662ee1dd.css","style",{"crossOrigin":""}]
0:["PKb518kvGJ1fSv37ZR9-f",[[["",{"children":["blog",{"children":[["slug","nextjs-four-caching-layers","d"],{"children":["__PAGE__?{\"slug\":\"nextjs-four-caching-layers\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cf073754662ee1dd.css","precedence":"next","crossOrigin":""}]],"$L4"]]]]
5:I[7221,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"ThemeProvider"]
6:I[2920,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"Header"]
7:I[6899,[],""]
8:I[345,[],""]
9:I[9311,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
c:I[9328,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"GoogleAnalytics"]
d:I[5097,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Dissecting Four Layers of Caching in Next.js | Adarsha Acharya"}],["$","meta","2",{"name":"description","content":"In depth overview of four levels of caching mechanisms in Next.js 14 (app router): Request Memoization, Data Cache, Full Route Cache and Router Cache."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"Dissecting Four Layers of Caching in Next.js"}],["$","meta","7",{"property":"og:description","content":"In depth overview of four levels of caching mechanisms in Next.js 14 (app router): Request Memoization, Data Cache, Full Route Cache and Router Cache."}],["$","meta","8",{"property":"og:url","content":"https://adarsha.dev/blog/nextjs-four-caching-layers"}],["$","meta","9",{"property":"og:site_name","content":"Adarsha Acharya"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://adarsha.dev/og?title=Dissecting%20Four%20Layers%20of%20Caching%20in%20Next.js"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"Dissecting Four Layers of Caching in Next.js"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"property":"article:published_time","content":"2024-05-19\r"}],["$","meta","17",{"property":"article:author","content":"Adarsha Acharya"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Dissecting Four Layers of Caching in Next.js"}],["$","meta","20",{"name":"twitter:description","content":"In depth overview of four levels of caching mechanisms in Next.js 14 (app router): Request Memoization, Data Cache, Full Route Cache and Router Cache."}],["$","meta","21",{"name":"twitter:image","content":"https://adarsha.dev/og?title=Dissecting%20Four%20Layers%20of%20Caching%20in%20Next.js"}],["$","meta","22",{"name":"next-size-adjust"}]]
3:[null,["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/_static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/_static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/_static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/_static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/_static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","meta",null,{"name":"google-site-verification","content":"br9AjaAyJgS4OVigpXtHmm2DwdzuzMqzpK4G77lD2TY"}]],["$","body",null,{"className":"mx-auto min-h-screen max-w-3xl antialiased dark:bg-zinc-950 dark:text-gray-100 __className_0aa4ae","children":[["$","$L5",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","main",null,{"className":"mx-4 px-2 md:px-0 lg:mx-auto flex flex-col justify-between min-h-screen","children":[["$","$L6",null,{}],["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","$L9",null,{"href":"/","className":"underline","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children",["slug","nextjs-four-caching-layers","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La","$Lb",null],"segment":"__PAGE__?{\"slug\":\"nextjs-four-caching-layers\"}"},"styles":[]}],"segment":["slug","nextjs-four-caching-layers","d"]},"styles":[]}],"segment":"blog"},"styles":[]}],["$","footer",null,{"className":"flex justify-center align-center pt-10 pb-5 h-20px","children":["$","p",null,{"className":"text-gray-500 dark:text-gray-400 text-sm","children":["© ",2024," ",["$","a",null,{"href":"https://x.com/adarsha_ach","target":"_blank","rel":"noopener noreferrer","children":"Adarsha Acharya."}]," All rights reserved."]}]}]]}],null]}],["$","$Lc",null,{"gaId":"$undefined"}],["$","$Ld",null,{"async":true,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-undefined","crossOrigin":"anonymous","strategy":"afterInteractive"}]]}]]}],null]
e:I[3364,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
f:I[5900,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"Image"]
10:I[419,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"BlogComments"]
b:["$","section",null,{"children":[["$","h1",null,{"className":"text-2xl font-bold tracking-tighter","children":["$","$Le",null,{"children":"Dissecting Four Layers of Caching in Next.js"}]}],["$","div",null,{"className":"mb-8 mt-2 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400","children":["$","p",null,{"children":["May 19, 2024"," - ","9 min read"]}]}],[["$","article",null,{"className":"prose prose-neutral dark:prose-invert prose-quoteless max-w-none","children":[["$","$Lf",null,{"src":"/_static/blogs/nextjs-four-caching-layers/thumbnail.jpg","width":1280,"height":720,"alt":"data-cache-nextjs","className":"rounded-lg"}],"\n",["$","p",null,{"children":["Next.js was the first meta framework to pioneer ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://nextjs.org/docs/app/building-your-application/rendering/server-components","children":"Server Components"}],".\r\nOne of the topic which still troubles people using app router with Next.js is it caches everything. On the one side it helps to build the performant\r\napplications in Next.js, but on the other side it may leads users to see stale data if not handled properly."]}],"\n",["$","p",null,{"children":"In this article we will understand the four mechanisms of caching in Next.js in depth:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","a",null,{"href":"#1-request-memoization","children":"Request Memoization"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#2-data-cache","children":"Data Cache"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#3-full-route-cache","children":"Full Route Cache"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#4-router-cache","children":"Router Cache"}]}],"\n"]}],"\n",["$","h2",null,{"id":"1-request-memoization","children":[["$","a",null,{"className":"anchor","href":"#1-request-memoization","children":["$","span",null,{"className":"icon icon-link"}]}],"1. Request Memoization"]}],"\n",["$","p",null,{"children":["Typically, when we need the same data in multiple components of app, previously we need to fetch the data at the top of the component tree and\r\npass it down to the child components as props. Or another easiest way was to fetch data in each component separately, which used to\r\nlead to multiple network requests for the same data. Tools like ",["$","code",null,{"children":"react-query"}]," and ",["$","code",null,{"children":"swr"}]," were used to cache the network requests."]}],"\n",["$","p",null,{"children":["With server components, React has override the browser fetch function with its own fetch function which is memoized.\r\nWe can make the ",["$","code",null,{"children":"fetch"}]," request in each component that needs data and duplicated request are skipped,\r\nso user don't have to care about optimizing the network requests."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// memoize the fetch request + response is cached"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// Component First"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"function"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"Todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(); "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// makes network request and store reuslt in Request Memoization cache (CACHE MISS)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ..."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// Component Second"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"AnotherComponent"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" const "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(); "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// uses memoized fetch instead of calling the api again (CACHE HIT)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ..."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":"Note that fetch should have same URL and same options to be memoized."}],"\n",["$","h2",null,{"id":"2-data-cache","children":[["$","a",null,{"className":"anchor","href":"#2-data-cache","children":["$","span",null,{"className":"icon icon-link"}]}],"2. Data Cache"]}],"\n",["$","p",null,{"children":["Request memoization might help to skip the duplicate ",["$","code",null,{"children":"fetch"}]," requests, but it does solve the problem of caching the data\r\nacross the multiple users using different devices. With the ",["$","code",null,{"children":"Data Cache"}]," mechanism, we can cache the data across the users,\r\nso every user can get the ",["$","code",null,{"children":"cached"}]," data instead of making ",["$","code",null,{"children":"fetch"}]," request to data source. The cached data will be stored in the server and all the users using the application will be be fed with cached data."]}],"\n",["$","div",null,{"className":"mb-8 flex items-center rounded border border-neutral-200 bg-neutral-50 p-1 px-4 py-3 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100","children":[["$","div",null,{"className":"mr-4 flex w-4 items-center","children":"📦"}],["$","div",null,{"className":"callout w-full","children":["$","p",null,{"children":"With request cache we can reduce the no of request calls to the Next.js server or CDN, whereas with Data cache we reduce the requests made to our origin data source (DB, CMS, Markdown etc.)"}]}]]}],"\n",["$","p",null,{"children":["There are multiple way to store the data in the cache, we can use ",["$","code",null,{"children":"force-cache"}],", ",["$","code",null,{"children":"revalidate"}]," or ",["$","code",null,{"children":"no-store"}]," options in the fetch function to store the data in the cache."]}],"\n",["$","$Lf",null,{"src":"/_static/blogs/nextjs-four-caching-layers/data-cache.png","width":1280,"height":720,"alt":"data-cache-nextjs","className":"rounded-lg"}],"\n",["$","p",null,{"className":"text-center","children":"Image: Variants of Data Cache in Next.js "}],"\n",["$","h3",null,{"id":"force-cache","children":[["$","a",null,{"className":"anchor","href":"#force-cache","children":["$","span",null,{"className":"icon icon-link"}]}],"Force Cache"]}],"\n",["$","p",null,{"children":["By default Next.js caches every data in server memory, if we don't pass any options to ",["$","code",null,{"children":"fetch"}]," function default will be ",["$","code",null,{"children":"cache: \"force-cache\""}]," as shown below."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"cache "}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"force-cache\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }); "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// this will cache the data in server memory unless we build the app again"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"function"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"Todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(); "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// makes network request and store reuslt in Data Cache (CACHE MISS)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"map"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"key"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"id"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"title"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":"This will cache data in Next.js server memory, accross all the request made to server the server will respond with cache data instead of hitting the data source.\r\nThe above example might not be good as something like todos might be updated frequently, but for static data like blog posts, product details etc. this is a good approach."}],"\n",["$","h2",null,{"id":"revalidation-on-time-basis","children":[["$","a",null,{"className":"anchor","href":"#revalidation-on-time-basis","children":["$","span",null,{"className":"icon icon-link"}]}],"Revalidation on Time Basis"]}],"\n",["$","p",null,{"children":["Suppose we have a data that changes frequently, we can use ",["$","code",null,{"children":"revalidation"}]," to cache the data for certain time and after that time the data will be revalidated from the data source. We can use ",["$","code",null,{"children":"revalidate"}]," option to set the time in seconds to revalidate the data."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"revalidate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"60"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// revalidate the data after 60 seconds"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }); "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":"Here, the request made in first 60 secs will make th e cache hit and after 60 secs the data will be revalidated from the data source and\r\nagain stored in the cache. This is something like incremental static regeneration that we used to have in Next.js pages router."}],"\n",["$","h3",null,{"id":"on-demand-revalidation","children":[["$","a",null,{"className":"anchor","href":"#on-demand-revalidation","children":["$","span",null,{"className":"icon icon-link"}]}],"On-demand Revalidation"]}],"\n",["$","p",null,{"children":"Instead of letting nextjs to revalidate the data after certain time, we can also let users to revalidate the server cache on demand."}],"\n",["$","p",null,{"children":"This might be useful if we have todos list and on form submission we want to revalidate the todos list from the server.\r\nSo that fresh data can be stored in the server cache and consequent requests will be served with fresh data."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"revalidateTag"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"next/cache\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"next "}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"tags "}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ["}],["$","span",null,{"style":{"color":"#98C379"},"children":"'TODOS'"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"] } "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// tagging the cache data as TODOS tag so later it can be used to invalidate from cache"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }); "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"function"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"Todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"function"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"submit"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"'use server'"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"revalidateTag"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"'TODOS'"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// revalidate the TODOS tag "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// ..."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"map"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"key"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"id"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"title"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"form"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"button"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"formAction"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"submit"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Revalidate Todos"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":["As shown in above example, we can use server actions in the form to invoke the ",["$","code",null,{"children":"revalidateTag"}]," function to revalidate the cache data from the server.\r\nAfter the button click it will invalidate the current data, check data source (database or cms server) and store the fresh data in the cache."]}],"\n",["$","h3",null,{"id":"no-cache","children":[["$","a",null,{"className":"anchor","href":"#no-cache","children":["$","span",null,{"className":"icon icon-link"}]}],"No cache"]}],"\n",["$","p",null,{"children":["If we don't want to cache the data at all, we can use ",["$","code",null,{"children":"no-store"}]," option in fetch function. This is useful when we have data that changes frequently and we want to get the latest data every time."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"cache"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"no-store\""}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }); "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":"This will not cache the data at all, and every request made to the server will hit the data source."}],"\n",["$","p",null,{"children":"Or, mark the whole page to opt out of the cache by setting it on the page level itself."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"dynamic"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"'force-dynamic'"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// your page component code goes here..."}]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":"Now, every request made to the page will hit the data source and no cache will be stored in the server memory."}],"\n",["$","h2",null,{"id":"3-full-route-cache","children":[["$","a",null,{"className":"anchor","href":"#3-full-route-cache","children":["$","span",null,{"className":"icon icon-link"}]}],"3. Full Route Cache"]}],"\n",["$","p",null,{"children":"By default Next.js tries to render and cache all the routes at build time to minimize the html build time while requesting the page.\r\nThe build output contains the HTML + React Server Component Payload for each route which gets stored in the server/ CDN by Full Route cache.\r\nWhen the user visits the page HTML is shown immediately, RSC Payload is used to reconcile the Client and rendered Server Components tree, update the DOM\r\nand finally client components are hydrated."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"fetch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"res"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"json"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// Component First"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"function"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"Todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(); "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"div"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ..."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":["The above page will be rendered at ",["$","code",null,{"children":"build time"}],", fetching all the todos data and each route will be stored in Full Route cache ( HTML + RSCP).\r\nEach time user visits this page the build output will be served to user. Even though the data changes in the data source, the build output will be same until we build the app again. So the user will see the stale data, unless we rebuild tha app again.\r\nThe above behaviour can be noticed in production mode, in development mode the build output will be different each time we visit the page."]}],"\n",["$","p",null,{"children":["The build output will be same throughout the time unless we build the app again or revalidate the cahce using techniques like\r\n",["$","code",null,{"children":"revalidatePath"}]," or ",["$","code",null,{"children":"revalidateTag"}]," that we see earlier. This is useful for static pages like blog posts, product details etc."]}],"\n",["$","p",null,{"children":"We can opt out of Full Route cache by setting in the route level itself as shown in below."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"dynamic"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"'force-dynamic'"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// or "}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"revalidate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"0"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":["Or setting the data cache to ",["$","code",null,{"children":"no-store"}]," in the ",["$","code",null,{"children":"fetch"}]," function as shown above in data-cache option."]}],"\n",["$","p",null,{"children":["Also, if the pages uses dynamic data like ",["$","code",null,{"children":"headers"}]," , ",["$","code",null,{"children":"cookies"}]," or ",["$","code",null,{"children":"url params"}]," the Full Route cache will be disabled by default and fresh data will be served each time."]}],"\n",["$","h2",null,{"id":"4-router-cache","children":[["$","a",null,{"className":"anchor","href":"#4-router-cache","children":["$","span",null,{"className":"icon icon-link"}]}],"4. Router Cache"]}],"\n",["$","p",null,{"children":"Unlike other cache mechanism this is only applicable in client side, and the cahce is stored in browser memory.\r\nThe client side cache stores the React Server Component Payload, splitted in terms of routes."}],"\n",["$","p",null,{"children":["Next.js caches visited routes, also prefetches the pages that are pointed using ",["$","code",null,{"children":""}]," components.If the Link component is in the viewport, page it is pointing to will be pre-fetched and cached to the router cache,\r\nwhich ensured the smooth transitions between the pages."]}],"\n",["$","p",null,{"children":["If there are hundreds of ",["$","code",null,{"children":""}]," components in the page, it will prefetch all the pages and store in the router cache,\r\nwhich might lead to memory issues in the browser.\r\nIn that case we can opt-out of prefetching by setting ",["$","code",null,{"children":"prefetch"}]," to ",["$","code",null,{"children":"false"}]," in the ",["$","code",null,{"children":""}]," component."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Link"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"href"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"prefetch"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#D19A66"},"children":"false"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Todo 1"}]]}]}]}]}],"\n",["$","hr",null,{}],"\n",["$","h2",null,{"id":"conclusion","children":[["$","a",null,{"className":"anchor","href":"#conclusion","children":["$","span",null,{"className":"icon icon-link"}]}],"Conclusion"]}],"\n",["$","p",null,{"children":"The Next.js cache is something that is always on controversy since the first release and there is always the mixed reviews from devs about the cache mechanism.\r\nAs per now there is no way to opt out completely in the application level, but we can opt out in the page level itself. So, understanding\r\nthe cache mechanism helps to make informed decisions as per the application requirements which cache to use and which to opt out."}],"\n",["$","p",null,{"children":["If you have any questions or feedback, feel free to reach out to me on ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://x.com/adarsha_ach","children":"X.com"}]," / ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://www.linkedin.com/in/adarshaacharya/","children":"Linkedin"}]," or comment below."]}]]}],["$","$L10",null,{}]]]}]
a:null