[{"data":1,"prerenderedAt":1894},["ShallowReactive",2],{"post-guide-to-api-caching-with-firebase-cdn":3},{"id":4,"title":5,"body":6,"canonicalUrl":1877,"cover":1878,"date":1879,"description":1880,"draft":1881,"extension":1882,"hashnodeId":1883,"meta":1884,"navigation":185,"path":1885,"seo":1886,"slug":1887,"stem":1887,"tags":1888,"__hash__":1893},"posts\u002Fguide-to-api-caching-with-firebase-cdn.md","Boost Your API Performance with Firebase CDN: A Guide to API Caching",{"type":7,"value":8,"toc":1860},"minimark",[9,22,27,30,35,42,46,56,59,64,74,79,99,102,105,109,119,122,126,129,143,146,153,163,239,258,343,346,370,380,397,1059,1062,1068,1071,1077,1081,1088,1197,1200,1279,1291,1326,1333,1343,1349,1364,1367,1372,1378,1383,1389,1392,1440,1444,1456,1465,1471,1474,1505,1508,1511,1517,1524,1536,1542,1559,1565,1582,1585,1597,1601,1604,1607,1616,1620,1623,1680,1684,1692,1698,1702,1711,1714,1808,1811,1815,1818,1821,1824,1827,1831,1839,1842,1849,1856],[10,11,12,13,17,18,21],"p",{},"If you're using or thinking of using ",[14,15,16],"code",{},"Firebase Cloud Functions"," or ",[14,19,20],{},"Cloud Run"," for your website\u002Fapp backend, I highly recommend looking into caching your API responses. Used appropriately it can improve the speed and performance of your website\u002Fapp. This article will give you a simple overview of what CDN and caching are, and how you can easily configure them in Firebase.",[23,24,26],"h2",{"id":25},"introduction","Introduction",[10,28,29],{},"Before going further, let's review the two terms, Caching and CDN, which are essential for a basic understanding of the topic.",[31,32,34],"h3",{"id":33},"what-is-caching","What is Caching?",[10,36,37,41],{},[38,39,40],"strong",{},"Caching"," is the process of storing copies of some of your data in temporary storage locations for faster retrieval. These temporary storage locations can be anywhere in between and including the original content storage (e.g. a database) and the client (e.g. your browser).",[31,43,45],{"id":44},"what-is-a-cdn","What is a CDN?",[10,47,48,49,17,52,55],{},"A ",[38,50,51],{},"CDN",[38,53,54],{},"Content Delivery Network"," is a network of geographically distributed servers that are used to serve content\u002Fdata to end users faster.",[10,57,58],{},"These servers sit between us, the client, and the origin server, and can keep a cache of our content for the configured time. Also, since they are distributed across the world, the data is served from the edge that is closest to us. And because of this proximity, the round trip delay is much lower compared to if the request had to be served from the origin server (or simply the origin).",[10,60,61],{},[38,62,63],{},"But how does the CDN get the data in the first place?",[10,65,66,67,73],{},"Initially, the CDN cache doesn't have any data, we call it a ",[68,69,70],"em",{},[38,71,72],{},"cold cache",". When a request is made, it is routed to the edge closest to you. The edge location checks its cache, which is empty, gets the data from the origin and returns it to you, simultaneously storing it in its cache (this is called warming the cache) for future requests.",[10,75,76],{},[38,77,78],{},"So one request is all it takes for the CDN to get the data?",[10,80,81,82,87,88,17,93,98],{},"Yes and no! The edge location closest to you gets the data when you make the first request. Now, any subsequent \"",[68,83,84],{},[38,85,86],{},"similar","\" request to the same edge, either by you or someone else, is served from the cache. Since this cache has the relevant data for the request, it is called a ",[68,89,90],{},[38,91,92],{},"warm",[68,94,95],{},[38,96,97],{},"hot cache",".",[10,100,101],{},"If a request is made to some other edge location by someone else then that server might not have any data stored yet, so the same process of data fetching and storing gets repeated there.",[10,103,104],{},"As you might have guessed, in this article we will be looking at storing our API responses at the CDN for faster retrieval.",[23,106,108],{"id":107},"configuring-api-caching-with-firebase-cdn","Configuring API Caching with Firebase CDN",[10,110,111,112,98],{},"So how do we configure the firebase CDN? If you look at the firebase documentation, you won't find any separate subsection called CDN. Firebase CDN is covered under firebase hosting, you can read about it ",[113,114,118],"a",{"href":115,"rel":116},"https:\u002F\u002Ffirebase.google.com\u002Fdocs\u002Fhosting#:~:text=deploy%20web%20apps%20and%20serve%20both%20static%20and%20dynamic%20content%20to%20a%20global%20CDN%20(content%20delivery%20network)",[117],"nofollow","in the introduction here",[10,120,121],{},"To use the CDN for API caching we need to connect our firebase function(s)\u002Fcloud run to firebase hosting. But does that mean we need to host our website on firebase hosting? Not necessarily.",[31,123,125],{"id":124},"setup-a-firebase-project","Setup a Firebase Project",[10,127,128],{},"If you don't have a firebase project already, create one using either the command line or the firebase console.",[10,130,131,132,135,136,139,140,98],{},"To show the difference between a direct firebase function call and one through the CDN we'll be creating a simple project. I simply executed the ",[14,133,134],{},"firebase init"," command inside an empty directory and followed the prompts (selected the default choice for each). In this project, I've enabled only ",[14,137,138],{},"hosting"," and ",[14,141,142],{},"functions",[10,144,145],{},"This is my current project directory. Everything has been generated by the init command",[10,147,148],{},[149,150],"img",{"alt":151,"src":152},"current project directory structure","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002Fa9f96ac7-3f02-4cd0-9d38-1f4413114335-44fe93a869.png",[10,154,155,156,159,160,162],{},"Next, head to the ",[14,157,158],{},"index.js"," file within the ",[14,161,142],{}," folder. I've created two simple functions inside it as shown below. We'll be using one of the functions directly and the other one through the CDN. On function calls, we just respond with preconfigured messages",[164,165,170],"pre",{"className":166,"code":167,"language":168,"meta":169,"style":169},"language-javascript shiki shiki-themes github-light github-dark","const functions = require('firebase-functions');\n\nexports.helloWorld = functions.https.onRequest((req, res) => {\n  functions.logger.info(`helloWorld! Hostname: ${req.hostname}`);\n  res.send({ message: 'Hello World!' });\n});\n\nexports.wonderfulWorld = functions.https.onRequest((req, res) => {\n  functions.logger.info(`wonderfulWorld! Hostname: ${req.hostname}`);\n  res.send({ message: 'What a Wonderful World!' });\n});\n","javascript","",[14,171,172,180,187,193,199,205,211,216,222,228,234],{"__ignoreMap":169},[173,174,177],"span",{"class":175,"line":176},"line",1,[173,178,179],{},"const functions = require('firebase-functions');\n",[173,181,183],{"class":175,"line":182},2,[173,184,186],{"emptyLinePlaceholder":185},true,"\n",[173,188,190],{"class":175,"line":189},3,[173,191,192],{},"exports.helloWorld = functions.https.onRequest((req, res) => {\n",[173,194,196],{"class":175,"line":195},4,[173,197,198],{},"  functions.logger.info(`helloWorld! Hostname: ${req.hostname}`);\n",[173,200,202],{"class":175,"line":201},5,[173,203,204],{},"  res.send({ message: 'Hello World!' });\n",[173,206,208],{"class":175,"line":207},6,[173,209,210],{},"});\n",[173,212,214],{"class":175,"line":213},7,[173,215,186],{"emptyLinePlaceholder":185},[173,217,219],{"class":175,"line":218},8,[173,220,221],{},"exports.wonderfulWorld = functions.https.onRequest((req, res) => {\n",[173,223,225],{"class":175,"line":224},9,[173,226,227],{},"  functions.logger.info(`wonderfulWorld! Hostname: ${req.hostname}`);\n",[173,229,231],{"class":175,"line":230},10,[173,232,233],{},"  res.send({ message: 'What a Wonderful World!' });\n",[173,235,237],{"class":175,"line":236},11,[173,238,210],{},[10,240,241,242,245,246,249,250,253,254,257],{},"If we try to call these functions from our ",[14,243,244],{},"index.html"," file we'll get ",[14,247,248],{},"CORS"," errors. So before deploying the functions let's install the ",[14,251,252],{},"cors"," package using the ",[14,255,256],{},"\"npm i cors\""," command and wrap the two functions' bodies inside it.",[164,259,261],{"className":166,"code":260,"language":168,"meta":169,"style":169},"const functions = require('firebase-functions');\n\u002F\u002F Require cors. For testing we're allowing it for all origins\nconst cors = require('cors')({origin: true})\n\nexports.helloWorld = functions.https.onRequest((req, res) => {\n  functions.logger.info(`helloWorld! Hostname: ${req.hostname}`);\n  cors(req, res, () => {\n    res.send({ message: 'Hello World!' });\n  })\n});\n\nexports.wonderfulWorld = functions.https.onRequest((req, res) => {\n  functions.logger.info(`wonderfulWorld! Hostname: ${req.hostname}`);\n  cors(req, res, () => {\n    res.send({ message: 'What a Wonderful World!' });\n  })\n});\n",[14,262,263,267,272,277,281,285,289,294,299,304,308,312,317,322,327,333,338],{"__ignoreMap":169},[173,264,265],{"class":175,"line":176},[173,266,179],{},[173,268,269],{"class":175,"line":182},[173,270,271],{},"\u002F\u002F Require cors. For testing we're allowing it for all origins\n",[173,273,274],{"class":175,"line":189},[173,275,276],{},"const cors = require('cors')({origin: true})\n",[173,278,279],{"class":175,"line":195},[173,280,186],{"emptyLinePlaceholder":185},[173,282,283],{"class":175,"line":201},[173,284,192],{},[173,286,287],{"class":175,"line":207},[173,288,198],{},[173,290,291],{"class":175,"line":213},[173,292,293],{},"  cors(req, res, () => {\n",[173,295,296],{"class":175,"line":218},[173,297,298],{},"    res.send({ message: 'Hello World!' });\n",[173,300,301],{"class":175,"line":224},[173,302,303],{},"  })\n",[173,305,306],{"class":175,"line":230},[173,307,210],{},[173,309,310],{"class":175,"line":236},[173,311,186],{"emptyLinePlaceholder":185},[173,313,315],{"class":175,"line":314},12,[173,316,221],{},[173,318,320],{"class":175,"line":319},13,[173,321,227],{},[173,323,325],{"class":175,"line":324},14,[173,326,293],{},[173,328,330],{"class":175,"line":329},15,[173,331,332],{},"    res.send({ message: 'What a Wonderful World!' });\n",[173,334,336],{"class":175,"line":335},16,[173,337,303],{},[173,339,341],{"class":175,"line":340},17,[173,342,210],{},[10,344,345],{},"Now we're ready to test these functions. Deploy the functions using the firebase deploy command",[164,347,351],{"className":348,"code":349,"language":350,"meta":169,"style":169},"language-bash shiki shiki-themes github-light github-dark","firebase deploy --only functions\n","bash",[14,352,353],{"__ignoreMap":169},[173,354,355,359,363,367],{"class":175,"line":176},[173,356,358],{"class":357},"sScJk","firebase",[173,360,362],{"class":361},"sZZnC"," deploy",[173,364,366],{"class":365},"sj4cs"," --only",[173,368,369],{"class":361}," functions\n",[10,371,372,373,375,376,379],{},"Now head over to the ",[14,374,244],{}," file inside the ",[14,377,378],{},"public"," folder and replace its content with the below code. I've just modified the file generated by firebase and added the two function calls in it.",[10,381,382,385,386,385,389,385,392],{},[68,383,384],{},"Don't forget to replace"," ",[14,387,388],{},"\u003Cproject_id>",[68,390,391],{},"with your actual project id. You may also need to change the function region if you deployed to a region other than",[68,393,394],{},[38,395,396],{},"us-central1",[164,398,402],{"className":399,"code":400,"language":401,"meta":169,"style":169},"language-xml shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n    \u003Ctitle>Welcome to Firebase Hosting\u003C\u002Ftitle>\n\n    \u003Cstyle media=\"screen\">\n      body {\n        background: #eceff1;\n        color: rgba(0, 0, 0, 0.87);\n        font-family: Roboto, Helvetica, Arial, sans-serif;\n        margin: 0;\n        padding: 0;\n      }\n      #message {\n        background: white;\n        max-width: 360px;\n        margin: 100px auto 16px;\n        padding: 32px 24px;\n        border-radius: 3px;\n      }\n      #message h1 {\n        font-size: 32px;\n        color: #ffa100;\n        font-weight: bold;\n        margin: 0 0 16px;\n      }\n      #message p {\n        line-height: 140%;\n        font-size: 14px;\n      }\n      #message a {\n        display: block;\n        text-align: center;\n        background: #039be5;\n        text-transform: uppercase;\n        text-decoration: none;\n        color: white;\n        padding: 16px;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      #message a:hover {\n        background: #028bd5;\n      }\n      #message,\n      #message a {\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n      }\n      #cdn,\n      #direct {\n        background: #e1e1e1;\n        padding: 4px 8px;\n        border-radius: 4px;\n        color: black;\n      }\n      @media (max-width: 600px) {\n        body,\n        #message {\n          margin-top: 0;\n          background: white;\n          box-shadow: none;\n        }\n        body {\n          border-top: 16px solid #ffa100;\n        }\n      }\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"message\">\n      \u003Ch1>Welcome\u003C\u002Fh1>\n      \u003Cp>Click on the button below to make the API Calls...\u003C\u002Fp>\n      \u003Ca onclick=\"makeCalls()\">Test API Calls\u003C\u002Fa>\n      \u003Cp>Response through CDN\u003C\u002Fp>\n      \u003Cpre id=\"cdn\">Waiting for the click…\u003C\u002Fpre>\n      \u003Cp>Response through function\u003C\u002Fp>\n      \u003Cpre id=\"direct\">Waiting for the click…\u003C\u002Fpre>\n    \u003C\u002Fdiv>\n\n    \u003Cscript>\n      const directEl = document.getElementById('direct');\n      const cdnEl = document.getElementById('cdn');\n\n      async function makeCalls() {\n        directEl.textContent = 'Loading...';\n        cdnEl.textContent = 'Loading...';\n\n        const promises = [\n          fetch(\n            'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FhelloWorld'\n          ),\n          fetch(\n            'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FwonderfulWorld'\n          ),\n        ];\n\n        const [directCall, cdnCall] = await Promise.allSettled(promises);\n        if (directCall.status === 'fulfilled' && directCall.value.ok) {\n          const directCallData = await directCall.value.json();\n          console.log('directCallData', directCallData);\n\n          directEl.textContent = JSON.stringify(directCallData, null, 2);\n        }\n\n        if (cdnCall.status === 'fulfilled' && cdnCall.value.ok) {\n          const cdnCallData = await cdnCall.value.json();\n          console.log('cdnCallData', cdnCallData);\n\n          cdnEl.textContent = JSON.stringify(cdnCallData, null, 2);\n        }\n      }\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","xml",[14,403,404,409,414,419,424,429,434,438,443,448,453,458,463,468,473,478,483,488,494,500,506,512,517,523,529,535,541,547,552,558,564,570,575,581,587,593,599,605,611,617,623,629,635,640,646,652,657,663,668,674,679,685,691,697,703,708,714,719,725,731,737,743,749,755,761,767,773,778,783,789,795,801,807,813,819,825,831,837,843,849,855,860,866,872,878,883,889,895,901,906,912,918,924,930,935,941,946,952,957,963,969,975,981,986,992,997,1002,1008,1014,1020,1025,1031,1036,1041,1047,1053],{"__ignoreMap":169},[173,405,406],{"class":175,"line":176},[173,407,408],{},"\u003C!DOCTYPE html>\n",[173,410,411],{"class":175,"line":182},[173,412,413],{},"\u003Chtml>\n",[173,415,416],{"class":175,"line":189},[173,417,418],{},"  \u003Chead>\n",[173,420,421],{"class":175,"line":195},[173,422,423],{},"    \u003Cmeta charset=\"utf-8\" \u002F>\n",[173,425,426],{"class":175,"line":201},[173,427,428],{},"    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F>\n",[173,430,431],{"class":175,"line":207},[173,432,433],{},"    \u003Ctitle>Welcome to Firebase Hosting\u003C\u002Ftitle>\n",[173,435,436],{"class":175,"line":213},[173,437,186],{"emptyLinePlaceholder":185},[173,439,440],{"class":175,"line":218},[173,441,442],{},"    \u003Cstyle media=\"screen\">\n",[173,444,445],{"class":175,"line":224},[173,446,447],{},"      body {\n",[173,449,450],{"class":175,"line":230},[173,451,452],{},"        background: #eceff1;\n",[173,454,455],{"class":175,"line":236},[173,456,457],{},"        color: rgba(0, 0, 0, 0.87);\n",[173,459,460],{"class":175,"line":314},[173,461,462],{},"        font-family: Roboto, Helvetica, Arial, sans-serif;\n",[173,464,465],{"class":175,"line":319},[173,466,467],{},"        margin: 0;\n",[173,469,470],{"class":175,"line":324},[173,471,472],{},"        padding: 0;\n",[173,474,475],{"class":175,"line":329},[173,476,477],{},"      }\n",[173,479,480],{"class":175,"line":335},[173,481,482],{},"      #message {\n",[173,484,485],{"class":175,"line":340},[173,486,487],{},"        background: white;\n",[173,489,491],{"class":175,"line":490},18,[173,492,493],{},"        max-width: 360px;\n",[173,495,497],{"class":175,"line":496},19,[173,498,499],{},"        margin: 100px auto 16px;\n",[173,501,503],{"class":175,"line":502},20,[173,504,505],{},"        padding: 32px 24px;\n",[173,507,509],{"class":175,"line":508},21,[173,510,511],{},"        border-radius: 3px;\n",[173,513,515],{"class":175,"line":514},22,[173,516,477],{},[173,518,520],{"class":175,"line":519},23,[173,521,522],{},"      #message h1 {\n",[173,524,526],{"class":175,"line":525},24,[173,527,528],{},"        font-size: 32px;\n",[173,530,532],{"class":175,"line":531},25,[173,533,534],{},"        color: #ffa100;\n",[173,536,538],{"class":175,"line":537},26,[173,539,540],{},"        font-weight: bold;\n",[173,542,544],{"class":175,"line":543},27,[173,545,546],{},"        margin: 0 0 16px;\n",[173,548,550],{"class":175,"line":549},28,[173,551,477],{},[173,553,555],{"class":175,"line":554},29,[173,556,557],{},"      #message p {\n",[173,559,561],{"class":175,"line":560},30,[173,562,563],{},"        line-height: 140%;\n",[173,565,567],{"class":175,"line":566},31,[173,568,569],{},"        font-size: 14px;\n",[173,571,573],{"class":175,"line":572},32,[173,574,477],{},[173,576,578],{"class":175,"line":577},33,[173,579,580],{},"      #message a {\n",[173,582,584],{"class":175,"line":583},34,[173,585,586],{},"        display: block;\n",[173,588,590],{"class":175,"line":589},35,[173,591,592],{},"        text-align: center;\n",[173,594,596],{"class":175,"line":595},36,[173,597,598],{},"        background: #039be5;\n",[173,600,602],{"class":175,"line":601},37,[173,603,604],{},"        text-transform: uppercase;\n",[173,606,608],{"class":175,"line":607},38,[173,609,610],{},"        text-decoration: none;\n",[173,612,614],{"class":175,"line":613},39,[173,615,616],{},"        color: white;\n",[173,618,620],{"class":175,"line":619},40,[173,621,622],{},"        padding: 16px;\n",[173,624,626],{"class":175,"line":625},41,[173,627,628],{},"        border-radius: 4px;\n",[173,630,632],{"class":175,"line":631},42,[173,633,634],{},"        cursor: pointer;\n",[173,636,638],{"class":175,"line":637},43,[173,639,477],{},[173,641,643],{"class":175,"line":642},44,[173,644,645],{},"      #message a:hover {\n",[173,647,649],{"class":175,"line":648},45,[173,650,651],{},"        background: #028bd5;\n",[173,653,655],{"class":175,"line":654},46,[173,656,477],{},[173,658,660],{"class":175,"line":659},47,[173,661,662],{},"      #message,\n",[173,664,666],{"class":175,"line":665},48,[173,667,580],{},[173,669,671],{"class":175,"line":670},49,[173,672,673],{},"        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n",[173,675,677],{"class":175,"line":676},50,[173,678,477],{},[173,680,682],{"class":175,"line":681},51,[173,683,684],{},"      #cdn,\n",[173,686,688],{"class":175,"line":687},52,[173,689,690],{},"      #direct {\n",[173,692,694],{"class":175,"line":693},53,[173,695,696],{},"        background: #e1e1e1;\n",[173,698,700],{"class":175,"line":699},54,[173,701,702],{},"        padding: 4px 8px;\n",[173,704,706],{"class":175,"line":705},55,[173,707,628],{},[173,709,711],{"class":175,"line":710},56,[173,712,713],{},"        color: black;\n",[173,715,717],{"class":175,"line":716},57,[173,718,477],{},[173,720,722],{"class":175,"line":721},58,[173,723,724],{},"      @media (max-width: 600px) {\n",[173,726,728],{"class":175,"line":727},59,[173,729,730],{},"        body,\n",[173,732,734],{"class":175,"line":733},60,[173,735,736],{},"        #message {\n",[173,738,740],{"class":175,"line":739},61,[173,741,742],{},"          margin-top: 0;\n",[173,744,746],{"class":175,"line":745},62,[173,747,748],{},"          background: white;\n",[173,750,752],{"class":175,"line":751},63,[173,753,754],{},"          box-shadow: none;\n",[173,756,758],{"class":175,"line":757},64,[173,759,760],{},"        }\n",[173,762,764],{"class":175,"line":763},65,[173,765,766],{},"        body {\n",[173,768,770],{"class":175,"line":769},66,[173,771,772],{},"          border-top: 16px solid #ffa100;\n",[173,774,776],{"class":175,"line":775},67,[173,777,760],{},[173,779,781],{"class":175,"line":780},68,[173,782,477],{},[173,784,786],{"class":175,"line":785},69,[173,787,788],{},"    \u003C\u002Fstyle>\n",[173,790,792],{"class":175,"line":791},70,[173,793,794],{},"  \u003C\u002Fhead>\n",[173,796,798],{"class":175,"line":797},71,[173,799,800],{},"  \u003Cbody>\n",[173,802,804],{"class":175,"line":803},72,[173,805,806],{},"    \u003Cdiv id=\"message\">\n",[173,808,810],{"class":175,"line":809},73,[173,811,812],{},"      \u003Ch1>Welcome\u003C\u002Fh1>\n",[173,814,816],{"class":175,"line":815},74,[173,817,818],{},"      \u003Cp>Click on the button below to make the API Calls...\u003C\u002Fp>\n",[173,820,822],{"class":175,"line":821},75,[173,823,824],{},"      \u003Ca onclick=\"makeCalls()\">Test API Calls\u003C\u002Fa>\n",[173,826,828],{"class":175,"line":827},76,[173,829,830],{},"      \u003Cp>Response through CDN\u003C\u002Fp>\n",[173,832,834],{"class":175,"line":833},77,[173,835,836],{},"      \u003Cpre id=\"cdn\">Waiting for the click…\u003C\u002Fpre>\n",[173,838,840],{"class":175,"line":839},78,[173,841,842],{},"      \u003Cp>Response through function\u003C\u002Fp>\n",[173,844,846],{"class":175,"line":845},79,[173,847,848],{},"      \u003Cpre id=\"direct\">Waiting for the click…\u003C\u002Fpre>\n",[173,850,852],{"class":175,"line":851},80,[173,853,854],{},"    \u003C\u002Fdiv>\n",[173,856,858],{"class":175,"line":857},81,[173,859,186],{"emptyLinePlaceholder":185},[173,861,863],{"class":175,"line":862},82,[173,864,865],{},"    \u003Cscript>\n",[173,867,869],{"class":175,"line":868},83,[173,870,871],{},"      const directEl = document.getElementById('direct');\n",[173,873,875],{"class":175,"line":874},84,[173,876,877],{},"      const cdnEl = document.getElementById('cdn');\n",[173,879,881],{"class":175,"line":880},85,[173,882,186],{"emptyLinePlaceholder":185},[173,884,886],{"class":175,"line":885},86,[173,887,888],{},"      async function makeCalls() {\n",[173,890,892],{"class":175,"line":891},87,[173,893,894],{},"        directEl.textContent = 'Loading...';\n",[173,896,898],{"class":175,"line":897},88,[173,899,900],{},"        cdnEl.textContent = 'Loading...';\n",[173,902,904],{"class":175,"line":903},89,[173,905,186],{"emptyLinePlaceholder":185},[173,907,909],{"class":175,"line":908},90,[173,910,911],{},"        const promises = [\n",[173,913,915],{"class":175,"line":914},91,[173,916,917],{},"          fetch(\n",[173,919,921],{"class":175,"line":920},92,[173,922,923],{},"            'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FhelloWorld'\n",[173,925,927],{"class":175,"line":926},93,[173,928,929],{},"          ),\n",[173,931,933],{"class":175,"line":932},94,[173,934,917],{},[173,936,938],{"class":175,"line":937},95,[173,939,940],{},"            'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FwonderfulWorld'\n",[173,942,944],{"class":175,"line":943},96,[173,945,929],{},[173,947,949],{"class":175,"line":948},97,[173,950,951],{},"        ];\n",[173,953,955],{"class":175,"line":954},98,[173,956,186],{"emptyLinePlaceholder":185},[173,958,960],{"class":175,"line":959},99,[173,961,962],{},"        const [directCall, cdnCall] = await Promise.allSettled(promises);\n",[173,964,966],{"class":175,"line":965},100,[173,967,968],{},"        if (directCall.status === 'fulfilled' && directCall.value.ok) {\n",[173,970,972],{"class":175,"line":971},101,[173,973,974],{},"          const directCallData = await directCall.value.json();\n",[173,976,978],{"class":175,"line":977},102,[173,979,980],{},"          console.log('directCallData', directCallData);\n",[173,982,984],{"class":175,"line":983},103,[173,985,186],{"emptyLinePlaceholder":185},[173,987,989],{"class":175,"line":988},104,[173,990,991],{},"          directEl.textContent = JSON.stringify(directCallData, null, 2);\n",[173,993,995],{"class":175,"line":994},105,[173,996,760],{},[173,998,1000],{"class":175,"line":999},106,[173,1001,186],{"emptyLinePlaceholder":185},[173,1003,1005],{"class":175,"line":1004},107,[173,1006,1007],{},"        if (cdnCall.status === 'fulfilled' && cdnCall.value.ok) {\n",[173,1009,1011],{"class":175,"line":1010},108,[173,1012,1013],{},"          const cdnCallData = await cdnCall.value.json();\n",[173,1015,1017],{"class":175,"line":1016},109,[173,1018,1019],{},"          console.log('cdnCallData', cdnCallData);\n",[173,1021,1023],{"class":175,"line":1022},110,[173,1024,186],{"emptyLinePlaceholder":185},[173,1026,1028],{"class":175,"line":1027},111,[173,1029,1030],{},"          cdnEl.textContent = JSON.stringify(cdnCallData, null, 2);\n",[173,1032,1034],{"class":175,"line":1033},112,[173,1035,760],{},[173,1037,1039],{"class":175,"line":1038},113,[173,1040,477],{},[173,1042,1044],{"class":175,"line":1043},114,[173,1045,1046],{},"    \u003C\u002Fscript>\n",[173,1048,1050],{"class":175,"line":1049},115,[173,1051,1052],{},"  \u003C\u002Fbody>\n",[173,1054,1056],{"class":175,"line":1055},116,[173,1057,1058],{},"\u003C\u002Fhtml>\n",[10,1060,1061],{},"If you load this html file in your browser and click the button you should be able to see the configured messages. But the first output label is misleading, as we haven't configured any CDN yet. Let's change that in the next section.",[10,1063,1064],{},[149,1065],{"alt":1066,"src":1067},"api call output","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F733b743d-7c70-4be1-9c95-1fdb7a0238ab-ef3f895698.png",[10,1069,1070],{},"Below is a screenshot of my Chrome dev console's network tab. As you can see both requests are taking similar times at this point",[10,1072,1073],{},[149,1074],{"alt":1075,"src":1076},"api network calls in the browser dev console","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F45f97f97-ad10-444d-92aa-a499ef7cfe64-81e487e580.png",[31,1078,1080],{"id":1079},"connecting-firebase-function-cdn","Connecting Firebase function & CDN",[10,1082,1083,1084,1087],{},"To connect one of the functions to the CDN, let's head over to the ",[14,1085,1086],{},"\"firebase.json\""," file at the root of the project, and make the below changes",[164,1089,1093],{"className":1090,"code":1091,"language":1092,"meta":169,"style":169},"language-json shiki shiki-themes github-light github-dark","\u002F\u002F Modify the hosting attribute of your \"firebase.json\"\n\"hosting\": {\n  \u002F\u002F...other hosting settings\n\n  \u002F\u002F Add the \"rewrites\" attribute within \"hosting\"\n  \"rewrites\": [\n    {\n      \"source\": \"\u002Fapi\u002Fwonderful\", \u002F\u002F Your api route\n      \"function\": \"wonderfulWorld\", \u002F\u002F Your function name\n      \"region\": \"us-central1\" \u002F\u002F The region where the function is deployed\n    }\n  ]\n}\n","json",[14,1094,1095,1101,1110,1115,1119,1124,1132,1137,1154,1169,1182,1187,1192],{"__ignoreMap":169},[173,1096,1097],{"class":175,"line":176},[173,1098,1100],{"class":1099},"sJ8bj","\u002F\u002F Modify the hosting attribute of your \"firebase.json\"\n",[173,1102,1103,1106],{"class":175,"line":182},[173,1104,1105],{"class":361},"\"hosting\"",[173,1107,1109],{"class":1108},"sVt8B",": {\n",[173,1111,1112],{"class":175,"line":189},[173,1113,1114],{"class":1099},"  \u002F\u002F...other hosting settings\n",[173,1116,1117],{"class":175,"line":195},[173,1118,186],{"emptyLinePlaceholder":185},[173,1120,1121],{"class":175,"line":201},[173,1122,1123],{"class":1099},"  \u002F\u002F Add the \"rewrites\" attribute within \"hosting\"\n",[173,1125,1126,1129],{"class":175,"line":207},[173,1127,1128],{"class":365},"  \"rewrites\"",[173,1130,1131],{"class":1108},": [\n",[173,1133,1134],{"class":175,"line":213},[173,1135,1136],{"class":1108},"    {\n",[173,1138,1139,1142,1145,1148,1151],{"class":175,"line":218},[173,1140,1141],{"class":365},"      \"source\"",[173,1143,1144],{"class":1108},": ",[173,1146,1147],{"class":361},"\"\u002Fapi\u002Fwonderful\"",[173,1149,1150],{"class":1108},", ",[173,1152,1153],{"class":1099},"\u002F\u002F Your api route\n",[173,1155,1156,1159,1161,1164,1166],{"class":175,"line":224},[173,1157,1158],{"class":365},"      \"function\"",[173,1160,1144],{"class":1108},[173,1162,1163],{"class":361},"\"wonderfulWorld\"",[173,1165,1150],{"class":1108},[173,1167,1168],{"class":1099},"\u002F\u002F Your function name\n",[173,1170,1171,1174,1176,1179],{"class":175,"line":230},[173,1172,1173],{"class":365},"      \"region\"",[173,1175,1144],{"class":1108},[173,1177,1178],{"class":361},"\"us-central1\"",[173,1180,1181],{"class":1099}," \u002F\u002F The region where the function is deployed\n",[173,1183,1184],{"class":175,"line":236},[173,1185,1186],{"class":1108},"    }\n",[173,1188,1189],{"class":175,"line":314},[173,1190,1191],{"class":1108},"  ]\n",[173,1193,1194],{"class":175,"line":319},[173,1195,1196],{"class":1108},"}\n",[10,1198,1199],{},"If you want to use Google Cloud Run instead of firebase cloud functions, you can connect the two using the below rewrite",[164,1201,1203],{"className":1090,"code":1202,"language":1092,"meta":169,"style":169},"\"hosting\": {\n  \"rewrites\": [\n    {\n      \"source\": \"\u002Fapi\u002Fwonderful\",\n      \"run\": {\n        \"serviceId\": \"\u003Ccloud_run_service_id>\",\n        \"region\": \"us-central1\" \u002F\u002F The region where cloud run is deployed\n      }\n    }\n  ]\n}\n",[14,1204,1205,1211,1217,1221,1232,1239,1251,1263,1267,1271,1275],{"__ignoreMap":169},[173,1206,1207,1209],{"class":175,"line":176},[173,1208,1105],{"class":361},[173,1210,1109],{"class":1108},[173,1212,1213,1215],{"class":175,"line":182},[173,1214,1128],{"class":365},[173,1216,1131],{"class":1108},[173,1218,1219],{"class":175,"line":189},[173,1220,1136],{"class":1108},[173,1222,1223,1225,1227,1229],{"class":175,"line":195},[173,1224,1141],{"class":365},[173,1226,1144],{"class":1108},[173,1228,1147],{"class":361},[173,1230,1231],{"class":1108},",\n",[173,1233,1234,1237],{"class":175,"line":201},[173,1235,1236],{"class":365},"      \"run\"",[173,1238,1109],{"class":1108},[173,1240,1241,1244,1246,1249],{"class":175,"line":207},[173,1242,1243],{"class":365},"        \"serviceId\"",[173,1245,1144],{"class":1108},[173,1247,1248],{"class":361},"\"\u003Ccloud_run_service_id>\"",[173,1250,1231],{"class":1108},[173,1252,1253,1256,1258,1260],{"class":175,"line":213},[173,1254,1255],{"class":365},"        \"region\"",[173,1257,1144],{"class":1108},[173,1259,1178],{"class":361},[173,1261,1262],{"class":1099}," \u002F\u002F The region where cloud run is deployed\n",[173,1264,1265],{"class":175,"line":218},[173,1266,477],{"class":1108},[173,1268,1269],{"class":175,"line":224},[173,1270,1186],{"class":1108},[173,1272,1273],{"class":175,"line":230},[173,1274,1191],{"class":1108},[173,1276,1277],{"class":175,"line":236},[173,1278,1196],{"class":1108},[10,1280,1281,1282,1284,1285,1287,1288,1290],{},"Next, head over to the ",[14,1283,244],{}," file and replace the ",[14,1286,1163],{}," function URL with the below URL. Replace ",[14,1289,388],{}," with your actual project id.",[164,1292,1294],{"className":166,"code":1293,"language":168,"meta":169,"style":169},"const promises = [\n  fetch(\n    'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FhelloWorld'\n  ),\n  fetch('https:\u002F\u002F\u003Cproject_id>.web.app\u002Fapi\u002Fwonderful'),\n];\n",[14,1295,1296,1301,1306,1311,1316,1321],{"__ignoreMap":169},[173,1297,1298],{"class":175,"line":176},[173,1299,1300],{},"const promises = [\n",[173,1302,1303],{"class":175,"line":182},[173,1304,1305],{},"  fetch(\n",[173,1307,1308],{"class":175,"line":189},[173,1309,1310],{},"    'https:\u002F\u002Fus-central1-\u003Cproject_id>.cloudfunctions.net\u002FhelloWorld'\n",[173,1312,1313],{"class":175,"line":195},[173,1314,1315],{},"  ),\n",[173,1317,1318],{"class":175,"line":201},[173,1319,1320],{},"  fetch('https:\u002F\u002F\u003Cproject_id>.web.app\u002Fapi\u002Fwonderful'),\n",[173,1322,1323],{"class":175,"line":207},[173,1324,1325],{},"];\n",[10,1327,1328,1329,1332],{},"After making this change we need to deploy our changes to firebase hosting. We can simply execute the ",[14,1330,1331],{},"\"firebase deploy\" or \"firebase deploy --only hosting\""," command to do it.",[10,1334,1335,1336,1338,1339,1342],{},"Now, if we reload our local ",[14,1337,244],{}," file, or, head over to the URL ",[14,1340,1341],{},"https:\u002F\u002F\u003Cproject_id>.web.app"," and click on the button a couple of times, we should see results similar to as shown below.",[10,1344,1345],{},[149,1346],{"alt":1347,"src":1348},"API calls, direct and through the CDN","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F30d41b52-2850-4bae-ba3b-37d649d6775c-d953ea16a0.png",[10,1350,1351,1352,1355,1356,1359,1360,1363],{},"Do note that the response size for the ",[14,1353,1354],{},"wonderful API call"," has increased from the earlier value of ",[14,1357,1358],{},"13 Bytes",". Also, as you can see, the first calls for both functions take significantly more time which is because of the cold start of the cloud function. Afterwards, the direct function call is consistently faster compared to the ",[14,1361,1362],{},"wonderful"," call routed through the CDN. This is because we've added one extra step to the trip and haven't added any cache yet.",[10,1365,1366],{},"You can click on these calls to see their details (specifically the Response headers)",[10,1368,1369],{},[38,1370,1371],{},"The helloWorld call",[10,1373,1374],{},[149,1375],{"alt":1376,"src":1377},"helloWorld function call","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002Fd9ff0a32-ab48-4570-b6dc-a354d899f704-976e6ada88.png",[10,1379,1380],{},[38,1381,1382],{},"The wonderful API call",[10,1384,1385],{},[149,1386],{"alt":1387,"src":1388},"wonderful api call","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F766cf201-f347-4300-b93d-87b84538db71-f7a394d263.png",[10,1390,1391],{},"As you can see, there are many extra headers present in this call compared to the previous one. Some of the interesting headers we can notice",[1393,1394,1395,1402,1408,1418,1427],"ul",{},[1396,1397,1398,1401],"li",{},[14,1399,1400],{},"x-served-by",": it mentions a cache (of course it is empty at this point)",[1396,1403,1404,1407],{},[14,1405,1406],{},"vary",": This contains more header names as compared to the direct function call",[1396,1409,1410,1413,1414,1417],{},[14,1411,1412],{},"x-cache",": With value ",[14,1415,1416],{},"MISS",", which is correct because there is nothing in the cache so it missed serving from the cache",[1396,1419,1420,1413,1423,1426],{},[14,1421,1422],{},"x-cache-hits",[14,1424,1425],{},"0",". If it serves from the cache then this value would be a positive integer",[1396,1428,1429,1432,1433,1436,1437,1439],{},[14,1430,1431],{},"cache-control",": With a value ",[14,1434,1435],{},"private"," for both calls. This is the header we'll be modifying for enabling cache. ",[14,1438,1435],{}," means that the data is private and can only be stored in a private cache, say your browser.",[31,1441,1443],{"id":1442},"configuring-cache-control-header","Configuring cache-control header",[10,1445,1446,1447,159,1449,1451,1452,1455],{},"Head over to the ",[14,1448,158],{},[14,1450,142],{}," folder, and add the following line to the two functions just before the ",[14,1453,1454],{},"\"res.send\""," line.",[164,1457,1459],{"className":166,"code":1458,"language":168,"meta":169,"style":169},"res.setHeader('cache-control', 'public, max-age=30, s-maxage=90');\n",[14,1460,1461],{"__ignoreMap":169},[173,1462,1463],{"class":175,"line":176},[173,1464,1458],{},[10,1466,1467,1468],{},"Deploy your functions changes by executing ",[14,1469,1470],{},"\"firebase deploy --only functions\".",[10,1472,1473],{},"What we're doing here is:",[1393,1475,1476,1485,1496],{},[1396,1477,1478,1479,1481,1482,1484],{},"Setting the ",[14,1480,1431],{}," header to ",[14,1483,378],{},". This allows the CDN to cache the data",[1396,1486,1487,1488,1491,1492,1495],{},"Setting ",[14,1489,1490],{},"max-age"," to ",[14,1493,1494],{},"30",". This means that the browser can store this response, and it will remain fresh and valid for 30 seconds from the time it was generated.",[1396,1497,1487,1498,1491,1501,1504],{},[14,1499,1500],{},"s-maxage",[14,1502,1503],{},"90",". This directive is similar to the max-age directive but applies only to the shared caches (the CDNs and proxies in between the origin and the client). So we're storing the response for a longer duration at the CDN. This may or may not be the case always and it can be removed if not needed.",[10,1506,1507],{},"So essentially what we've done is allow caching at the client as well as the intermediate steps in the journey. And also configured the time for which we can go on without asking the origin for fresh data.",[10,1509,1510],{},"Below is what I see in the network tab of my browser's dev console after making some requests",[10,1512,1513],{},[149,1514],{"alt":1515,"src":1516},"API calls with cache control header","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002Fbe32d6dc-fff3-452a-9dbb-986076e7408a-e00bc3a0f3.png",[10,1518,1519,1520,1523],{},"As you can see, the first requests for both functions are taking their usual timings. But the second requests which were made after ~10 seconds take only ",[14,1521,1522],{},"4ms",". And we also see that it has been served from the disk cache. That means the responses were cached locally and no new network request was made.",[10,1525,1526,1527,1529,1530,1532,1533,1535],{},"Below are the response headers for the first two ",[14,1528,1362],{}," calls. Notice the ",[14,1531,1412],{}," header with a value of ",[14,1534,1416],{},". If you check your dev console, you'll also see that for the second call, no request headers are present. This is because no network request was made for it.",[10,1537,1538],{},[149,1539],{"alt":1540,"src":1541},"wonderful api call 1","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F82e111b3-8913-42c0-bb3f-cee6e633fe3e-91fd9c7bee.png",[10,1543,1544,1545,1548,1549,1551,1552,1555,1556,1558],{},"What is interesting is the third batch of requests. The helloWorld function call takes its usual ",[14,1546,1547],{},"~400-500ms"," range (because a fresh request was made to the firebase function) but the ",[14,1550,1362],{}," call takes only ",[14,1553,1554],{},"69ms",". Further clicking on the ",[14,1557,1362],{}," request gives me the below details",[10,1560,1561],{},[149,1562],{"alt":1563,"src":1564},"wonderful api call 3","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F2209a84f-f39a-4ce7-b2b2-d7d3e57ab543-ebf01da988.png",[10,1566,1567,1568,1570,1571,1574,1575,1577,1578,1581],{},"We see that the ",[14,1569,1412],{}," has a value of ",[14,1572,1573],{},"HIT"," now and ",[14,1576,1422],{}," is ",[14,1579,1580],{},"1",". This request was served from the cache, and our firebase function was not called. We can also verify this by checking the function logs in the Google Cloud Console.",[10,1583,1584],{},"What we've achieved here is:",[1586,1587,1588,1591,1594],"ol",{},[1396,1589,1590],{},"significantly lesser response time",[1396,1592,1593],{},"a lesser number of firebase functions invocations",[1396,1595,1596],{},"potentially lesser number of database calls (generally you would get the data from a database and not just return a static value which we're doing currently)",[23,1598,1600],{"id":1599},"when-and-where-to-cache","When and where to cache",[10,1602,1603],{},"When deciding to use a cache, the first question you should ask yourself is, \"When and where (locally, CDN etc.) to do it\"? There is no silver bullet here, and every case needs to be analyzed based on its pros and cons. A wrong decision may return stale and irrelevant data to your users.",[10,1605,1606],{},"In general, if the same data is needed for a lot of users then it is a good candidate to be cached at the CDN. For example, weather data, some meta information, a blog post etc. The time for which to store the data depends on the case at hand.",[10,1608,1609,1610,1612,1613,1615],{},"User profile data doesn't change that frequently, but it is useful for only one person so it can be stored locally (using ",[14,1611,1435],{}," for ",[14,1614,1431],{},") for a short duration. And so on.",[23,1617,1619],{"id":1618},"things-to-keep-in-mind-with-firebase-cdn","Things to Keep in Mind with Firebase CDN",[10,1621,1622],{},"If you're convinced about using a cache for your API, below are some things that you should keep in mind",[1393,1624,1625,1628,1631,1664,1670],{},[1396,1626,1627],{},"In general, a firebase function can be configured for up to 9 minutes of request timeout. But when you connect your functions to firebase hosting, the request timeout value for these functions gets capped at 60 seconds.",[1396,1629,1630],{},"Only GET & HEAD requests can be cached at the CDN",[1396,1632,1633,1634],{},"For Firebase the Cache keys' generation depends on the following factors. If any of these factors are different a different key gets generated and hence cache hit or miss happens accordingly",[1393,1635,1636,1643,1650,1653],{},[1396,1637,1638,1639,1642],{},"The hostname (",[14,1640,1641],{},"\u003Cproject_id>.web.app"," in the example project of this article)",[1396,1644,1645,1646,1649],{},"The path (",[14,1647,1648],{},"\u002Fapi\u002Fwonderful",")",[1396,1651,1652],{},"The query string (we didn't use any query string)",[1396,1654,1655,1656,1659,1660,1663],{},"The content of the request headers specified in the ",[14,1657,1658],{},"Vary"," header (by default Firebase CDN uses Origin, cookie, need-authorization, x-fh-requested-host and accept-encoding as can be seen from the screenshots above). Only the ",[38,1661,1662],{},"__session"," cookie (if present) is made part of the cache key.",[1396,1665,1666,1667,1649],{},"Sometimes you need to remove the API data cached at the CDN. This can be done by redeploying to firebase hosting (using ",[14,1668,1669],{},"firebase deploy --only hosting",[1396,1671,1672,1673,1675,1676,1679],{},"Instead of setting the ",[14,1674,1431],{}," header individually within each function, we can add it to ",[14,1677,1678],{},"firebase.json"," itself. Though for more control over individual requests caching, adding the header within the function is better.",[23,1681,1683],{"id":1682},"limitations","Limitations",[10,1685,1686,1687,98],{},"While Firebase CDN is good for general use cases, if you want more from your CDN then you should look for a proper CDN service like Cloudflare, Google and so on. Firebase CDN doesn't provide DDoS protection, Rate Limiting etc out of the box. Also, data transfer out of hosting is free till 360MB\u002Fday, beyond that you get charged ",[113,1688,1691],{"href":1689,"rel":1690},"https:\u002F\u002Ffirebase.google.com\u002Fpricing",[117],"$0.15\u002FGB",[10,1693,1694],{},[149,1695],{"alt":1696,"src":1697},"firebase hosting pricing","\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002F7e81492b-30fb-4de2-810d-69ec7822154a-bf00769150.png",[23,1699,1701],{"id":1700},"real-live-caching-example","Real Live Caching Example",[10,1703,1704,1705,1710],{},"For one of my recent projects, I applied the Firebase CDN cache for one of the endpoints. The project is a daily puzzle game based on React SPA, called ",[113,1706,1709],{"href":1707,"rel":1708},"https:\u002F\u002Fplaygoldroad.com",[117],"GoldRoad"," where every player gets the same puzzle which gets refreshed at midnight GMT.",[10,1712,1713],{},"This is how I've configured the cache. The request gets stored at the CDN for the maximum time possible (including a buffer of 5 mins).",[164,1715,1717],{"className":166,"code":1716,"language":168,"meta":169,"style":169},"let cacheTime = 300; \u002F\u002F 5 mins local cache time\nlet serverCacheTime;\n\n\u002F\u002F 1. game is the current puzzle object\n\u002F\u002F 2. nextGameAt is the dateTime when the new puzzle will be available\nconst nextGameAtInMs = new Date(game.nextGameAt).getTime();\n\n\u002F\u002F Server Cache time, minus the local cache time (some buffer)\nserverCacheTime = parseInt((nextGameAtInMs - Date.now()) \u002F 1000) - cacheTime;\nif (serverCacheTime \u003C 0) {\n  serverCacheTime = 0;\n}\n\nif (serverCacheTime \u003C cacheTime) {\n  cacheTime = serverCacheTime;\n}\n\nresponse.set('Cache-Control', `public, max-age=${cacheTime}, s-maxage=${serverCacheTime}`\n);\n",[14,1718,1719,1724,1729,1733,1738,1743,1748,1752,1757,1762,1767,1772,1776,1780,1785,1790,1794,1798,1803],{"__ignoreMap":169},[173,1720,1721],{"class":175,"line":176},[173,1722,1723],{},"let cacheTime = 300; \u002F\u002F 5 mins local cache time\n",[173,1725,1726],{"class":175,"line":182},[173,1727,1728],{},"let serverCacheTime;\n",[173,1730,1731],{"class":175,"line":189},[173,1732,186],{"emptyLinePlaceholder":185},[173,1734,1735],{"class":175,"line":195},[173,1736,1737],{},"\u002F\u002F 1. game is the current puzzle object\n",[173,1739,1740],{"class":175,"line":201},[173,1741,1742],{},"\u002F\u002F 2. nextGameAt is the dateTime when the new puzzle will be available\n",[173,1744,1745],{"class":175,"line":207},[173,1746,1747],{},"const nextGameAtInMs = new Date(game.nextGameAt).getTime();\n",[173,1749,1750],{"class":175,"line":213},[173,1751,186],{"emptyLinePlaceholder":185},[173,1753,1754],{"class":175,"line":218},[173,1755,1756],{},"\u002F\u002F Server Cache time, minus the local cache time (some buffer)\n",[173,1758,1759],{"class":175,"line":224},[173,1760,1761],{},"serverCacheTime = parseInt((nextGameAtInMs - Date.now()) \u002F 1000) - cacheTime;\n",[173,1763,1764],{"class":175,"line":230},[173,1765,1766],{},"if (serverCacheTime \u003C 0) {\n",[173,1768,1769],{"class":175,"line":236},[173,1770,1771],{},"  serverCacheTime = 0;\n",[173,1773,1774],{"class":175,"line":314},[173,1775,1196],{},[173,1777,1778],{"class":175,"line":319},[173,1779,186],{"emptyLinePlaceholder":185},[173,1781,1782],{"class":175,"line":324},[173,1783,1784],{},"if (serverCacheTime \u003C cacheTime) {\n",[173,1786,1787],{"class":175,"line":329},[173,1788,1789],{},"  cacheTime = serverCacheTime;\n",[173,1791,1792],{"class":175,"line":335},[173,1793,1196],{},[173,1795,1796],{"class":175,"line":340},[173,1797,186],{"emptyLinePlaceholder":185},[173,1799,1800],{"class":175,"line":490},[173,1801,1802],{},"response.set('Cache-Control', `public, max-age=${cacheTime}, s-maxage=${serverCacheTime}`\n",[173,1804,1805],{"class":175,"line":496},[173,1806,1807],{},");\n",[10,1809,1810],{},"Many other directives can be used in the cache-control header. You should read more about these directives for advanced use cases.",[23,1812,1814],{"id":1813},"conclusion","Conclusion",[10,1816,1817],{},"In conclusion, using the firebase CDN can greatly enhance your API performance by caching frequently accessed data closer to the end user, thus reducing latency and improving response times. It also reduces firebase functions invocations, as well as database calls, thus reducing cost.",[10,1819,1820],{},"But before embarking on this journey, do analyze the pros and cons of adding a cache for your use case.",[10,1822,1823],{},"Hope you enjoyed reading the article. If you found any mistake in the article please let me know in the comments.",[10,1825,1826],{},"Cheers :-)",[23,1828,1830],{"id":1829},"further-reading","Further reading",[10,1832,1833,1834],{},"We've only looked at a couple of directives for the cache-control header, for a ",[113,1835,1838],{"href":1836,"rel":1837},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FHeaders\u002FCache-Control",[117],"complete overview please visit the MDN site",[10,1840,1841],{},"For understanding caching in detail you can visit the following links",[10,1843,1844],{},[113,1845,1848],{"href":1846,"rel":1847},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FCaching",[117],"HTTP caching on MDN",[10,1850,1851],{},[113,1852,1855],{"href":1853,"rel":1854},"https:\u002F\u002Fweb.dev\u002Fhttp-cache\u002F",[117],"HTTP Cache on web.dev",[1857,1858,1859],"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 pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":169,"searchDepth":182,"depth":182,"links":1861},[1862,1866,1871,1872,1873,1874,1875,1876],{"id":25,"depth":182,"text":26,"children":1863},[1864,1865],{"id":33,"depth":189,"text":34},{"id":44,"depth":189,"text":45},{"id":107,"depth":182,"text":108,"children":1867},[1868,1869,1870],{"id":124,"depth":189,"text":125},{"id":1079,"depth":189,"text":1080},{"id":1442,"depth":189,"text":1443},{"id":1599,"depth":182,"text":1600},{"id":1618,"depth":182,"text":1619},{"id":1682,"depth":182,"text":1683},{"id":1700,"depth":182,"text":1701},{"id":1813,"depth":182,"text":1814},{"id":1829,"depth":182,"text":1830},null,"\u002Fimages\u002Fposts\u002Fguide-to-api-caching-with-firebase-cdn\u002Fbba787bc-b4c2-4af2-a49c-b6fdb2f187ba-a35946029a.png","2023-03-17T05:10:52.714Z","If you're using or thinking of using `Firebase Cloud Functions` or `Cloud Run` for your website\u002Fapp backend, I highly recommend looking into caching your API responses. Used app...",false,"md","clfc30tux000709msbmll0bcd",{},"\u002Fguide-to-api-caching-with-firebase-cdn",{"title":5,"description":1880},"guide-to-api-caching-with-firebase-cdn",[358,1889,1890,1891,1892],"web-development","apis","cache","2articles1week","ivTDepNVMUvc4lWU9iiefkaotAaOHHOzTyRnL7qOSSM",1780470201055]