[{"data":1,"prerenderedAt":2233},["ShallowReactive",2],{"blog-en-vue3-reactivity-traps":3,"blog-related-en-vue3-reactivity-traps":740},{"id":4,"title":5,"author":6,"body":7,"date":724,"description":725,"extension":726,"featured":727,"image":728,"meta":729,"navigation":118,"path":730,"readingTime":128,"seo":731,"slug":732,"stem":733,"tags":734,"__hash__":739},"blog\u002Fblog\u002Fen\u002Fvue3-reactivity-traps.md","Common Vue 3 Reactivity Traps: Avoiding Mistakes with ref, reactive, and Destructuring","Adam Abdel-Djamal",{"type":8,"value":9,"toc":710},"minimark",[10,14,22,25,30,33,134,146,156,242,244,252,258,350,360,433,435,442,448,597,599,603,627,706],[11,12,13],"p",{},"The Vue 3 Composition API is elegant, expressive, and predictable — until you accidentally lose reactivity by destructuring a prop or assigning a plain object to a reactive state.",[11,15,16,17,21],{},"Even experienced developers encounter subtle reactivity bugs that cause the UI not to update as expected. In this guide, we break down the ",[18,19,20],"strong",{},"4 most common reactivity traps in Vue 3"," and how to avoid them.",[23,24],"hr",{},[26,27,29],"h2",{"id":28},"_1-trap-1-destructuring-props-or-reactive-objects","1. Trap #1: Destructuring Props or Reactive Objects",[11,31,32],{},"The most frequent mistake in Vue 3:",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F ❌ Destructuring breaks the reactive proxy connection!\nconst state = reactive({ count: 0, user: 'Adam' })\nconst { count, user } = state\n\n\u002F\u002F Incrementing count here will NOT trigger UI re-renders!\ncount++\n","typescript","",[41,42,43,52,87,113,120,126],"code",{"__ignoreMap":39},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sJ8bj","\u002F\u002F ❌ Destructuring breaks the reactive proxy connection!\n",[44,53,55,59,63,66,70,74,77,80,84],{"class":46,"line":54},2,[44,56,58],{"class":57},"szBVR","const",[44,60,62],{"class":61},"sj4cs"," state",[44,64,65],{"class":57}," =",[44,67,69],{"class":68},"sScJk"," reactive",[44,71,73],{"class":72},"sVt8B","({ count: ",[44,75,76],{"class":61},"0",[44,78,79],{"class":72},", user: ",[44,81,83],{"class":82},"sZZnC","'Adam'",[44,85,86],{"class":72}," })\n",[44,88,90,92,95,98,101,104,107,110],{"class":46,"line":89},3,[44,91,58],{"class":57},[44,93,94],{"class":72}," { ",[44,96,97],{"class":61},"count",[44,99,100],{"class":72},", ",[44,102,103],{"class":61},"user",[44,105,106],{"class":72}," } ",[44,108,109],{"class":57},"=",[44,111,112],{"class":72}," state\n",[44,114,116],{"class":46,"line":115},4,[44,117,119],{"emptyLinePlaceholder":118},true,"\n",[44,121,123],{"class":46,"line":122},5,[44,124,125],{"class":50},"\u002F\u002F Incrementing count here will NOT trigger UI re-renders!\n",[44,127,129,131],{"class":46,"line":128},6,[44,130,97],{"class":72},[44,132,133],{"class":57},"++\n",[135,136,138,139,142,143],"h3",{"id":137},"the-fix-torefs-or-toref","The Fix: ",[41,140,141],{},"toRefs()"," or ",[41,144,145],{},"toRef()",[11,147,148,151,152,155],{},[41,149,150],{},"toRefs"," converts each property of a reactive object into an individual ",[41,153,154],{},"ref"," that preserves the connection to the source:",[34,157,159],{"className":36,"code":158,"language":38,"meta":39,"style":39},"\u002F\u002F ✅ Reactivity preserved!\nimport { reactive, toRefs } from 'vue'\n\nconst state = reactive({ count: 0, user: 'Adam' })\nconst { count, user } = toRefs(state)\n\ncount.value++ \u002F\u002F UI updates immediately!\n",[41,160,161,166,180,184,204,226,230],{"__ignoreMap":39},[44,162,163],{"class":46,"line":47},[44,164,165],{"class":50},"\u002F\u002F ✅ Reactivity preserved!\n",[44,167,168,171,174,177],{"class":46,"line":54},[44,169,170],{"class":57},"import",[44,172,173],{"class":72}," { reactive, toRefs } ",[44,175,176],{"class":57},"from",[44,178,179],{"class":82}," 'vue'\n",[44,181,182],{"class":46,"line":89},[44,183,119],{"emptyLinePlaceholder":118},[44,185,186,188,190,192,194,196,198,200,202],{"class":46,"line":115},[44,187,58],{"class":57},[44,189,62],{"class":61},[44,191,65],{"class":57},[44,193,69],{"class":68},[44,195,73],{"class":72},[44,197,76],{"class":61},[44,199,79],{"class":72},[44,201,83],{"class":82},[44,203,86],{"class":72},[44,205,206,208,210,212,214,216,218,220,223],{"class":46,"line":122},[44,207,58],{"class":57},[44,209,94],{"class":72},[44,211,97],{"class":61},[44,213,100],{"class":72},[44,215,103],{"class":61},[44,217,106],{"class":72},[44,219,109],{"class":57},[44,221,222],{"class":68}," toRefs",[44,224,225],{"class":72},"(state)\n",[44,227,228],{"class":46,"line":128},[44,229,119],{"emptyLinePlaceholder":118},[44,231,233,236,239],{"class":46,"line":232},7,[44,234,235],{"class":72},"count.value",[44,237,238],{"class":57},"++",[44,240,241],{"class":50}," \u002F\u002F UI updates immediately!\n",[23,243],{},[26,245,247,248,251],{"id":246},"_2-trap-2-reassigning-an-entire-reactive-object","2. Trap #2: Reassigning an Entire ",[41,249,250],{},"reactive()"," Object",[11,253,254,255,257],{},"If you define state with ",[41,256,250],{},", reassigning the object replaces the proxy reference entirely:",[34,259,261],{"className":36,"code":260,"language":38,"meta":39,"style":39},"\u002F\u002F ❌ Loses the original proxy tracked by the template\nlet userProfile = reactive({ name: 'Adam', role: 'Dev' })\n\nasync function loadUser() {\n  const data = await fetchUser()\n  userProfile = reactive(data) \u002F\u002F 💥 The template is still watching the OLD proxy!\n}\n",[41,262,263,268,293,297,311,330,345],{"__ignoreMap":39},[44,264,265],{"class":46,"line":47},[44,266,267],{"class":50},"\u002F\u002F ❌ Loses the original proxy tracked by the template\n",[44,269,270,273,276,278,280,283,285,288,291],{"class":46,"line":54},[44,271,272],{"class":57},"let",[44,274,275],{"class":72}," userProfile ",[44,277,109],{"class":57},[44,279,69],{"class":68},[44,281,282],{"class":72},"({ name: ",[44,284,83],{"class":82},[44,286,287],{"class":72},", role: ",[44,289,290],{"class":82},"'Dev'",[44,292,86],{"class":72},[44,294,295],{"class":46,"line":89},[44,296,119],{"emptyLinePlaceholder":118},[44,298,299,302,305,308],{"class":46,"line":115},[44,300,301],{"class":57},"async",[44,303,304],{"class":57}," function",[44,306,307],{"class":68}," loadUser",[44,309,310],{"class":72},"() {\n",[44,312,313,316,319,321,324,327],{"class":46,"line":122},[44,314,315],{"class":57},"  const",[44,317,318],{"class":61}," data",[44,320,65],{"class":57},[44,322,323],{"class":57}," await",[44,325,326],{"class":68}," fetchUser",[44,328,329],{"class":72},"()\n",[44,331,332,335,337,339,342],{"class":46,"line":128},[44,333,334],{"class":72},"  userProfile ",[44,336,109],{"class":57},[44,338,69],{"class":68},[44,340,341],{"class":72},"(data) ",[44,343,344],{"class":50},"\u002F\u002F 💥 The template is still watching the OLD proxy!\n",[44,346,347],{"class":46,"line":232},[44,348,349],{"class":72},"}\n",[135,351,353,354,142,357],{"id":352},"the-fix-use-ref-or-objectassign","The Fix: Use ",[41,355,356],{},"ref()",[41,358,359],{},"Object.assign()",[34,361,363],{"className":36,"code":362,"language":38,"meta":39,"style":39},"\u002F\u002F ✅ Option A: Use ref (Recommended for objects that get replaced)\nconst userProfile = ref({ name: 'Adam', role: 'Dev' })\nuserProfile.value = await fetchUser()\n\n\u002F\u002F ✅ Option B: Mutate in-place\nObject.assign(userProfile, await fetchUser())\n",[41,364,365,370,392,405,409,414],{"__ignoreMap":39},[44,366,367],{"class":46,"line":47},[44,368,369],{"class":50},"\u002F\u002F ✅ Option A: Use ref (Recommended for objects that get replaced)\n",[44,371,372,374,377,379,382,384,386,388,390],{"class":46,"line":54},[44,373,58],{"class":57},[44,375,376],{"class":61}," userProfile",[44,378,65],{"class":57},[44,380,381],{"class":68}," ref",[44,383,282],{"class":72},[44,385,83],{"class":82},[44,387,287],{"class":72},[44,389,290],{"class":82},[44,391,86],{"class":72},[44,393,394,397,399,401,403],{"class":46,"line":89},[44,395,396],{"class":72},"userProfile.value ",[44,398,109],{"class":57},[44,400,323],{"class":57},[44,402,326],{"class":68},[44,404,329],{"class":72},[44,406,407],{"class":46,"line":115},[44,408,119],{"emptyLinePlaceholder":118},[44,410,411],{"class":46,"line":122},[44,412,413],{"class":50},"\u002F\u002F ✅ Option B: Mutate in-place\n",[44,415,416,419,422,425,428,430],{"class":46,"line":128},[44,417,418],{"class":72},"Object.",[44,420,421],{"class":68},"assign",[44,423,424],{"class":72},"(userProfile, ",[44,426,427],{"class":57},"await",[44,429,326],{"class":68},[44,431,432],{"class":72},"())\n",[23,434],{},[26,436,438,439],{"id":437},"_3-trap-3-watching-deep-reactive-state-without-deep-true","3. Trap #3: Watching Deep Reactive State Without ",[41,440,441],{},"{ deep: true }",[11,443,444,445,447],{},"When watching a ",[41,446,154],{}," holding a nested object or array, Vue 3 defaults to a shallow watch:",[34,449,451],{"className":36,"code":450,"language":38,"meta":39,"style":39},"const filters = ref({ category: 'all', price: { min: 0, max: 100 } })\n\n\u002F\u002F ❌ Will NOT trigger when filters.value.price.max changes!\nwatch(filters, (newVal) => {\n  console.log('Filters changed', newVal)\n})\n\n\u002F\u002F ✅ Pass deep: true, or watch a getter function\nwatch(\n  () => filters.value.price.max,\n  (newMax) => console.log('Max price changed to', newMax)\n)\n",[41,452,453,484,488,493,514,531,536,540,546,554,565,591],{"__ignoreMap":39},[44,454,455,457,460,462,464,467,470,473,475,478,481],{"class":46,"line":47},[44,456,58],{"class":57},[44,458,459],{"class":61}," filters",[44,461,65],{"class":57},[44,463,381],{"class":68},[44,465,466],{"class":72},"({ category: ",[44,468,469],{"class":82},"'all'",[44,471,472],{"class":72},", price: { min: ",[44,474,76],{"class":61},[44,476,477],{"class":72},", max: ",[44,479,480],{"class":61},"100",[44,482,483],{"class":72}," } })\n",[44,485,486],{"class":46,"line":54},[44,487,119],{"emptyLinePlaceholder":118},[44,489,490],{"class":46,"line":89},[44,491,492],{"class":50},"\u002F\u002F ❌ Will NOT trigger when filters.value.price.max changes!\n",[44,494,495,498,501,505,508,511],{"class":46,"line":115},[44,496,497],{"class":68},"watch",[44,499,500],{"class":72},"(filters, (",[44,502,504],{"class":503},"s4XuR","newVal",[44,506,507],{"class":72},") ",[44,509,510],{"class":57},"=>",[44,512,513],{"class":72}," {\n",[44,515,516,519,522,525,528],{"class":46,"line":122},[44,517,518],{"class":72},"  console.",[44,520,521],{"class":68},"log",[44,523,524],{"class":72},"(",[44,526,527],{"class":82},"'Filters changed'",[44,529,530],{"class":72},", newVal)\n",[44,532,533],{"class":46,"line":128},[44,534,535],{"class":72},"})\n",[44,537,538],{"class":46,"line":232},[44,539,119],{"emptyLinePlaceholder":118},[44,541,543],{"class":46,"line":542},8,[44,544,545],{"class":50},"\u002F\u002F ✅ Pass deep: true, or watch a getter function\n",[44,547,549,551],{"class":46,"line":548},9,[44,550,497],{"class":68},[44,552,553],{"class":72},"(\n",[44,555,557,560,562],{"class":46,"line":556},10,[44,558,559],{"class":72},"  () ",[44,561,510],{"class":57},[44,563,564],{"class":72}," filters.value.price.max,\n",[44,566,568,571,574,576,578,581,583,585,588],{"class":46,"line":567},11,[44,569,570],{"class":72},"  (",[44,572,573],{"class":503},"newMax",[44,575,507],{"class":72},[44,577,510],{"class":57},[44,579,580],{"class":72}," console.",[44,582,521],{"class":68},[44,584,524],{"class":72},[44,586,587],{"class":82},"'Max price changed to'",[44,589,590],{"class":72},", newMax)\n",[44,592,594],{"class":46,"line":593},12,[44,595,596],{"class":72},")\n",[23,598],{},[26,600,602],{"id":601},"_4-trap-4-asynchronous-loss-of-current-instance-in-lifecycle-hooks","4. Trap #4: Asynchronous Loss of Current Instance in Lifecycle Hooks",[11,604,605,606,100,609,612,613,616,617,619,620,142,623,626],{},"Accessing ",[41,607,608],{},"useNuxtApp()",[41,610,611],{},"useRoute()",", or ",[41,614,615],{},"inject()"," after an ",[41,618,427],{}," statement will fail with:\n",[41,621,622],{},"[Vue warn]: injection \"Symbol(...)\" not found",[41,624,625],{},"Nuxt instance unavailable",".",[34,628,630],{"className":36,"code":629,"language":38,"meta":39,"style":39},"\u002F\u002F ❌ WRONG: Calling composables AFTER an async boundary\nconst res = await fetchData()\nconst route = useRoute() \u002F\u002F 💥 Throws error! Nuxt context lost after await.\n\n\u002F\u002F ✅ CORRECT: Always call composables synchronously at the top of \u003Cscript setup>\nconst route = useRoute()\nconst res = await fetchData()\n",[41,631,632,637,653,671,675,680,692],{"__ignoreMap":39},[44,633,634],{"class":46,"line":47},[44,635,636],{"class":50},"\u002F\u002F ❌ WRONG: Calling composables AFTER an async boundary\n",[44,638,639,641,644,646,648,651],{"class":46,"line":54},[44,640,58],{"class":57},[44,642,643],{"class":61}," res",[44,645,65],{"class":57},[44,647,323],{"class":57},[44,649,650],{"class":68}," fetchData",[44,652,329],{"class":72},[44,654,655,657,660,662,665,668],{"class":46,"line":89},[44,656,58],{"class":57},[44,658,659],{"class":61}," route",[44,661,65],{"class":57},[44,663,664],{"class":68}," useRoute",[44,666,667],{"class":72},"() ",[44,669,670],{"class":50},"\u002F\u002F 💥 Throws error! Nuxt context lost after await.\n",[44,672,673],{"class":46,"line":115},[44,674,119],{"emptyLinePlaceholder":118},[44,676,677],{"class":46,"line":122},[44,678,679],{"class":50},"\u002F\u002F ✅ CORRECT: Always call composables synchronously at the top of \u003Cscript setup>\n",[44,681,682,684,686,688,690],{"class":46,"line":128},[44,683,58],{"class":57},[44,685,659],{"class":61},[44,687,65],{"class":57},[44,689,664],{"class":68},[44,691,329],{"class":72},[44,693,694,696,698,700,702,704],{"class":46,"line":232},[44,695,58],{"class":57},[44,697,643],{"class":61},[44,699,65],{"class":57},[44,701,323],{"class":57},[44,703,650],{"class":68},[44,705,329],{"class":72},[707,708,709],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":39,"searchDepth":54,"depth":54,"links":711},[712,716,721,723],{"id":28,"depth":54,"text":29,"children":713},[714],{"id":137,"depth":89,"text":715},"The Fix: toRefs() or toRef()",{"id":246,"depth":54,"text":717,"children":718},"2. Trap #2: Reassigning an Entire reactive() Object",[719],{"id":352,"depth":89,"text":720},"The Fix: Use ref() or Object.assign()",{"id":437,"depth":54,"text":722},"3. Trap #3: Watching Deep Reactive State Without { deep: true }",{"id":601,"depth":54,"text":602},"2026-09-16","Practical troubleshooting guide that receives constant daily search traffic from Vue & Nuxt developers struggling with lost reactivity and watchers.","md",false,null,{},"\u002Fblog\u002Fen\u002Fvue3-reactivity-traps",{"title":5,"description":725},"vue3-reactivity-traps","blog\u002Fen\u002Fvue3-reactivity-traps",[735,736,737,38,738],"vue","nuxt","javascript","frontend","kH-dB_lRw3R_20GDPhhz2iBupxjKfspUx4hYG98UhOE",[741,1582],{"id":742,"title":743,"author":6,"body":744,"date":1570,"description":1571,"extension":726,"featured":727,"image":728,"meta":1572,"navigation":118,"path":1573,"readingTime":128,"seo":1574,"slug":728,"stem":1575,"tags":1576,"__hash__":1581},"blog\u002Fblog\u002Fen\u002Fapi-common-mistakes.md","6 Common API Mistakes (And How to Fix Them)",{"type":8,"value":745,"toc":1561},[746,749,751,755,766,797,818,820,824,831,914,919,1039,1041,1045,1048,1108,1111,1113,1117,1120,1257,1264,1266,1270,1273,1451,1454,1456,1460,1463,1497,1504,1506,1510,1513,1558],[11,747,748],{},"Building an API feels straightforward until your first production incident. Most bugs aren't complex — they're the same six mistakes repeated across thousands of codebases. Here's what they are and how to stop making them.",[23,750],{},[26,752,754],{"id":753},"_1-using-the-wrong-http-method","1. Using the Wrong HTTP Method",[11,756,757,758,761,762,765],{},"The most visible mistake. Using ",[41,759,760],{},"GET"," to delete a resource, or ",[41,763,764],{},"POST"," for everything because \"it works.\"",[34,767,771],{"className":768,"code":769,"language":770,"meta":39,"style":39},"language-http shiki shiki-themes github-light github-dark","# ❌ Deleting with GET — catastrophic if a browser prefetches this URL\nGET \u002Fapi\u002Fusers\u002F42\u002Fdelete\n\n# ✅ Correct\nDELETE \u002Fapi\u002Fusers\u002F42\n","http",[41,772,773,778,783,787,792],{"__ignoreMap":39},[44,774,775],{"class":46,"line":47},[44,776,777],{},"# ❌ Deleting with GET — catastrophic if a browser prefetches this URL\n",[44,779,780],{"class":46,"line":54},[44,781,782],{},"GET \u002Fapi\u002Fusers\u002F42\u002Fdelete\n",[44,784,785],{"class":46,"line":89},[44,786,119],{"emptyLinePlaceholder":118},[44,788,789],{"class":46,"line":115},[44,790,791],{},"# ✅ Correct\n",[44,793,794],{"class":46,"line":122},[44,795,796],{},"DELETE \u002Fapi\u002Fusers\u002F42\n",[11,798,799,800,802,803,805,806,809,810,813,814,817],{},"HTTP methods carry semantic meaning that clients, proxies, and caches rely on. ",[41,801,760],{}," must be idempotent and safe (no side effects). ",[41,804,764],{}," creates. ",[41,807,808],{},"PUT","\u002F",[41,811,812],{},"PATCH"," update. ",[41,815,816],{},"DELETE"," removes. Violating these conventions breaks caching, browser history, and every HTTP client that follows the spec.",[23,819],{},[26,821,823],{"id":822},"_2-wrong-status-codes","2. Wrong Status Codes",[11,825,826,827,830],{},"Returning ",[41,828,829],{},"200 OK"," for an error response is the most common mistake in junior APIs.",[34,832,836],{"className":833,"code":834,"language":835,"meta":39,"style":39},"language-json shiki shiki-themes github-light github-dark","\u002F\u002F ❌ Status 200, but it's an error\n{\n  \"success\": false,\n  \"error\": \"User not found\"\n}\n\n\u002F\u002F ✅ Status 404 — the client knows immediately without parsing the body\n{\n  \"error\": \"User not found\",\n  \"code\": \"USER_NOT_FOUND\"\n}\n","json",[41,837,838,843,848,862,872,876,880,885,889,900,910],{"__ignoreMap":39},[44,839,840],{"class":46,"line":47},[44,841,842],{"class":50},"\u002F\u002F ❌ Status 200, but it's an error\n",[44,844,845],{"class":46,"line":54},[44,846,847],{"class":72},"{\n",[44,849,850,853,856,859],{"class":46,"line":89},[44,851,852],{"class":61},"  \"success\"",[44,854,855],{"class":72},": ",[44,857,858],{"class":61},"false",[44,860,861],{"class":72},",\n",[44,863,864,867,869],{"class":46,"line":115},[44,865,866],{"class":61},"  \"error\"",[44,868,855],{"class":72},[44,870,871],{"class":82},"\"User not found\"\n",[44,873,874],{"class":46,"line":122},[44,875,349],{"class":72},[44,877,878],{"class":46,"line":128},[44,879,119],{"emptyLinePlaceholder":118},[44,881,882],{"class":46,"line":232},[44,883,884],{"class":50},"\u002F\u002F ✅ Status 404 — the client knows immediately without parsing the body\n",[44,886,887],{"class":46,"line":542},[44,888,847],{"class":72},[44,890,891,893,895,898],{"class":46,"line":548},[44,892,866],{"class":61},[44,894,855],{"class":72},[44,896,897],{"class":82},"\"User not found\"",[44,899,861],{"class":72},[44,901,902,905,907],{"class":46,"line":556},[44,903,904],{"class":61},"  \"code\"",[44,906,855],{"class":72},[44,908,909],{"class":82},"\"USER_NOT_FOUND\"\n",[44,911,912],{"class":46,"line":567},[44,913,349],{"class":72},[11,915,916],{},[18,917,918],{},"The codes that matter most:",[920,921,922,935],"table",{},[923,924,925],"thead",{},[926,927,928,932],"tr",{},[929,930,931],"th",{},"Code",[929,933,934],{},"When to use it",[936,937,938,949,959,969,979,989,999,1009,1019,1029],"tbody",{},[926,939,940,946],{},[941,942,943],"td",{},[41,944,945],{},"200",[941,947,948],{},"Success with a body",[926,950,951,956],{},[941,952,953],{},[41,954,955],{},"201",[941,957,958],{},"Resource created (POST)",[926,960,961,966],{},[941,962,963],{},[41,964,965],{},"204",[941,967,968],{},"Success, no body (DELETE)",[926,970,971,976],{},[941,972,973],{},[41,974,975],{},"400",[941,977,978],{},"Invalid input from the client",[926,980,981,986],{},[941,982,983],{},[41,984,985],{},"401",[941,987,988],{},"Not authenticated",[926,990,991,996],{},[941,992,993],{},[41,994,995],{},"403",[941,997,998],{},"Authenticated but not authorized",[926,1000,1001,1006],{},[941,1002,1003],{},[41,1004,1005],{},"404",[941,1007,1008],{},"Resource doesn't exist",[926,1010,1011,1016],{},[941,1012,1013],{},[41,1014,1015],{},"422",[941,1017,1018],{},"Input syntactically valid but semantically wrong",[926,1020,1021,1026],{},[941,1022,1023],{},[41,1024,1025],{},"429",[941,1027,1028],{},"Rate limit exceeded",[926,1030,1031,1036],{},[941,1032,1033],{},[41,1034,1035],{},"500",[941,1037,1038],{},"Server error (never the client's fault)",[23,1040],{},[26,1042,1044],{"id":1043},"_3-trusting-client-input","3. Trusting Client Input",[11,1046,1047],{},"Every value sent by a client is a potential attack vector.",[34,1049,1053],{"className":1050,"code":1051,"language":1052,"meta":39,"style":39},"language-php shiki shiki-themes github-light github-dark","\u002F\u002F ❌ Never do this\n$id = $_GET['id'];\n$query = \"SELECT * FROM users WHERE id = $id\";\n\u002F\u002F SQL injection: ?id=1 OR 1=1\n\n\u002F\u002F ✅ Always validate and sanitize\n$id = filter_var($_GET['id'], FILTER_VALIDATE_INT);\nif (!$id) {\n    return response()->json(['error' => 'Invalid ID'], 400);\n}\n$user = User::findOrFail($id); \u002F\u002F parameterized query\n","php",[41,1054,1055,1060,1065,1070,1075,1079,1084,1089,1094,1099,1103],{"__ignoreMap":39},[44,1056,1057],{"class":46,"line":47},[44,1058,1059],{},"\u002F\u002F ❌ Never do this\n",[44,1061,1062],{"class":46,"line":54},[44,1063,1064],{},"$id = $_GET['id'];\n",[44,1066,1067],{"class":46,"line":89},[44,1068,1069],{},"$query = \"SELECT * FROM users WHERE id = $id\";\n",[44,1071,1072],{"class":46,"line":115},[44,1073,1074],{},"\u002F\u002F SQL injection: ?id=1 OR 1=1\n",[44,1076,1077],{"class":46,"line":122},[44,1078,119],{"emptyLinePlaceholder":118},[44,1080,1081],{"class":46,"line":128},[44,1082,1083],{},"\u002F\u002F ✅ Always validate and sanitize\n",[44,1085,1086],{"class":46,"line":232},[44,1087,1088],{},"$id = filter_var($_GET['id'], FILTER_VALIDATE_INT);\n",[44,1090,1091],{"class":46,"line":542},[44,1092,1093],{},"if (!$id) {\n",[44,1095,1096],{"class":46,"line":548},[44,1097,1098],{},"    return response()->json(['error' => 'Invalid ID'], 400);\n",[44,1100,1101],{"class":46,"line":556},[44,1102,349],{},[44,1104,1105],{"class":46,"line":567},[44,1106,1107],{},"$user = User::findOrFail($id); \u002F\u002F parameterized query\n",[11,1109,1110],{},"Validate: type, format, length, range. Sanitize before any database or filesystem operation. Never trust what arrives in the request body, headers, or query string.",[23,1112],{},[26,1114,1116],{"id":1115},"_4-leaking-sensitive-data","4. Leaking Sensitive Data",[11,1118,1119],{},"Returning the full database object without filtering is an invitation to a data breach.",[34,1121,1123],{"className":833,"code":1122,"language":835,"meta":39,"style":39},"\u002F\u002F ❌ Returning the raw User model\n{\n  \"id\": 42,\n  \"email\": \"user@example.com\",\n  \"password\": \"$2b$12$...\",\n  \"stripe_customer_id\": \"cus_xxx\",\n  \"internal_notes\": \"flagged for review\",\n  \"created_at\": \"2024-01-01\"\n}\n\n\u002F\u002F ✅ Return only what the client actually needs\n{\n  \"id\": 42,\n  \"email\": \"user@example.com\",\n  \"created_at\": \"2024-01-01\"\n}\n",[41,1124,1125,1130,1134,1146,1158,1170,1182,1194,1204,1208,1212,1217,1221,1232,1243,1252],{"__ignoreMap":39},[44,1126,1127],{"class":46,"line":47},[44,1128,1129],{"class":50},"\u002F\u002F ❌ Returning the raw User model\n",[44,1131,1132],{"class":46,"line":54},[44,1133,847],{"class":72},[44,1135,1136,1139,1141,1144],{"class":46,"line":89},[44,1137,1138],{"class":61},"  \"id\"",[44,1140,855],{"class":72},[44,1142,1143],{"class":61},"42",[44,1145,861],{"class":72},[44,1147,1148,1151,1153,1156],{"class":46,"line":115},[44,1149,1150],{"class":61},"  \"email\"",[44,1152,855],{"class":72},[44,1154,1155],{"class":82},"\"user@example.com\"",[44,1157,861],{"class":72},[44,1159,1160,1163,1165,1168],{"class":46,"line":122},[44,1161,1162],{"class":61},"  \"password\"",[44,1164,855],{"class":72},[44,1166,1167],{"class":82},"\"$2b$12$...\"",[44,1169,861],{"class":72},[44,1171,1172,1175,1177,1180],{"class":46,"line":128},[44,1173,1174],{"class":61},"  \"stripe_customer_id\"",[44,1176,855],{"class":72},[44,1178,1179],{"class":82},"\"cus_xxx\"",[44,1181,861],{"class":72},[44,1183,1184,1187,1189,1192],{"class":46,"line":232},[44,1185,1186],{"class":61},"  \"internal_notes\"",[44,1188,855],{"class":72},[44,1190,1191],{"class":82},"\"flagged for review\"",[44,1193,861],{"class":72},[44,1195,1196,1199,1201],{"class":46,"line":542},[44,1197,1198],{"class":61},"  \"created_at\"",[44,1200,855],{"class":72},[44,1202,1203],{"class":82},"\"2024-01-01\"\n",[44,1205,1206],{"class":46,"line":548},[44,1207,349],{"class":72},[44,1209,1210],{"class":46,"line":556},[44,1211,119],{"emptyLinePlaceholder":118},[44,1213,1214],{"class":46,"line":567},[44,1215,1216],{"class":50},"\u002F\u002F ✅ Return only what the client actually needs\n",[44,1218,1219],{"class":46,"line":593},[44,1220,847],{"class":72},[44,1222,1224,1226,1228,1230],{"class":46,"line":1223},13,[44,1225,1138],{"class":61},[44,1227,855],{"class":72},[44,1229,1143],{"class":61},[44,1231,861],{"class":72},[44,1233,1235,1237,1239,1241],{"class":46,"line":1234},14,[44,1236,1150],{"class":61},[44,1238,855],{"class":72},[44,1240,1155],{"class":82},[44,1242,861],{"class":72},[44,1244,1246,1248,1250],{"class":46,"line":1245},15,[44,1247,1198],{"class":61},[44,1249,855],{"class":72},[44,1251,1203],{"class":82},[44,1253,1255],{"class":46,"line":1254},16,[44,1256,349],{"class":72},[11,1258,1259,1260,1263],{},"Use serializers, DTOs, or API Resources (Laravel) to explicitly define what gets exposed. The rule: ",[18,1261,1262],{},"opt-in, not opt-out."," Start with nothing, add what's needed.",[23,1265],{},[26,1267,1269],{"id":1268},"_5-inconsistent-error-format","5. Inconsistent Error Format",[11,1271,1272],{},"When every endpoint returns errors differently, every client has to handle every format.",[34,1274,1276],{"className":833,"code":1275,"language":835,"meta":39,"style":39},"\u002F\u002F ❌ Endpoint A\n{ \"message\": \"Not found\" }\n\n\u002F\u002F ❌ Endpoint B\n{ \"error\": true, \"msg\": \"Validation failed\", \"fields\": [\"email\"] }\n\n\u002F\u002F ❌ Endpoint C\n\"Internal server error\"\n\n\u002F\u002F ✅ One format, everywhere\n{\n  \"error\": {\n    \"code\": \"VALIDATION_FAILED\",\n    \"message\": \"The request contains invalid fields.\",\n    \"details\": [\n      { \"field\": \"email\", \"issue\": \"Invalid email format\" }\n    ]\n  }\n}\n",[41,1277,1278,1283,1299,1303,1308,1344,1348,1353,1358,1362,1367,1371,1378,1390,1402,1410,1434,1440,1446],{"__ignoreMap":39},[44,1279,1280],{"class":46,"line":47},[44,1281,1282],{"class":50},"\u002F\u002F ❌ Endpoint A\n",[44,1284,1285,1288,1291,1293,1296],{"class":46,"line":54},[44,1286,1287],{"class":72},"{ ",[44,1289,1290],{"class":61},"\"message\"",[44,1292,855],{"class":72},[44,1294,1295],{"class":82},"\"Not found\"",[44,1297,1298],{"class":72}," }\n",[44,1300,1301],{"class":46,"line":89},[44,1302,119],{"emptyLinePlaceholder":118},[44,1304,1305],{"class":46,"line":115},[44,1306,1307],{"class":50},"\u002F\u002F ❌ Endpoint B\n",[44,1309,1310,1312,1315,1317,1320,1322,1325,1327,1330,1332,1335,1338,1341],{"class":46,"line":122},[44,1311,1287],{"class":72},[44,1313,1314],{"class":61},"\"error\"",[44,1316,855],{"class":72},[44,1318,1319],{"class":61},"true",[44,1321,100],{"class":72},[44,1323,1324],{"class":61},"\"msg\"",[44,1326,855],{"class":72},[44,1328,1329],{"class":82},"\"Validation failed\"",[44,1331,100],{"class":72},[44,1333,1334],{"class":61},"\"fields\"",[44,1336,1337],{"class":72},": [",[44,1339,1340],{"class":82},"\"email\"",[44,1342,1343],{"class":72},"] }\n",[44,1345,1346],{"class":46,"line":128},[44,1347,119],{"emptyLinePlaceholder":118},[44,1349,1350],{"class":46,"line":232},[44,1351,1352],{"class":50},"\u002F\u002F ❌ Endpoint C\n",[44,1354,1355],{"class":46,"line":542},[44,1356,1357],{"class":82},"\"Internal server error\"\n",[44,1359,1360],{"class":46,"line":548},[44,1361,119],{"emptyLinePlaceholder":118},[44,1363,1364],{"class":46,"line":556},[44,1365,1366],{"class":50},"\u002F\u002F ✅ One format, everywhere\n",[44,1368,1369],{"class":46,"line":567},[44,1370,847],{"class":72},[44,1372,1373,1375],{"class":46,"line":593},[44,1374,866],{"class":61},[44,1376,1377],{"class":72},": {\n",[44,1379,1380,1383,1385,1388],{"class":46,"line":1223},[44,1381,1382],{"class":61},"    \"code\"",[44,1384,855],{"class":72},[44,1386,1387],{"class":82},"\"VALIDATION_FAILED\"",[44,1389,861],{"class":72},[44,1391,1392,1395,1397,1400],{"class":46,"line":1234},[44,1393,1394],{"class":61},"    \"message\"",[44,1396,855],{"class":72},[44,1398,1399],{"class":82},"\"The request contains invalid fields.\"",[44,1401,861],{"class":72},[44,1403,1404,1407],{"class":46,"line":1245},[44,1405,1406],{"class":61},"    \"details\"",[44,1408,1409],{"class":72},": [\n",[44,1411,1412,1415,1418,1420,1422,1424,1427,1429,1432],{"class":46,"line":1254},[44,1413,1414],{"class":72},"      { ",[44,1416,1417],{"class":61},"\"field\"",[44,1419,855],{"class":72},[44,1421,1340],{"class":82},[44,1423,100],{"class":72},[44,1425,1426],{"class":61},"\"issue\"",[44,1428,855],{"class":72},[44,1430,1431],{"class":82},"\"Invalid email format\"",[44,1433,1298],{"class":72},[44,1435,1437],{"class":46,"line":1436},17,[44,1438,1439],{"class":72},"    ]\n",[44,1441,1443],{"class":46,"line":1442},18,[44,1444,1445],{"class":72},"  }\n",[44,1447,1449],{"class":46,"line":1448},19,[44,1450,349],{"class":72},[11,1452,1453],{},"Define your error envelope once. Apply it everywhere via a global exception handler. Clients — including your own frontend — will thank you.",[23,1455],{},[26,1457,1459],{"id":1458},"_6-no-api-versioning","6. No API Versioning",[11,1461,1462],{},"Changing an endpoint response breaks every client using it. Without versioning, you can never evolve the API.",[34,1464,1466],{"className":768,"code":1465,"language":770,"meta":39,"style":39},"# ❌ No version — any breaking change affects all clients immediately\nGET \u002Fapi\u002Fusers\n\n# ✅ Versioned — v1 stays stable, v2 introduces breaking changes safely\nGET \u002Fapi\u002Fv1\u002Fusers\nGET \u002Fapi\u002Fv2\u002Fusers\n",[41,1467,1468,1473,1478,1482,1487,1492],{"__ignoreMap":39},[44,1469,1470],{"class":46,"line":47},[44,1471,1472],{},"# ❌ No version — any breaking change affects all clients immediately\n",[44,1474,1475],{"class":46,"line":54},[44,1476,1477],{},"GET \u002Fapi\u002Fusers\n",[44,1479,1480],{"class":46,"line":89},[44,1481,119],{"emptyLinePlaceholder":118},[44,1483,1484],{"class":46,"line":115},[44,1485,1486],{},"# ✅ Versioned — v1 stays stable, v2 introduces breaking changes safely\n",[44,1488,1489],{"class":46,"line":122},[44,1490,1491],{},"GET \u002Fapi\u002Fv1\u002Fusers\n",[44,1493,1494],{"class":46,"line":128},[44,1495,1496],{},"GET \u002Fapi\u002Fv2\u002Fusers\n",[11,1498,1499,1500,1503],{},"Version from day one, even if you only have v1. The cost of adding ",[41,1501,1502],{},"\u002Fv1\u002F"," later — after clients are in production — is much higher than the cost of including it from the start.",[23,1505],{},[26,1507,1509],{"id":1508},"the-takeaway","The Takeaway",[11,1511,1512],{},"None of these mistakes require advanced knowledge to fix. They require discipline: a checklist before every endpoint ships.",[1514,1515,1518,1528,1534,1540,1546,1552],"ul",{"className":1516},[1517],"contains-task-list",[1519,1520,1523,1527],"li",{"className":1521},[1522],"task-list-item",[1524,1525],"input",{"disabled":118,"type":1526},"checkbox"," HTTP method matches the operation's semantics",[1519,1529,1531,1533],{"className":1530},[1522],[1524,1532],{"disabled":118,"type":1526}," Status code is accurate",[1519,1535,1537,1539],{"className":1536},[1522],[1524,1538],{"disabled":118,"type":1526}," All input is validated before use",[1519,1541,1543,1545],{"className":1542},[1522],[1524,1544],{"disabled":118,"type":1526}," Response only exposes necessary fields",[1519,1547,1549,1551],{"className":1548},[1522],[1524,1550],{"disabled":118,"type":1526}," Errors follow the global format",[1519,1553,1555,1557],{"className":1554},[1522],[1524,1556],{"disabled":118,"type":1526}," URL includes an API version",[707,1559,1560],{},"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 .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}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":39,"searchDepth":54,"depth":54,"links":1562},[1563,1564,1565,1566,1567,1568,1569],{"id":753,"depth":54,"text":754},{"id":822,"depth":54,"text":823},{"id":1043,"depth":54,"text":1044},{"id":1115,"depth":54,"text":1116},{"id":1268,"depth":54,"text":1269},{"id":1458,"depth":54,"text":1459},{"id":1508,"depth":54,"text":1509},"2026-06-04","From wrong HTTP methods to leaking sensitive data — the errors most developers make when building their first API, and the concrete fixes.",{},"\u002Fblog\u002Fen\u002Fapi-common-mistakes",{"title":743,"description":1571},"blog\u002Fen\u002Fapi-common-mistakes",[1577,1578,1579,1580],"api","backend","rest","best-practices","z2NMprz3c9WpXKotgDMzEF9WM_LLLolyFqidBZu4I6s",{"id":1583,"title":1584,"author":6,"body":1585,"date":2221,"description":2222,"extension":726,"featured":727,"image":728,"meta":2223,"navigation":118,"path":2224,"readingTime":128,"seo":2225,"slug":2226,"stem":2227,"tags":2228,"__hash__":2232},"blog\u002Fblog\u002Fen\u002Fapi-rate-limiting-redis.md","API Rate Limiting in Practice: Token Bucket vs. Sliding Window with Redis",{"type":8,"value":1586,"toc":2212},[1587,1590,1593,1604,1606,1610,1614,1621,1625,1628,1636,1640,1643,1645,1649,1656,2140,2142,2146,2149,2206,2209],[11,1588,1589],{},"Without API rate limiting, a single rogue script or misconfigured webhook client can fire 10,000 requests per second at your login or checkout endpoint, exhausting your database connection pool and taking your entire application down.",[11,1591,1592],{},"Rate limiting is the first line of defense against bot attacks, credential stuffing, and API resource abuse. But which algorithm should you implement?",[11,1594,1595,1596,1599,1600,1603],{},"In this article, we compare the two industry-standard algorithms — ",[18,1597,1598],{},"Token Bucket"," and ",[18,1601,1602],{},"Sliding Window Log"," — and show how to implement a high-speed sliding window rate limiter in Redis.",[23,1605],{},[26,1607,1609],{"id":1608},"_1-comparing-the-algorithms","1. Comparing the Algorithms",[135,1611,1613],{"id":1612},"a-fixed-window-counter-the-flawed-default","A. Fixed Window Counter (The Flawed Default)",[11,1615,1616,1617,1620],{},"Divides time into fixed buckets (e.g. 10:00 to 10:01). If a user can make 100 requests per minute, they can send 100 requests at 10:00:59, and another 100 requests at 10:01:01. That means ",[18,1618,1619],{},"200 requests in 2 seconds"," — double the intended burst limit!",[135,1622,1624],{"id":1623},"b-token-bucket","B. Token Bucket",[11,1626,1627],{},"A bucket holds a fixed number of tokens (burst capacity). Tokens are continuously replenished at a constant rate. Each incoming request consumes one token.",[1514,1629,1630],{},[1519,1631,1632,1635],{},[18,1633,1634],{},"Great for",": APIs that want to allow legitimate temporary traffic spikes while capping sustained throughput.",[135,1637,1639],{"id":1638},"c-sliding-window-counter-the-production-standard","C. Sliding Window Counter (The Production Standard)",[11,1641,1642],{},"Combines the low memory usage of fixed windows with the smoothness of a rolling window. It calculates the request rate by weighting the request count of the previous window and the current window.",[23,1644],{},[26,1646,1648],{"id":1647},"_2-sliding-window-rate-limiter-with-redis-sorted-sets","2. Sliding Window Rate Limiter with Redis Sorted Sets",[11,1650,1651,1652,1655],{},"Redis Sorted Sets (",[41,1653,1654],{},"ZSET",") allow us to track requests by timestamp with microsecond accuracy:",[34,1657,1659],{"className":36,"code":1658,"language":38,"meta":39,"style":39},"import Redis from 'ioredis'\n\nconst redis = new Redis(process.env.REDIS_URL!)\n\nexport async function checkRateLimit(identifier: string, limit = 60, windowInSeconds = 60) {\n  const now = Date.now()\n  const windowStart = now - (windowInSeconds * 1000)\n  const key = `ratelimit:${identifier}`\n\n  \u002F\u002F Atomic Redis Pipeline (Runs in a single round-trip)\n  const multi = redis.multi()\n  \u002F\u002F 1. Remove all request timestamps older than the active window\n  multi.zremrangebyscore(key, 0, windowStart)\n  \u002F\u002F 2. Count requests currently in the active window\n  multi.zcard(key)\n  \u002F\u002F 3. Add the current timestamp as a new request\n  multi.zadd(key, now, `${now}-${Math.random()}`)\n  \u002F\u002F 4. Set key expiration to auto-clean idle users\n  multi.expire(key, windowInSeconds)\n\n  const results = await multi.exec()\n  const currentCount = (results?.[1]?.[1] as number) || 0\n\n  if (currentCount >= limit) {\n    return {\n      allowed: false,\n      remaining: 0,\n      retryAfter: Math.ceil(windowInSeconds - ((now - windowStart) \u002F 1000))\n    }\n  }\n\n  return {\n    allowed: true,\n    remaining: limit - currentCount - 1,\n    retryAfter: 0\n  }\n}\n",[41,1660,1661,1673,1677,1703,1707,1753,1770,1796,1813,1817,1822,1839,1844,1860,1865,1875,1880,1914,1919,1929,1934,1954,1992,1997,2012,2020,2030,2040,2069,2075,2080,2085,2093,2103,2121,2130,2135],{"__ignoreMap":39},[44,1662,1663,1665,1668,1670],{"class":46,"line":47},[44,1664,170],{"class":57},[44,1666,1667],{"class":72}," Redis ",[44,1669,176],{"class":57},[44,1671,1672],{"class":82}," 'ioredis'\n",[44,1674,1675],{"class":46,"line":54},[44,1676,119],{"emptyLinePlaceholder":118},[44,1678,1679,1681,1684,1686,1689,1692,1695,1698,1701],{"class":46,"line":89},[44,1680,58],{"class":57},[44,1682,1683],{"class":61}," redis",[44,1685,65],{"class":57},[44,1687,1688],{"class":57}," new",[44,1690,1691],{"class":68}," Redis",[44,1693,1694],{"class":72},"(process.env.",[44,1696,1697],{"class":61},"REDIS_URL",[44,1699,1700],{"class":57},"!",[44,1702,596],{"class":72},[44,1704,1705],{"class":46,"line":115},[44,1706,119],{"emptyLinePlaceholder":118},[44,1708,1709,1712,1715,1717,1720,1722,1725,1728,1731,1733,1736,1738,1741,1743,1746,1748,1750],{"class":46,"line":122},[44,1710,1711],{"class":57},"export",[44,1713,1714],{"class":57}," async",[44,1716,304],{"class":57},[44,1718,1719],{"class":68}," checkRateLimit",[44,1721,524],{"class":72},[44,1723,1724],{"class":503},"identifier",[44,1726,1727],{"class":57},":",[44,1729,1730],{"class":61}," string",[44,1732,100],{"class":72},[44,1734,1735],{"class":503},"limit",[44,1737,65],{"class":57},[44,1739,1740],{"class":61}," 60",[44,1742,100],{"class":72},[44,1744,1745],{"class":503},"windowInSeconds",[44,1747,65],{"class":57},[44,1749,1740],{"class":61},[44,1751,1752],{"class":72},") {\n",[44,1754,1755,1757,1760,1762,1765,1768],{"class":46,"line":128},[44,1756,315],{"class":57},[44,1758,1759],{"class":61}," now",[44,1761,65],{"class":57},[44,1763,1764],{"class":72}," Date.",[44,1766,1767],{"class":68},"now",[44,1769,329],{"class":72},[44,1771,1772,1774,1777,1779,1782,1785,1788,1791,1794],{"class":46,"line":232},[44,1773,315],{"class":57},[44,1775,1776],{"class":61}," windowStart",[44,1778,65],{"class":57},[44,1780,1781],{"class":72}," now ",[44,1783,1784],{"class":57},"-",[44,1786,1787],{"class":72}," (windowInSeconds ",[44,1789,1790],{"class":57},"*",[44,1792,1793],{"class":61}," 1000",[44,1795,596],{"class":72},[44,1797,1798,1800,1803,1805,1808,1810],{"class":46,"line":542},[44,1799,315],{"class":57},[44,1801,1802],{"class":61}," key",[44,1804,65],{"class":57},[44,1806,1807],{"class":82}," `ratelimit:${",[44,1809,1724],{"class":72},[44,1811,1812],{"class":82},"}`\n",[44,1814,1815],{"class":46,"line":548},[44,1816,119],{"emptyLinePlaceholder":118},[44,1818,1819],{"class":46,"line":556},[44,1820,1821],{"class":50},"  \u002F\u002F Atomic Redis Pipeline (Runs in a single round-trip)\n",[44,1823,1824,1826,1829,1831,1834,1837],{"class":46,"line":567},[44,1825,315],{"class":57},[44,1827,1828],{"class":61}," multi",[44,1830,65],{"class":57},[44,1832,1833],{"class":72}," redis.",[44,1835,1836],{"class":68},"multi",[44,1838,329],{"class":72},[44,1840,1841],{"class":46,"line":593},[44,1842,1843],{"class":50},"  \u002F\u002F 1. Remove all request timestamps older than the active window\n",[44,1845,1846,1849,1852,1855,1857],{"class":46,"line":1223},[44,1847,1848],{"class":72},"  multi.",[44,1850,1851],{"class":68},"zremrangebyscore",[44,1853,1854],{"class":72},"(key, ",[44,1856,76],{"class":61},[44,1858,1859],{"class":72},", windowStart)\n",[44,1861,1862],{"class":46,"line":1234},[44,1863,1864],{"class":50},"  \u002F\u002F 2. Count requests currently in the active window\n",[44,1866,1867,1869,1872],{"class":46,"line":1245},[44,1868,1848],{"class":72},[44,1870,1871],{"class":68},"zcard",[44,1873,1874],{"class":72},"(key)\n",[44,1876,1877],{"class":46,"line":1254},[44,1878,1879],{"class":50},"  \u002F\u002F 3. Add the current timestamp as a new request\n",[44,1881,1882,1884,1887,1890,1893,1895,1898,1901,1903,1906,1909,1912],{"class":46,"line":1436},[44,1883,1848],{"class":72},[44,1885,1886],{"class":68},"zadd",[44,1888,1889],{"class":72},"(key, now, ",[44,1891,1892],{"class":82},"`${",[44,1894,1767],{"class":72},[44,1896,1897],{"class":82},"}-${",[44,1899,1900],{"class":72},"Math",[44,1902,626],{"class":82},[44,1904,1905],{"class":68},"random",[44,1907,1908],{"class":82},"()",[44,1910,1911],{"class":82},"}`",[44,1913,596],{"class":72},[44,1915,1916],{"class":46,"line":1442},[44,1917,1918],{"class":50},"  \u002F\u002F 4. Set key expiration to auto-clean idle users\n",[44,1920,1921,1923,1926],{"class":46,"line":1448},[44,1922,1848],{"class":72},[44,1924,1925],{"class":68},"expire",[44,1927,1928],{"class":72},"(key, windowInSeconds)\n",[44,1930,1932],{"class":46,"line":1931},20,[44,1933,119],{"emptyLinePlaceholder":118},[44,1935,1937,1939,1942,1944,1946,1949,1952],{"class":46,"line":1936},21,[44,1938,315],{"class":57},[44,1940,1941],{"class":61}," results",[44,1943,65],{"class":57},[44,1945,323],{"class":57},[44,1947,1948],{"class":72}," multi.",[44,1950,1951],{"class":68},"exec",[44,1953,329],{"class":72},[44,1955,1957,1959,1962,1964,1967,1970,1973,1975,1978,1981,1984,1986,1989],{"class":46,"line":1956},22,[44,1958,315],{"class":57},[44,1960,1961],{"class":61}," currentCount",[44,1963,65],{"class":57},[44,1965,1966],{"class":72}," (results?.[",[44,1968,1969],{"class":61},"1",[44,1971,1972],{"class":72},"]?.[",[44,1974,1969],{"class":61},[44,1976,1977],{"class":72},"] ",[44,1979,1980],{"class":57},"as",[44,1982,1983],{"class":61}," number",[44,1985,507],{"class":72},[44,1987,1988],{"class":57},"||",[44,1990,1991],{"class":61}," 0\n",[44,1993,1995],{"class":46,"line":1994},23,[44,1996,119],{"emptyLinePlaceholder":118},[44,1998,2000,2003,2006,2009],{"class":46,"line":1999},24,[44,2001,2002],{"class":57},"  if",[44,2004,2005],{"class":72}," (currentCount ",[44,2007,2008],{"class":57},">=",[44,2010,2011],{"class":72}," limit) {\n",[44,2013,2015,2018],{"class":46,"line":2014},25,[44,2016,2017],{"class":57},"    return",[44,2019,513],{"class":72},[44,2021,2023,2026,2028],{"class":46,"line":2022},26,[44,2024,2025],{"class":72},"      allowed: ",[44,2027,858],{"class":61},[44,2029,861],{"class":72},[44,2031,2033,2036,2038],{"class":46,"line":2032},27,[44,2034,2035],{"class":72},"      remaining: ",[44,2037,76],{"class":61},[44,2039,861],{"class":72},[44,2041,2043,2046,2049,2052,2054,2057,2059,2062,2064,2066],{"class":46,"line":2042},28,[44,2044,2045],{"class":72},"      retryAfter: Math.",[44,2047,2048],{"class":68},"ceil",[44,2050,2051],{"class":72},"(windowInSeconds ",[44,2053,1784],{"class":57},[44,2055,2056],{"class":72}," ((now ",[44,2058,1784],{"class":57},[44,2060,2061],{"class":72}," windowStart) ",[44,2063,809],{"class":57},[44,2065,1793],{"class":61},[44,2067,2068],{"class":72},"))\n",[44,2070,2072],{"class":46,"line":2071},29,[44,2073,2074],{"class":72},"    }\n",[44,2076,2078],{"class":46,"line":2077},30,[44,2079,1445],{"class":72},[44,2081,2083],{"class":46,"line":2082},31,[44,2084,119],{"emptyLinePlaceholder":118},[44,2086,2088,2091],{"class":46,"line":2087},32,[44,2089,2090],{"class":57},"  return",[44,2092,513],{"class":72},[44,2094,2096,2099,2101],{"class":46,"line":2095},33,[44,2097,2098],{"class":72},"    allowed: ",[44,2100,1319],{"class":61},[44,2102,861],{"class":72},[44,2104,2106,2109,2111,2114,2116,2119],{"class":46,"line":2105},34,[44,2107,2108],{"class":72},"    remaining: limit ",[44,2110,1784],{"class":57},[44,2112,2113],{"class":72}," currentCount ",[44,2115,1784],{"class":57},[44,2117,2118],{"class":61}," 1",[44,2120,861],{"class":72},[44,2122,2124,2127],{"class":46,"line":2123},35,[44,2125,2126],{"class":72},"    retryAfter: ",[44,2128,2129],{"class":61},"0\n",[44,2131,2133],{"class":46,"line":2132},36,[44,2134,1445],{"class":72},[44,2136,2138],{"class":46,"line":2137},37,[44,2139,349],{"class":72},[23,2141],{},[26,2143,2145],{"id":2144},"_3-returning-standard-http-rate-limit-headers","3. Returning Standard HTTP Rate Limit Headers",[11,2147,2148],{},"Whenever your server answers a request, communicate rate limit states in the response headers (following IETF draft standards):",[34,2150,2152],{"className":768,"code":2151,"language":770,"meta":39,"style":39},"HTTP\u002F1.1 429 Too Many Requests\nRetry-After: 32\nX-RateLimit-Limit: 60\nX-RateLimit-Remaining: 0\nX-RateLimit-Reset: 1773489240\nContent-Type: application\u002Fjson\n\n{\n  \"error\": \"Too Many Requests\",\n  \"message\": \"Rate limit exceeded. Please retry in 32 seconds.\"\n}\n",[41,2153,2154,2159,2164,2169,2174,2179,2184,2188,2192,2197,2202],{"__ignoreMap":39},[44,2155,2156],{"class":46,"line":47},[44,2157,2158],{},"HTTP\u002F1.1 429 Too Many Requests\n",[44,2160,2161],{"class":46,"line":54},[44,2162,2163],{},"Retry-After: 32\n",[44,2165,2166],{"class":46,"line":89},[44,2167,2168],{},"X-RateLimit-Limit: 60\n",[44,2170,2171],{"class":46,"line":115},[44,2172,2173],{},"X-RateLimit-Remaining: 0\n",[44,2175,2176],{"class":46,"line":122},[44,2177,2178],{},"X-RateLimit-Reset: 1773489240\n",[44,2180,2181],{"class":46,"line":128},[44,2182,2183],{},"Content-Type: application\u002Fjson\n",[44,2185,2186],{"class":46,"line":232},[44,2187,119],{"emptyLinePlaceholder":118},[44,2189,2190],{"class":46,"line":542},[44,2191,847],{},[44,2193,2194],{"class":46,"line":548},[44,2195,2196],{},"  \"error\": \"Too Many Requests\",\n",[44,2198,2199],{"class":46,"line":556},[44,2200,2201],{},"  \"message\": \"Rate limit exceeded. Please retry in 32 seconds.\"\n",[44,2203,2204],{"class":46,"line":567},[44,2205,349],{},[11,2207,2208],{},"This ensures honest third-party API clients and mobile SDKs can automatically back off and retry without overwhelming your infrastructure.",[707,2210,2211],{},"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":39,"searchDepth":54,"depth":54,"links":2213},[2214,2219,2220],{"id":1608,"depth":54,"text":1609,"children":2215},[2216,2217,2218],{"id":1612,"depth":89,"text":1613},{"id":1623,"depth":89,"text":1624},{"id":1638,"depth":89,"text":1639},{"id":1647,"depth":54,"text":1648},{"id":2144,"depth":54,"text":2145},"2026-09-14","Comparing rate-limiting algorithms to protect your backend against scrapers, credential stuffing, and bot spam with minimal latency overhead.",{},"\u002Fblog\u002Fen\u002Fapi-rate-limiting-redis",{"title":1584,"description":2222},"api-rate-limiting-redis","blog\u002Fen\u002Fapi-rate-limiting-redis",[1577,2229,2230,1578,2231],"security","redis","performance","KXTsuQOwj895dkbCDObhyO_wOncRKtB2ufJbjc-AUyc",1792236100049]