[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fusing-shallowref-nuxt-usefetch":3,"$f5ctpa-LyS8bc2YLgJo1sBhI_ZauMRLhds8OTFVoCjDQ":2766,"i-local-icon:calendar-days":2769,"i-local-icon:tag":2773,"i-local-icon:eye":2775},{"id":4,"title":5,"body":6,"categories_slug":2755,"comment_count":2757,"date_published":2758,"description":2759,"extension":2760,"meta":2761,"navigation":514,"path":2762,"seo":2763,"stem":2764,"__hash__":2765},"content\u002Fblog\u002F16.using-shallowref-nuxt-usefetch.md","Using shallowRef with Nuxt 3 useFetch for better performance",{"type":7,"value":8,"toc":2722},"minimark",[9,13,18,23,40,44,49,52,108,111,127,131,137,188,191,205,209,213,269,273,730,734,965,969,973,1195,1199,1356,1360,1363,1374,1378,1382,1391,1440,1447,1497,1504,1554,1561,1611,1615,1622,1675,1682,1735,1742,1795,1799,1803,1950,1954,2057,2061,2181,2185,2304,2308,2312,2457,2461,2602,2606,2609,2677,2680,2691,2695,2704,2718],[10,11,5],"h1",{"id":12},"using-shallowref-with-nuxt-3-usefetch-for-better-performance",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26,27,31,32,35,36,39],"p",{},"When building Nuxt 3 applications, the ",[28,29,30],"code",{},"useFetch"," composable is the simplest and most powerful tool for data fetching. However, by default, it creates deep reactive references which can impact performance when dealing with large datasets or content that doesn't need to be modified or mutated. This is where ",[28,33,34],{},"shallowRef"," (using the ",[28,37,38],{},"deep: false"," option) becomes invaluable.",[19,41,43],{"id":42},"understanding-deep-vs-shallow-reactivity","Understanding Deep vs Shallow Reactivity",[45,46,48],"h3",{"id":47},"deep-reactivity-default-behavior","Deep Reactivity (Default Behavior)",[24,50,51],{},"By default, Nuxt 3 creates deeply reactive references:",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-javascript shiki shiki-themes github-dark","\u002F\u002F Default useFetch behavior - deeply reactive\nconst { data } = await useFetch(\"\u002Fapi\u002Fblog-posts\");\n","javascript","",[28,60,61,70],{"__ignoreMap":58},[62,63,66],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sAwPA","\u002F\u002F Default useFetch behavior - deeply reactive\n",[62,71,73,77,81,85,88,91,94,98,101,105],{"class":64,"line":72},2,[62,74,76],{"class":75},"snl16","const",[62,78,80],{"class":79},"s95oV"," { ",[62,82,84],{"class":83},"sDLfK","data",[62,86,87],{"class":79}," } ",[62,89,90],{"class":75},"=",[62,92,93],{"class":75}," await",[62,95,97],{"class":96},"svObZ"," useFetch",[62,99,100],{"class":79},"(",[62,102,104],{"class":103},"sU2Wk","\"\u002Fapi\u002Fblog-posts\"",[62,106,107],{"class":79},");\n",[24,109,110],{},"This means Nuxt will:",[112,113,114,118,121,124],"ul",{},[115,116,117],"li",{},"Recursively traverse all nested objects and arrays",[115,119,120],{},"Convert every property into reactive getters\u002Fsetters",[115,122,123],{},"Track changes at every level of nesting",[115,125,126],{},"Trigger reactivity when any nested property changes",[45,128,130],{"id":129},"shallow-reactivity-with-shallowref","Shallow Reactivity with shallowRef",[24,132,133,134,136],{},"With ",[28,135,34],{},", Nuxt only tracks changes to the root reference:",[53,138,140],{"className":55,"code":139,"language":57,"meta":58,"style":58},"\u002F\u002F Using shallowRef - only root level reactivity\nconst { data } = await useFetch(\"\u002Fapi\u002Fblog-posts\", {\n  deep: false,\n});\n",[28,141,142,147,170,182],{"__ignoreMap":58},[62,143,144],{"class":64,"line":65},[62,145,146],{"class":68},"\u002F\u002F Using shallowRef - only root level reactivity\n",[62,148,149,151,153,155,157,159,161,163,165,167],{"class":64,"line":72},[62,150,76],{"class":75},[62,152,80],{"class":79},[62,154,84],{"class":83},[62,156,87],{"class":79},[62,158,90],{"class":75},[62,160,93],{"class":75},[62,162,97],{"class":96},[62,164,100],{"class":79},[62,166,104],{"class":103},[62,168,169],{"class":79},", {\n",[62,171,173,176,179],{"class":64,"line":172},3,[62,174,175],{"class":79},"  deep: ",[62,177,178],{"class":83},"false",[62,180,181],{"class":79},",\n",[62,183,185],{"class":64,"line":184},4,[62,186,187],{"class":79},"});\n",[24,189,190],{},"This approach:",[112,192,193,196,199,202],{},[115,194,195],{},"Only makes the root reference reactive",[115,197,198],{},"Doesn't traverse nested objects\u002Farrays",[115,200,201],{},"Significantly reduces memory usage and initialization time",[115,203,204],{},"Still triggers reactivity when the entire data object is replaced",[19,206,208],{"id":207},"how-to-use-shallowref-with-usefetch","How to Use shallowRef with useFetch",[45,210,212],{"id":211},"basic-usage","Basic Usage",[53,214,216],{"className":55,"code":215,"language":57,"meta":58,"style":58},"\u002F\u002F In your Nuxt 3 component or composable\nconst { data, pending, error } = await useFetch(\"\u002Fapi\u002Farticles\", {\n  deep: false,\n});\n",[28,217,218,223,257,265],{"__ignoreMap":58},[62,219,220],{"class":64,"line":65},[62,221,222],{"class":68},"\u002F\u002F In your Nuxt 3 component or composable\n",[62,224,225,227,229,231,234,237,239,242,244,246,248,250,252,255],{"class":64,"line":72},[62,226,76],{"class":75},[62,228,80],{"class":79},[62,230,84],{"class":83},[62,232,233],{"class":79},", ",[62,235,236],{"class":83},"pending",[62,238,233],{"class":79},[62,240,241],{"class":83},"error",[62,243,87],{"class":79},[62,245,90],{"class":75},[62,247,93],{"class":75},[62,249,97],{"class":96},[62,251,100],{"class":79},[62,253,254],{"class":103},"\"\u002Fapi\u002Farticles\"",[62,256,169],{"class":79},[62,258,259,261,263],{"class":64,"line":172},[62,260,175],{"class":79},[62,262,178],{"class":83},[62,264,181],{"class":79},[62,266,267],{"class":64,"line":184},[62,268,187],{"class":79},[45,270,272],{"id":271},"real-world-example-blog-post-fetching","Real-World Example: Blog Post Fetching",[53,274,278],{"className":275,"code":276,"language":277,"meta":58,"style":58},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv v-if=\"pending\">Loading articles...\u003C\u002Fdiv>\n    \u003Cdiv v-else-if=\"error\">Error: {{ error.message }}\u003C\u002Fdiv>\n    \u003Cdiv v-else>\n      \u003Carticle v-for=\"post in data.posts\" :key=\"post.id\">\n        \u003Ch2>{{ post.title }}\u003C\u002Fh2>\n        \u003Cp>{{ post.excerpt }}\u003C\u002Fp>\n        \u003Cdiv class=\"meta\">\n          \u003Cspan>By {{ post.author.name }}\u003C\u002Fspan>\n          \u003Cspan>{{ formatDate(post.publishedAt) }}\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Farticle>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\n\u002F\u002F Fetch blog posts with shallow reactivity\nconst { data, pending, error } = await useFetch(\"\u002Fapi\u002Fblog\u002Fposts\", {\n  deep: false,\n  transform: (data) => ({\n    posts: data.map((post) => ({\n      id: post.id,\n      title: post.title,\n      excerpt: post.excerpt,\n      author: post.author,\n      publishedAt: post.published_at,\n    })),\n  }),\n});\n\nconst formatDate = (date) => {\n  return new Date(date).toLocaleDateString();\n};\n\u003C\u002Fscript>\n","vue",[28,279,280,292,302,324,345,357,384,399,413,430,445,459,469,479,489,499,509,516,529,535,567,576,597,618,624,630,636,642,648,654,660,665,670,694,715,721],{"__ignoreMap":58},[62,281,282,285,289],{"class":64,"line":65},[62,283,284],{"class":79},"\u003C",[62,286,288],{"class":287},"s4JwU","template",[62,290,291],{"class":79},">\n",[62,293,294,297,300],{"class":64,"line":72},[62,295,296],{"class":79},"  \u003C",[62,298,299],{"class":287},"div",[62,301,291],{"class":79},[62,303,304,307,309,312,314,317,320,322],{"class":64,"line":172},[62,305,306],{"class":79},"    \u003C",[62,308,299],{"class":287},[62,310,311],{"class":96}," v-if",[62,313,90],{"class":79},[62,315,316],{"class":103},"\"pending\"",[62,318,319],{"class":79},">Loading articles...\u003C\u002F",[62,321,299],{"class":287},[62,323,291],{"class":79},[62,325,326,328,330,333,335,338,341,343],{"class":64,"line":184},[62,327,306],{"class":79},[62,329,299],{"class":287},[62,331,332],{"class":96}," v-else-if",[62,334,90],{"class":79},[62,336,337],{"class":103},"\"error\"",[62,339,340],{"class":79},">Error: {{ error.message }}\u003C\u002F",[62,342,299],{"class":287},[62,344,291],{"class":79},[62,346,348,350,352,355],{"class":64,"line":347},5,[62,349,306],{"class":79},[62,351,299],{"class":287},[62,353,354],{"class":96}," v-else",[62,356,291],{"class":79},[62,358,360,363,366,369,371,374,377,379,382],{"class":64,"line":359},6,[62,361,362],{"class":79},"      \u003C",[62,364,365],{"class":287},"article",[62,367,368],{"class":96}," v-for",[62,370,90],{"class":79},[62,372,373],{"class":103},"\"post in data.posts\"",[62,375,376],{"class":96}," :key",[62,378,90],{"class":79},[62,380,381],{"class":103},"\"post.id\"",[62,383,291],{"class":79},[62,385,387,390,392,395,397],{"class":64,"line":386},7,[62,388,389],{"class":79},"        \u003C",[62,391,19],{"class":287},[62,393,394],{"class":79},">{{ post.title }}\u003C\u002F",[62,396,19],{"class":287},[62,398,291],{"class":79},[62,400,402,404,406,409,411],{"class":64,"line":401},8,[62,403,389],{"class":79},[62,405,24],{"class":287},[62,407,408],{"class":79},">{{ post.excerpt }}\u003C\u002F",[62,410,24],{"class":287},[62,412,291],{"class":79},[62,414,416,418,420,423,425,428],{"class":64,"line":415},9,[62,417,389],{"class":79},[62,419,299],{"class":287},[62,421,422],{"class":96}," class",[62,424,90],{"class":79},[62,426,427],{"class":103},"\"meta\"",[62,429,291],{"class":79},[62,431,433,436,438,441,443],{"class":64,"line":432},10,[62,434,435],{"class":79},"          \u003C",[62,437,62],{"class":287},[62,439,440],{"class":79},">By {{ post.author.name }}\u003C\u002F",[62,442,62],{"class":287},[62,444,291],{"class":79},[62,446,448,450,452,455,457],{"class":64,"line":447},11,[62,449,435],{"class":79},[62,451,62],{"class":287},[62,453,454],{"class":79},">{{ formatDate(post.publishedAt) }}\u003C\u002F",[62,456,62],{"class":287},[62,458,291],{"class":79},[62,460,462,465,467],{"class":64,"line":461},12,[62,463,464],{"class":79},"        \u003C\u002F",[62,466,299],{"class":287},[62,468,291],{"class":79},[62,470,472,475,477],{"class":64,"line":471},13,[62,473,474],{"class":79},"      \u003C\u002F",[62,476,365],{"class":287},[62,478,291],{"class":79},[62,480,482,485,487],{"class":64,"line":481},14,[62,483,484],{"class":79},"    \u003C\u002F",[62,486,299],{"class":287},[62,488,291],{"class":79},[62,490,492,495,497],{"class":64,"line":491},15,[62,493,494],{"class":79},"  \u003C\u002F",[62,496,299],{"class":287},[62,498,291],{"class":79},[62,500,502,505,507],{"class":64,"line":501},16,[62,503,504],{"class":79},"\u003C\u002F",[62,506,288],{"class":287},[62,508,291],{"class":79},[62,510,512],{"class":64,"line":511},17,[62,513,515],{"emptyLinePlaceholder":514},true,"\n",[62,517,519,521,524,527],{"class":64,"line":518},18,[62,520,284],{"class":79},[62,522,523],{"class":287},"script",[62,525,526],{"class":96}," setup",[62,528,291],{"class":79},[62,530,532],{"class":64,"line":531},19,[62,533,534],{"class":68},"\u002F\u002F Fetch blog posts with shallow reactivity\n",[62,536,538,540,542,544,546,548,550,552,554,556,558,560,562,565],{"class":64,"line":537},20,[62,539,76],{"class":75},[62,541,80],{"class":79},[62,543,84],{"class":83},[62,545,233],{"class":79},[62,547,236],{"class":83},[62,549,233],{"class":79},[62,551,241],{"class":83},[62,553,87],{"class":79},[62,555,90],{"class":75},[62,557,93],{"class":75},[62,559,97],{"class":96},[62,561,100],{"class":79},[62,563,564],{"class":103},"\"\u002Fapi\u002Fblog\u002Fposts\"",[62,566,169],{"class":79},[62,568,570,572,574],{"class":64,"line":569},21,[62,571,175],{"class":79},[62,573,178],{"class":83},[62,575,181],{"class":79},[62,577,579,582,585,588,591,594],{"class":64,"line":578},22,[62,580,581],{"class":96},"  transform",[62,583,584],{"class":79},": (",[62,586,84],{"class":587},"s9osk",[62,589,590],{"class":79},") ",[62,592,593],{"class":75},"=>",[62,595,596],{"class":79}," ({\n",[62,598,600,603,606,609,612,614,616],{"class":64,"line":599},23,[62,601,602],{"class":79},"    posts: data.",[62,604,605],{"class":96},"map",[62,607,608],{"class":79},"((",[62,610,611],{"class":587},"post",[62,613,590],{"class":79},[62,615,593],{"class":75},[62,617,596],{"class":79},[62,619,621],{"class":64,"line":620},24,[62,622,623],{"class":79},"      id: post.id,\n",[62,625,627],{"class":64,"line":626},25,[62,628,629],{"class":79},"      title: post.title,\n",[62,631,633],{"class":64,"line":632},26,[62,634,635],{"class":79},"      excerpt: post.excerpt,\n",[62,637,639],{"class":64,"line":638},27,[62,640,641],{"class":79},"      author: post.author,\n",[62,643,645],{"class":64,"line":644},28,[62,646,647],{"class":79},"      publishedAt: post.published_at,\n",[62,649,651],{"class":64,"line":650},29,[62,652,653],{"class":79},"    })),\n",[62,655,657],{"class":64,"line":656},30,[62,658,659],{"class":79},"  }),\n",[62,661,663],{"class":64,"line":662},31,[62,664,187],{"class":79},[62,666,668],{"class":64,"line":667},32,[62,669,515],{"emptyLinePlaceholder":514},[62,671,673,675,678,681,684,687,689,691],{"class":64,"line":672},33,[62,674,76],{"class":75},[62,676,677],{"class":96}," formatDate",[62,679,680],{"class":75}," =",[62,682,683],{"class":79}," (",[62,685,686],{"class":587},"date",[62,688,590],{"class":79},[62,690,593],{"class":75},[62,692,693],{"class":79}," {\n",[62,695,697,700,703,706,709,712],{"class":64,"line":696},34,[62,698,699],{"class":75},"  return",[62,701,702],{"class":75}," new",[62,704,705],{"class":96}," Date",[62,707,708],{"class":79},"(date).",[62,710,711],{"class":96},"toLocaleDateString",[62,713,714],{"class":79},"();\n",[62,716,718],{"class":64,"line":717},35,[62,719,720],{"class":79},"};\n",[62,722,724,726,728],{"class":64,"line":723},36,[62,725,504],{"class":79},[62,727,523],{"class":287},[62,729,291],{"class":79},[45,731,733],{"id":732},"advanced-example-dynamic-content-loading","Advanced Example: Dynamic Content Loading",[53,735,737],{"className":275,"code":736,"language":277,"meta":58,"style":58},"\u003Cscript setup>\nconst route = useRoute();\n\n\u002F\u002F Fetch article content with shallow reactivity\nconst { data: article } = await useFetch(`\u002Fapi\u002Farticles\u002F${route.params.slug}`, {\n  deep: false,\n  key: `article-${route.params.slug}`,\n  transform: (data) => ({\n    ...data,\n    \u002F\u002F Pre-process content if needed\n    processedContent: data.content.replace(\u002F\\n\u002Fg, \"\u003Cbr>\"),\n  }),\n});\n\n\u002F\u002F SEO meta tags\nuseSeoMeta({\n  title: article.value?.title,\n  description: article.value?.excerpt,\n  ogTitle: article.value?.title,\n  ogDescription: article.value?.excerpt,\n  ogImage: article.value?.featuredImage,\n});\n\u003C\u002Fscript>\n",[28,738,739,749,763,767,772,817,825,847,861,869,874,903,907,911,915,920,928,933,938,943,948,953,957],{"__ignoreMap":58},[62,740,741,743,745,747],{"class":64,"line":65},[62,742,284],{"class":79},[62,744,523],{"class":287},[62,746,526],{"class":96},[62,748,291],{"class":79},[62,750,751,753,756,758,761],{"class":64,"line":72},[62,752,76],{"class":75},[62,754,755],{"class":83}," route",[62,757,680],{"class":75},[62,759,760],{"class":96}," useRoute",[62,762,714],{"class":79},[62,764,765],{"class":64,"line":172},[62,766,515],{"emptyLinePlaceholder":514},[62,768,769],{"class":64,"line":184},[62,770,771],{"class":68},"\u002F\u002F Fetch article content with shallow reactivity\n",[62,773,774,776,778,780,783,785,787,789,791,793,795,798,801,804,807,809,812,815],{"class":64,"line":347},[62,775,76],{"class":75},[62,777,80],{"class":79},[62,779,84],{"class":587},[62,781,782],{"class":79},": ",[62,784,365],{"class":83},[62,786,87],{"class":79},[62,788,90],{"class":75},[62,790,93],{"class":75},[62,792,97],{"class":96},[62,794,100],{"class":79},[62,796,797],{"class":103},"`\u002Fapi\u002Farticles\u002F${",[62,799,800],{"class":79},"route",[62,802,803],{"class":103},".",[62,805,806],{"class":79},"params",[62,808,803],{"class":103},[62,810,811],{"class":79},"slug",[62,813,814],{"class":103},"}`",[62,816,169],{"class":79},[62,818,819,821,823],{"class":64,"line":359},[62,820,175],{"class":79},[62,822,178],{"class":83},[62,824,181],{"class":79},[62,826,827,830,833,835,837,839,841,843,845],{"class":64,"line":386},[62,828,829],{"class":79},"  key: ",[62,831,832],{"class":103},"`article-${",[62,834,800],{"class":79},[62,836,803],{"class":103},[62,838,806],{"class":79},[62,840,803],{"class":103},[62,842,811],{"class":79},[62,844,814],{"class":103},[62,846,181],{"class":79},[62,848,849,851,853,855,857,859],{"class":64,"line":401},[62,850,581],{"class":96},[62,852,584],{"class":79},[62,854,84],{"class":587},[62,856,590],{"class":79},[62,858,593],{"class":75},[62,860,596],{"class":79},[62,862,863,866],{"class":64,"line":415},[62,864,865],{"class":75},"    ...",[62,867,868],{"class":79},"data,\n",[62,870,871],{"class":64,"line":432},[62,872,873],{"class":68},"    \u002F\u002F Pre-process content if needed\n",[62,875,876,879,882,884,887,890,892,895,897,900],{"class":64,"line":447},[62,877,878],{"class":79},"    processedContent: data.content.",[62,880,881],{"class":96},"replace",[62,883,100],{"class":79},[62,885,886],{"class":103},"\u002F",[62,888,889],{"class":83},"\\n",[62,891,886],{"class":103},[62,893,894],{"class":75},"g",[62,896,233],{"class":79},[62,898,899],{"class":103},"\"\u003Cbr>\"",[62,901,902],{"class":79},"),\n",[62,904,905],{"class":64,"line":461},[62,906,659],{"class":79},[62,908,909],{"class":64,"line":471},[62,910,187],{"class":79},[62,912,913],{"class":64,"line":481},[62,914,515],{"emptyLinePlaceholder":514},[62,916,917],{"class":64,"line":491},[62,918,919],{"class":68},"\u002F\u002F SEO meta tags\n",[62,921,922,925],{"class":64,"line":501},[62,923,924],{"class":96},"useSeoMeta",[62,926,927],{"class":79},"({\n",[62,929,930],{"class":64,"line":511},[62,931,932],{"class":79},"  title: article.value?.title,\n",[62,934,935],{"class":64,"line":518},[62,936,937],{"class":79},"  description: article.value?.excerpt,\n",[62,939,940],{"class":64,"line":531},[62,941,942],{"class":79},"  ogTitle: article.value?.title,\n",[62,944,945],{"class":64,"line":537},[62,946,947],{"class":79},"  ogDescription: article.value?.excerpt,\n",[62,949,950],{"class":64,"line":569},[62,951,952],{"class":79},"  ogImage: article.value?.featuredImage,\n",[62,954,955],{"class":64,"line":578},[62,956,187],{"class":79},[62,958,959,961,963],{"class":64,"line":599},[62,960,504],{"class":79},[62,962,523],{"class":287},[62,964,291],{"class":79},[19,966,968],{"id":967},"performance-benefits-of-shallowref","Performance Benefits of shallowRef",[45,970,972],{"id":971},"_1-reduced-memory-overhead","1. Reduced Memory Overhead",[53,974,976],{"className":55,"code":975,"language":57,"meta":58,"style":58},"\u002F\u002F Deep reactivity - high memory usage\nconst deepData = {\n  posts: [\n    {\n      id: 1,\n      title: \"Article 1\",\n      content: \"...\", \u002F\u002F Large content string\n      comments: [\n        { id: 1, text: \"Comment 1\", author: { name: \"John\", avatar: \"...\" } },\n        { id: 2, text: \"Comment 2\", author: { name: \"Jane\", avatar: \"...\" } },\n        \u002F\u002F ... hundreds of comments\n      ],\n      tags: [\"vue\", \"nuxt\", \"performance\"],\n      metadata: {\n        \u002F* complex nested object *\u002F\n      },\n    },\n    \u002F\u002F ... hundreds of posts\n  ],\n};\n\n\u002F\u002F With deep: true (default)\n\u002F\u002F Every property in posts, comments, authors, etc. becomes reactive\n\u002F\u002F Memory usage: HIGH\n\n\u002F\u002F With deep: false\n\u002F\u002F Only the root 'posts' array reference is reactive\n\u002F\u002F Memory usage: LOW\n",[28,977,978,983,994,999,1004,1014,1024,1037,1042,1069,1092,1097,1102,1123,1128,1133,1138,1143,1148,1153,1157,1161,1166,1171,1176,1180,1185,1190],{"__ignoreMap":58},[62,979,980],{"class":64,"line":65},[62,981,982],{"class":68},"\u002F\u002F Deep reactivity - high memory usage\n",[62,984,985,987,990,992],{"class":64,"line":72},[62,986,76],{"class":75},[62,988,989],{"class":83}," deepData",[62,991,680],{"class":75},[62,993,693],{"class":79},[62,995,996],{"class":64,"line":172},[62,997,998],{"class":79},"  posts: [\n",[62,1000,1001],{"class":64,"line":184},[62,1002,1003],{"class":79},"    {\n",[62,1005,1006,1009,1012],{"class":64,"line":347},[62,1007,1008],{"class":79},"      id: ",[62,1010,1011],{"class":83},"1",[62,1013,181],{"class":79},[62,1015,1016,1019,1022],{"class":64,"line":359},[62,1017,1018],{"class":79},"      title: ",[62,1020,1021],{"class":103},"\"Article 1\"",[62,1023,181],{"class":79},[62,1025,1026,1029,1032,1034],{"class":64,"line":386},[62,1027,1028],{"class":79},"      content: ",[62,1030,1031],{"class":103},"\"...\"",[62,1033,233],{"class":79},[62,1035,1036],{"class":68},"\u002F\u002F Large content string\n",[62,1038,1039],{"class":64,"line":401},[62,1040,1041],{"class":79},"      comments: [\n",[62,1043,1044,1047,1049,1052,1055,1058,1061,1064,1066],{"class":64,"line":415},[62,1045,1046],{"class":79},"        { id: ",[62,1048,1011],{"class":83},[62,1050,1051],{"class":79},", text: ",[62,1053,1054],{"class":103},"\"Comment 1\"",[62,1056,1057],{"class":79},", author: { name: ",[62,1059,1060],{"class":103},"\"John\"",[62,1062,1063],{"class":79},", avatar: ",[62,1065,1031],{"class":103},[62,1067,1068],{"class":79}," } },\n",[62,1070,1071,1073,1076,1078,1081,1083,1086,1088,1090],{"class":64,"line":432},[62,1072,1046],{"class":79},[62,1074,1075],{"class":83},"2",[62,1077,1051],{"class":79},[62,1079,1080],{"class":103},"\"Comment 2\"",[62,1082,1057],{"class":79},[62,1084,1085],{"class":103},"\"Jane\"",[62,1087,1063],{"class":79},[62,1089,1031],{"class":103},[62,1091,1068],{"class":79},[62,1093,1094],{"class":64,"line":447},[62,1095,1096],{"class":68},"        \u002F\u002F ... hundreds of comments\n",[62,1098,1099],{"class":64,"line":461},[62,1100,1101],{"class":79},"      ],\n",[62,1103,1104,1107,1110,1112,1115,1117,1120],{"class":64,"line":471},[62,1105,1106],{"class":79},"      tags: [",[62,1108,1109],{"class":103},"\"vue\"",[62,1111,233],{"class":79},[62,1113,1114],{"class":103},"\"nuxt\"",[62,1116,233],{"class":79},[62,1118,1119],{"class":103},"\"performance\"",[62,1121,1122],{"class":79},"],\n",[62,1124,1125],{"class":64,"line":481},[62,1126,1127],{"class":79},"      metadata: {\n",[62,1129,1130],{"class":64,"line":491},[62,1131,1132],{"class":68},"        \u002F* complex nested object *\u002F\n",[62,1134,1135],{"class":64,"line":501},[62,1136,1137],{"class":79},"      },\n",[62,1139,1140],{"class":64,"line":511},[62,1141,1142],{"class":79},"    },\n",[62,1144,1145],{"class":64,"line":518},[62,1146,1147],{"class":68},"    \u002F\u002F ... hundreds of posts\n",[62,1149,1150],{"class":64,"line":531},[62,1151,1152],{"class":79},"  ],\n",[62,1154,1155],{"class":64,"line":537},[62,1156,720],{"class":79},[62,1158,1159],{"class":64,"line":569},[62,1160,515],{"emptyLinePlaceholder":514},[62,1162,1163],{"class":64,"line":578},[62,1164,1165],{"class":68},"\u002F\u002F With deep: true (default)\n",[62,1167,1168],{"class":64,"line":599},[62,1169,1170],{"class":68},"\u002F\u002F Every property in posts, comments, authors, etc. becomes reactive\n",[62,1172,1173],{"class":64,"line":620},[62,1174,1175],{"class":68},"\u002F\u002F Memory usage: HIGH\n",[62,1177,1178],{"class":64,"line":626},[62,1179,515],{"emptyLinePlaceholder":514},[62,1181,1182],{"class":64,"line":632},[62,1183,1184],{"class":68},"\u002F\u002F With deep: false\n",[62,1186,1187],{"class":64,"line":638},[62,1188,1189],{"class":68},"\u002F\u002F Only the root 'posts' array reference is reactive\n",[62,1191,1192],{"class":64,"line":644},[62,1193,1194],{"class":68},"\u002F\u002F Memory usage: LOW\n",[45,1196,1198],{"id":1197},"_2-faster-initialization","2. Faster Initialization",[53,1200,1202],{"className":55,"code":1201,"language":57,"meta":58,"style":58},"\u002F\u002F Performance comparison\nconsole.time(\"deep-reactivity\");\nconst { data: deepData } = await useFetch(\"\u002Fapi\u002Flarge-dataset\", {\n  deep: true, \u002F\u002F default\n});\nconsole.timeEnd(\"deep-reactivity\"); \u002F\u002F ~150ms\n\nconsole.time(\"shallow-reactivity\");\nconst { data: shallowData } = await useFetch(\"\u002Fapi\u002Flarge-dataset\", {\n  deep: false,\n});\nconsole.timeEnd(\"shallow-reactivity\"); \u002F\u002F ~25ms\n",[28,1203,1204,1209,1224,1252,1264,1268,1285,1289,1302,1329,1337,1341],{"__ignoreMap":58},[62,1205,1206],{"class":64,"line":65},[62,1207,1208],{"class":68},"\u002F\u002F Performance comparison\n",[62,1210,1211,1214,1217,1219,1222],{"class":64,"line":72},[62,1212,1213],{"class":79},"console.",[62,1215,1216],{"class":96},"time",[62,1218,100],{"class":79},[62,1220,1221],{"class":103},"\"deep-reactivity\"",[62,1223,107],{"class":79},[62,1225,1226,1228,1230,1232,1234,1237,1239,1241,1243,1245,1247,1250],{"class":64,"line":172},[62,1227,76],{"class":75},[62,1229,80],{"class":79},[62,1231,84],{"class":587},[62,1233,782],{"class":79},[62,1235,1236],{"class":83},"deepData",[62,1238,87],{"class":79},[62,1240,90],{"class":75},[62,1242,93],{"class":75},[62,1244,97],{"class":96},[62,1246,100],{"class":79},[62,1248,1249],{"class":103},"\"\u002Fapi\u002Flarge-dataset\"",[62,1251,169],{"class":79},[62,1253,1254,1256,1259,1261],{"class":64,"line":184},[62,1255,175],{"class":79},[62,1257,1258],{"class":83},"true",[62,1260,233],{"class":79},[62,1262,1263],{"class":68},"\u002F\u002F default\n",[62,1265,1266],{"class":64,"line":347},[62,1267,187],{"class":79},[62,1269,1270,1272,1275,1277,1279,1282],{"class":64,"line":359},[62,1271,1213],{"class":79},[62,1273,1274],{"class":96},"timeEnd",[62,1276,100],{"class":79},[62,1278,1221],{"class":103},[62,1280,1281],{"class":79},"); ",[62,1283,1284],{"class":68},"\u002F\u002F ~150ms\n",[62,1286,1287],{"class":64,"line":386},[62,1288,515],{"emptyLinePlaceholder":514},[62,1290,1291,1293,1295,1297,1300],{"class":64,"line":401},[62,1292,1213],{"class":79},[62,1294,1216],{"class":96},[62,1296,100],{"class":79},[62,1298,1299],{"class":103},"\"shallow-reactivity\"",[62,1301,107],{"class":79},[62,1303,1304,1306,1308,1310,1312,1315,1317,1319,1321,1323,1325,1327],{"class":64,"line":415},[62,1305,76],{"class":75},[62,1307,80],{"class":79},[62,1309,84],{"class":587},[62,1311,782],{"class":79},[62,1313,1314],{"class":83},"shallowData",[62,1316,87],{"class":79},[62,1318,90],{"class":75},[62,1320,93],{"class":75},[62,1322,97],{"class":96},[62,1324,100],{"class":79},[62,1326,1249],{"class":103},[62,1328,169],{"class":79},[62,1330,1331,1333,1335],{"class":64,"line":432},[62,1332,175],{"class":79},[62,1334,178],{"class":83},[62,1336,181],{"class":79},[62,1338,1339],{"class":64,"line":447},[62,1340,187],{"class":79},[62,1342,1343,1345,1347,1349,1351,1353],{"class":64,"line":461},[62,1344,1213],{"class":79},[62,1346,1274],{"class":96},[62,1348,100],{"class":79},[62,1350,1299],{"class":103},[62,1352,1281],{"class":79},[62,1354,1355],{"class":68},"\u002F\u002F ~25ms\n",[45,1357,1359],{"id":1358},"_3-reduced-bundle-size-impact","3. Reduced Bundle Size Impact",[24,1361,1362],{},"With shallow reactivity, Vue doesn't need to create as many reactive proxies, resulting in:",[112,1364,1365,1368,1371],{},[115,1366,1367],{},"Smaller JavaScript heap usage",[115,1369,1370],{},"Better garbage collection performance",[115,1372,1373],{},"Faster component mounting\u002Funmounting",[19,1375,1377],{"id":1376},"when-to-use-shallowref-deep-false","When to Use shallowRef (deep: false)",[45,1379,1381],{"id":1380},"perfect-use-cases","✅ Perfect Use Cases",[1383,1384,1385],"ol",{},[115,1386,1387],{},[1388,1389,1390],"strong",{},"Reading Static Content such as blog posts, articles etc...",[53,1392,1394],{"className":55,"code":1393,"language":57,"meta":58,"style":58},"\u002F\u002F Blog posts, articles, documentation\nconst { data: posts } = await useFetch(\"\u002Fapi\u002Fblog\u002Fposts\", {\n  deep: false,\n});\n",[28,1395,1396,1401,1428,1436],{"__ignoreMap":58},[62,1397,1398],{"class":64,"line":65},[62,1399,1400],{"class":68},"\u002F\u002F Blog posts, articles, documentation\n",[62,1402,1403,1405,1407,1409,1411,1414,1416,1418,1420,1422,1424,1426],{"class":64,"line":72},[62,1404,76],{"class":75},[62,1406,80],{"class":79},[62,1408,84],{"class":587},[62,1410,782],{"class":79},[62,1412,1413],{"class":83},"posts",[62,1415,87],{"class":79},[62,1417,90],{"class":75},[62,1419,93],{"class":75},[62,1421,97],{"class":96},[62,1423,100],{"class":79},[62,1425,564],{"class":103},[62,1427,169],{"class":79},[62,1429,1430,1432,1434],{"class":64,"line":172},[62,1431,175],{"class":79},[62,1433,178],{"class":83},[62,1435,181],{"class":79},[62,1437,1438],{"class":64,"line":184},[62,1439,187],{"class":79},[1383,1441,1442],{"start":72},[115,1443,1444],{},[1388,1445,1446],{},"Large Datasets for Display",[53,1448,1450],{"className":55,"code":1449,"language":57,"meta":58,"style":58},"\u002F\u002F Product catalogs, user lists, analytics data\nconst { data: products } = await useFetch(\"\u002Fapi\u002Fproducts\", {\n  deep: false,\n});\n",[28,1451,1452,1457,1485,1493],{"__ignoreMap":58},[62,1453,1454],{"class":64,"line":65},[62,1455,1456],{"class":68},"\u002F\u002F Product catalogs, user lists, analytics data\n",[62,1458,1459,1461,1463,1465,1467,1470,1472,1474,1476,1478,1480,1483],{"class":64,"line":72},[62,1460,76],{"class":75},[62,1462,80],{"class":79},[62,1464,84],{"class":587},[62,1466,782],{"class":79},[62,1468,1469],{"class":83},"products",[62,1471,87],{"class":79},[62,1473,90],{"class":75},[62,1475,93],{"class":75},[62,1477,97],{"class":96},[62,1479,100],{"class":79},[62,1481,1482],{"class":103},"\"\u002Fapi\u002Fproducts\"",[62,1484,169],{"class":79},[62,1486,1487,1489,1491],{"class":64,"line":172},[62,1488,175],{"class":79},[62,1490,178],{"class":83},[62,1492,181],{"class":79},[62,1494,1495],{"class":64,"line":184},[62,1496,187],{"class":79},[1383,1498,1499],{"start":172},[115,1500,1501],{},[1388,1502,1503],{},"Configuration Data",[53,1505,1507],{"className":55,"code":1506,"language":57,"meta":58,"style":58},"\u002F\u002F Site settings, menu items, static configurations\nconst { data: siteConfig } = await useFetch(\"\u002Fapi\u002Fconfig\", {\n  deep: false,\n});\n",[28,1508,1509,1514,1542,1550],{"__ignoreMap":58},[62,1510,1511],{"class":64,"line":65},[62,1512,1513],{"class":68},"\u002F\u002F Site settings, menu items, static configurations\n",[62,1515,1516,1518,1520,1522,1524,1527,1529,1531,1533,1535,1537,1540],{"class":64,"line":72},[62,1517,76],{"class":75},[62,1519,80],{"class":79},[62,1521,84],{"class":587},[62,1523,782],{"class":79},[62,1525,1526],{"class":83},"siteConfig",[62,1528,87],{"class":79},[62,1530,90],{"class":75},[62,1532,93],{"class":75},[62,1534,97],{"class":96},[62,1536,100],{"class":79},[62,1538,1539],{"class":103},"\"\u002Fapi\u002Fconfig\"",[62,1541,169],{"class":79},[62,1543,1544,1546,1548],{"class":64,"line":172},[62,1545,175],{"class":79},[62,1547,178],{"class":83},[62,1549,181],{"class":79},[62,1551,1552],{"class":64,"line":184},[62,1553,187],{"class":79},[1383,1555,1556],{"start":184},[115,1557,1558],{},[1388,1559,1560],{},"API Responses with Complex Nested Structures",[53,1562,1564],{"className":55,"code":1563,"language":57,"meta":58,"style":58},"\u002F\u002F Complex API responses that won't be modified\nconst { data: complexData } = await useFetch(\"\u002Fapi\u002Fcomplex-data\", {\n  deep: false,\n});\n",[28,1565,1566,1571,1599,1607],{"__ignoreMap":58},[62,1567,1568],{"class":64,"line":65},[62,1569,1570],{"class":68},"\u002F\u002F Complex API responses that won't be modified\n",[62,1572,1573,1575,1577,1579,1581,1584,1586,1588,1590,1592,1594,1597],{"class":64,"line":72},[62,1574,76],{"class":75},[62,1576,80],{"class":79},[62,1578,84],{"class":587},[62,1580,782],{"class":79},[62,1582,1583],{"class":83},"complexData",[62,1585,87],{"class":79},[62,1587,90],{"class":75},[62,1589,93],{"class":75},[62,1591,97],{"class":96},[62,1593,100],{"class":79},[62,1595,1596],{"class":103},"\"\u002Fapi\u002Fcomplex-data\"",[62,1598,169],{"class":79},[62,1600,1601,1603,1605],{"class":64,"line":172},[62,1602,175],{"class":79},[62,1604,178],{"class":83},[62,1606,181],{"class":79},[62,1608,1609],{"class":64,"line":184},[62,1610,187],{"class":79},[45,1612,1614],{"id":1613},"when-not-to-use-shallowref","❌ When NOT to Use shallowRef",[1383,1616,1617],{},[115,1618,1619],{},[1388,1620,1621],{},"Interactive Forms",[53,1623,1625],{"className":55,"code":1624,"language":57,"meta":58,"style":58},"\u002F\u002F DON'T use shallow reactivity for forms\nconst { data: formData } = await useFetch(\"\u002Fapi\u002Fuser-profile\", {\n  deep: true, \u002F\u002F Keep default - you'll modify nested properties\n});\n",[28,1626,1627,1632,1660,1671],{"__ignoreMap":58},[62,1628,1629],{"class":64,"line":65},[62,1630,1631],{"class":68},"\u002F\u002F DON'T use shallow reactivity for forms\n",[62,1633,1634,1636,1638,1640,1642,1645,1647,1649,1651,1653,1655,1658],{"class":64,"line":72},[62,1635,76],{"class":75},[62,1637,80],{"class":79},[62,1639,84],{"class":587},[62,1641,782],{"class":79},[62,1643,1644],{"class":83},"formData",[62,1646,87],{"class":79},[62,1648,90],{"class":75},[62,1650,93],{"class":75},[62,1652,97],{"class":96},[62,1654,100],{"class":79},[62,1656,1657],{"class":103},"\"\u002Fapi\u002Fuser-profile\"",[62,1659,169],{"class":79},[62,1661,1662,1664,1666,1668],{"class":64,"line":172},[62,1663,175],{"class":79},[62,1665,1258],{"class":83},[62,1667,233],{"class":79},[62,1669,1670],{"class":68},"\u002F\u002F Keep default - you'll modify nested properties\n",[62,1672,1673],{"class":64,"line":184},[62,1674,187],{"class":79},[1383,1676,1677],{"start":72},[115,1678,1679],{},[1388,1680,1681],{},"Real-time Data with Nested Updates",[53,1683,1685],{"className":55,"code":1684,"language":57,"meta":58,"style":58},"\u002F\u002F DON'T use for data that changes frequently at nested levels\nconst { data: liveData } = await useFetch(\"\u002Fapi\u002Flive-updates\", {\n  deep: true, \u002F\u002F Keep default for reactive updates\n});\n",[28,1686,1687,1692,1720,1731],{"__ignoreMap":58},[62,1688,1689],{"class":64,"line":65},[62,1690,1691],{"class":68},"\u002F\u002F DON'T use for data that changes frequently at nested levels\n",[62,1693,1694,1696,1698,1700,1702,1705,1707,1709,1711,1713,1715,1718],{"class":64,"line":72},[62,1695,76],{"class":75},[62,1697,80],{"class":79},[62,1699,84],{"class":587},[62,1701,782],{"class":79},[62,1703,1704],{"class":83},"liveData",[62,1706,87],{"class":79},[62,1708,90],{"class":75},[62,1710,93],{"class":75},[62,1712,97],{"class":96},[62,1714,100],{"class":79},[62,1716,1717],{"class":103},"\"\u002Fapi\u002Flive-updates\"",[62,1719,169],{"class":79},[62,1721,1722,1724,1726,1728],{"class":64,"line":172},[62,1723,175],{"class":79},[62,1725,1258],{"class":83},[62,1727,233],{"class":79},[62,1729,1730],{"class":68},"\u002F\u002F Keep default for reactive updates\n",[62,1732,1733],{"class":64,"line":184},[62,1734,187],{"class":79},[1383,1736,1737],{"start":172},[115,1738,1739],{},[1388,1740,1741],{},"Shopping Carts or Interactive Lists",[53,1743,1745],{"className":55,"code":1744,"language":57,"meta":58,"style":58},"\u002F\u002F DON'T use when you need to modify items in arrays\nconst { data: cartItems } = await useFetch(\"\u002Fapi\u002Fcart\", {\n  deep: true, \u002F\u002F Need to update quantities, add\u002Fremove items\n});\n",[28,1746,1747,1752,1780,1791],{"__ignoreMap":58},[62,1748,1749],{"class":64,"line":65},[62,1750,1751],{"class":68},"\u002F\u002F DON'T use when you need to modify items in arrays\n",[62,1753,1754,1756,1758,1760,1762,1765,1767,1769,1771,1773,1775,1778],{"class":64,"line":72},[62,1755,76],{"class":75},[62,1757,80],{"class":79},[62,1759,84],{"class":587},[62,1761,782],{"class":79},[62,1763,1764],{"class":83},"cartItems",[62,1766,87],{"class":79},[62,1768,90],{"class":75},[62,1770,93],{"class":75},[62,1772,97],{"class":96},[62,1774,100],{"class":79},[62,1776,1777],{"class":103},"\"\u002Fapi\u002Fcart\"",[62,1779,169],{"class":79},[62,1781,1782,1784,1786,1788],{"class":64,"line":172},[62,1783,175],{"class":79},[62,1785,1258],{"class":83},[62,1787,233],{"class":79},[62,1789,1790],{"class":68},"\u002F\u002F Need to update quantities, add\u002Fremove items\n",[62,1792,1793],{"class":64,"line":184},[62,1794,187],{"class":79},[19,1796,1798],{"id":1797},"best-practices-and-tips","Best Practices and Tips",[45,1800,1802],{"id":1801},"_1-combine-with-transform-for-optimization","1. Combine with Transform for Optimization",[53,1804,1806],{"className":55,"code":1805,"language":57,"meta":58,"style":58},"const { data } = await useFetch(\"\u002Fapi\u002Farticles\", {\n  deep: false,\n  transform: (data) => {\n    \u002F\u002F Pre-process data to reduce template complexity\n    return data.map((article) => ({\n      ...article,\n      formattedDate: new Date(article.date).toLocaleDateString(),\n      readingTime: Math.ceil(article.content.split(\" \").length \u002F 200),\n    }));\n  },\n});\n",[28,1807,1808,1830,1838,1852,1857,1877,1885,1903,1936,1941,1946],{"__ignoreMap":58},[62,1809,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828],{"class":64,"line":65},[62,1811,76],{"class":75},[62,1813,80],{"class":79},[62,1815,84],{"class":83},[62,1817,87],{"class":79},[62,1819,90],{"class":75},[62,1821,93],{"class":75},[62,1823,97],{"class":96},[62,1825,100],{"class":79},[62,1827,254],{"class":103},[62,1829,169],{"class":79},[62,1831,1832,1834,1836],{"class":64,"line":72},[62,1833,175],{"class":79},[62,1835,178],{"class":83},[62,1837,181],{"class":79},[62,1839,1840,1842,1844,1846,1848,1850],{"class":64,"line":172},[62,1841,581],{"class":96},[62,1843,584],{"class":79},[62,1845,84],{"class":587},[62,1847,590],{"class":79},[62,1849,593],{"class":75},[62,1851,693],{"class":79},[62,1853,1854],{"class":64,"line":184},[62,1855,1856],{"class":68},"    \u002F\u002F Pre-process data to reduce template complexity\n",[62,1858,1859,1862,1865,1867,1869,1871,1873,1875],{"class":64,"line":347},[62,1860,1861],{"class":75},"    return",[62,1863,1864],{"class":79}," data.",[62,1866,605],{"class":96},[62,1868,608],{"class":79},[62,1870,365],{"class":587},[62,1872,590],{"class":79},[62,1874,593],{"class":75},[62,1876,596],{"class":79},[62,1878,1879,1882],{"class":64,"line":359},[62,1880,1881],{"class":75},"      ...",[62,1883,1884],{"class":79},"article,\n",[62,1886,1887,1890,1893,1895,1898,1900],{"class":64,"line":386},[62,1888,1889],{"class":79},"      formattedDate: ",[62,1891,1892],{"class":75},"new",[62,1894,705],{"class":96},[62,1896,1897],{"class":79},"(article.date).",[62,1899,711],{"class":96},[62,1901,1902],{"class":79},"(),\n",[62,1904,1905,1908,1911,1914,1917,1919,1922,1925,1928,1931,1934],{"class":64,"line":401},[62,1906,1907],{"class":79},"      readingTime: Math.",[62,1909,1910],{"class":96},"ceil",[62,1912,1913],{"class":79},"(article.content.",[62,1915,1916],{"class":96},"split",[62,1918,100],{"class":79},[62,1920,1921],{"class":103},"\" \"",[62,1923,1924],{"class":79},").",[62,1926,1927],{"class":83},"length",[62,1929,1930],{"class":75}," \u002F",[62,1932,1933],{"class":83}," 200",[62,1935,902],{"class":79},[62,1937,1938],{"class":64,"line":415},[62,1939,1940],{"class":79},"    }));\n",[62,1942,1943],{"class":64,"line":432},[62,1944,1945],{"class":79},"  },\n",[62,1947,1948],{"class":64,"line":447},[62,1949,187],{"class":79},[45,1951,1953],{"id":1952},"_2-use-with-proper-caching","2. Use with Proper Caching",[53,1955,1957],{"className":55,"code":1956,"language":57,"meta":58,"style":58},"const { data } = await useFetch(\"\u002Fapi\u002Fstatic-content\", {\n  deep: false,\n  key: \"static-content\",\n  server: true, \u002F\u002F Cache on server\n  lazy: true, \u002F\u002F Load after hydration\n  getCachedData(key) {\n    return nuxtApp.ssrContext?.cache?.[key] ?? nuxtApp.payload.data[key];\n  },\n});\n",[28,1958,1959,1982,1990,1999,2011,2023,2036,2049,2053],{"__ignoreMap":58},[62,1960,1961,1963,1965,1967,1969,1971,1973,1975,1977,1980],{"class":64,"line":65},[62,1962,76],{"class":75},[62,1964,80],{"class":79},[62,1966,84],{"class":83},[62,1968,87],{"class":79},[62,1970,90],{"class":75},[62,1972,93],{"class":75},[62,1974,97],{"class":96},[62,1976,100],{"class":79},[62,1978,1979],{"class":103},"\"\u002Fapi\u002Fstatic-content\"",[62,1981,169],{"class":79},[62,1983,1984,1986,1988],{"class":64,"line":72},[62,1985,175],{"class":79},[62,1987,178],{"class":83},[62,1989,181],{"class":79},[62,1991,1992,1994,1997],{"class":64,"line":172},[62,1993,829],{"class":79},[62,1995,1996],{"class":103},"\"static-content\"",[62,1998,181],{"class":79},[62,2000,2001,2004,2006,2008],{"class":64,"line":184},[62,2002,2003],{"class":79},"  server: ",[62,2005,1258],{"class":83},[62,2007,233],{"class":79},[62,2009,2010],{"class":68},"\u002F\u002F Cache on server\n",[62,2012,2013,2016,2018,2020],{"class":64,"line":347},[62,2014,2015],{"class":79},"  lazy: ",[62,2017,1258],{"class":83},[62,2019,233],{"class":79},[62,2021,2022],{"class":68},"\u002F\u002F Load after hydration\n",[62,2024,2025,2028,2030,2033],{"class":64,"line":359},[62,2026,2027],{"class":96},"  getCachedData",[62,2029,100],{"class":79},[62,2031,2032],{"class":587},"key",[62,2034,2035],{"class":79},") {\n",[62,2037,2038,2040,2043,2046],{"class":64,"line":386},[62,2039,1861],{"class":75},[62,2041,2042],{"class":79}," nuxtApp.ssrContext?.cache?.[key] ",[62,2044,2045],{"class":75},"??",[62,2047,2048],{"class":79}," nuxtApp.payload.data[key];\n",[62,2050,2051],{"class":64,"line":401},[62,2052,1945],{"class":79},[62,2054,2055],{"class":64,"line":415},[62,2056,187],{"class":79},[45,2058,2060],{"id":2059},"_3-handle-data-updates-correctly","3. Handle Data Updates Correctly",[53,2062,2064],{"className":55,"code":2063,"language":57,"meta":58,"style":58},"const { data, refresh } = await useFetch(\"\u002Fapi\u002Fcontent\", {\n  deep: false,\n});\n\n\u002F\u002F When you need to update the data, replace the entire reference\nconst updateContent = async () => {\n  \u002F\u002F This will trigger reactivity\n  await refresh();\n\n  \u002F\u002F Or manually update (replaces entire data object)\n  data.value = await $fetch(\"\u002Fapi\u002Fupdated-content\");\n};\n",[28,2065,2066,2094,2102,2106,2110,2115,2134,2139,2149,2153,2158,2177],{"__ignoreMap":58},[62,2067,2068,2070,2072,2074,2076,2079,2081,2083,2085,2087,2089,2092],{"class":64,"line":65},[62,2069,76],{"class":75},[62,2071,80],{"class":79},[62,2073,84],{"class":83},[62,2075,233],{"class":79},[62,2077,2078],{"class":83},"refresh",[62,2080,87],{"class":79},[62,2082,90],{"class":75},[62,2084,93],{"class":75},[62,2086,97],{"class":96},[62,2088,100],{"class":79},[62,2090,2091],{"class":103},"\"\u002Fapi\u002Fcontent\"",[62,2093,169],{"class":79},[62,2095,2096,2098,2100],{"class":64,"line":72},[62,2097,175],{"class":79},[62,2099,178],{"class":83},[62,2101,181],{"class":79},[62,2103,2104],{"class":64,"line":172},[62,2105,187],{"class":79},[62,2107,2108],{"class":64,"line":184},[62,2109,515],{"emptyLinePlaceholder":514},[62,2111,2112],{"class":64,"line":347},[62,2113,2114],{"class":68},"\u002F\u002F When you need to update the data, replace the entire reference\n",[62,2116,2117,2119,2122,2124,2127,2130,2132],{"class":64,"line":359},[62,2118,76],{"class":75},[62,2120,2121],{"class":96}," updateContent",[62,2123,680],{"class":75},[62,2125,2126],{"class":75}," async",[62,2128,2129],{"class":79}," () ",[62,2131,593],{"class":75},[62,2133,693],{"class":79},[62,2135,2136],{"class":64,"line":386},[62,2137,2138],{"class":68},"  \u002F\u002F This will trigger reactivity\n",[62,2140,2141,2144,2147],{"class":64,"line":401},[62,2142,2143],{"class":75},"  await",[62,2145,2146],{"class":96}," refresh",[62,2148,714],{"class":79},[62,2150,2151],{"class":64,"line":415},[62,2152,515],{"emptyLinePlaceholder":514},[62,2154,2155],{"class":64,"line":432},[62,2156,2157],{"class":68},"  \u002F\u002F Or manually update (replaces entire data object)\n",[62,2159,2160,2163,2165,2167,2170,2172,2175],{"class":64,"line":447},[62,2161,2162],{"class":79},"  data.value ",[62,2164,90],{"class":75},[62,2166,93],{"class":75},[62,2168,2169],{"class":96}," $fetch",[62,2171,100],{"class":79},[62,2173,2174],{"class":103},"\"\u002Fapi\u002Fupdated-content\"",[62,2176,107],{"class":79},[62,2178,2179],{"class":64,"line":461},[62,2180,720],{"class":79},[45,2182,2184],{"id":2183},"_4-monitor-performance-impact","4. Monitor Performance Impact",[53,2186,2188],{"className":55,"code":2187,"language":57,"meta":58,"style":58},"\u002F\u002F Add performance monitoring\nconst { data } = await useFetch(\"\u002Fapi\u002Fdata\", {\n  deep: false,\n  onResponse({ response }) {\n    console.log(\"Response time:\", response.headers.get(\"x-response-time\"));\n  },\n  onResponseError({ error }) {\n    console.error(\"Fetch error:\", error);\n  },\n});\n",[28,2189,2190,2195,2218,2226,2240,2267,2271,2282,2296,2300],{"__ignoreMap":58},[62,2191,2192],{"class":64,"line":65},[62,2193,2194],{"class":68},"\u002F\u002F Add performance monitoring\n",[62,2196,2197,2199,2201,2203,2205,2207,2209,2211,2213,2216],{"class":64,"line":72},[62,2198,76],{"class":75},[62,2200,80],{"class":79},[62,2202,84],{"class":83},[62,2204,87],{"class":79},[62,2206,90],{"class":75},[62,2208,93],{"class":75},[62,2210,97],{"class":96},[62,2212,100],{"class":79},[62,2214,2215],{"class":103},"\"\u002Fapi\u002Fdata\"",[62,2217,169],{"class":79},[62,2219,2220,2222,2224],{"class":64,"line":172},[62,2221,175],{"class":79},[62,2223,178],{"class":83},[62,2225,181],{"class":79},[62,2227,2228,2231,2234,2237],{"class":64,"line":184},[62,2229,2230],{"class":96},"  onResponse",[62,2232,2233],{"class":79},"({ ",[62,2235,2236],{"class":587},"response",[62,2238,2239],{"class":79}," }) {\n",[62,2241,2242,2245,2248,2250,2253,2256,2259,2261,2264],{"class":64,"line":347},[62,2243,2244],{"class":79},"    console.",[62,2246,2247],{"class":96},"log",[62,2249,100],{"class":79},[62,2251,2252],{"class":103},"\"Response time:\"",[62,2254,2255],{"class":79},", response.headers.",[62,2257,2258],{"class":96},"get",[62,2260,100],{"class":79},[62,2262,2263],{"class":103},"\"x-response-time\"",[62,2265,2266],{"class":79},"));\n",[62,2268,2269],{"class":64,"line":359},[62,2270,1945],{"class":79},[62,2272,2273,2276,2278,2280],{"class":64,"line":386},[62,2274,2275],{"class":96},"  onResponseError",[62,2277,2233],{"class":79},[62,2279,241],{"class":587},[62,2281,2239],{"class":79},[62,2283,2284,2286,2288,2290,2293],{"class":64,"line":401},[62,2285,2244],{"class":79},[62,2287,241],{"class":96},[62,2289,100],{"class":79},[62,2291,2292],{"class":103},"\"Fetch error:\"",[62,2294,2295],{"class":79},", error);\n",[62,2297,2298],{"class":64,"line":415},[62,2299,1945],{"class":79},[62,2301,2302],{"class":64,"line":432},[62,2303,187],{"class":79},[19,2305,2307],{"id":2306},"common-pitfalls-and-solutions","Common Pitfalls and Solutions",[45,2309,2311],{"id":2310},"pitfall-1-expecting-nested-reactivity","Pitfall 1: Expecting Nested Reactivity",[53,2313,2315],{"className":55,"code":2314,"language":57,"meta":58,"style":58},"\u002F\u002F ❌ This won't work with shallow reactivity\nconst { data } = await useFetch(\"\u002Fapi\u002Fposts\", { deep: false });\ndata.value.posts[0].title = \"New Title\"; \u002F\u002F Won't trigger updates\n\n\u002F\u002F ✅ Solution: Replace the entire data object\nconst updatePost = (index, newTitle) => {\n  const updatedPosts = [...data.value.posts];\n  updatedPosts[index] = { ...updatedPosts[index], title: newTitle };\n  data.value = { ...data.value, posts: updatedPosts };\n};\n",[28,2316,2317,2322,2351,2373,2377,2382,2407,2426,2440,2453],{"__ignoreMap":58},[62,2318,2319],{"class":64,"line":65},[62,2320,2321],{"class":68},"\u002F\u002F ❌ This won't work with shallow reactivity\n",[62,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340,2343,2346,2348],{"class":64,"line":72},[62,2325,76],{"class":75},[62,2327,80],{"class":79},[62,2329,84],{"class":83},[62,2331,87],{"class":79},[62,2333,90],{"class":75},[62,2335,93],{"class":75},[62,2337,97],{"class":96},[62,2339,100],{"class":79},[62,2341,2342],{"class":103},"\"\u002Fapi\u002Fposts\"",[62,2344,2345],{"class":79},", { deep: ",[62,2347,178],{"class":83},[62,2349,2350],{"class":79}," });\n",[62,2352,2353,2356,2359,2362,2364,2367,2370],{"class":64,"line":172},[62,2354,2355],{"class":79},"data.value.posts[",[62,2357,2358],{"class":83},"0",[62,2360,2361],{"class":79},"].title ",[62,2363,90],{"class":75},[62,2365,2366],{"class":103}," \"New Title\"",[62,2368,2369],{"class":79},"; ",[62,2371,2372],{"class":68},"\u002F\u002F Won't trigger updates\n",[62,2374,2375],{"class":64,"line":184},[62,2376,515],{"emptyLinePlaceholder":514},[62,2378,2379],{"class":64,"line":347},[62,2380,2381],{"class":68},"\u002F\u002F ✅ Solution: Replace the entire data object\n",[62,2383,2384,2386,2389,2391,2393,2396,2398,2401,2403,2405],{"class":64,"line":359},[62,2385,76],{"class":75},[62,2387,2388],{"class":96}," updatePost",[62,2390,680],{"class":75},[62,2392,683],{"class":79},[62,2394,2395],{"class":587},"index",[62,2397,233],{"class":79},[62,2399,2400],{"class":587},"newTitle",[62,2402,590],{"class":79},[62,2404,593],{"class":75},[62,2406,693],{"class":79},[62,2408,2409,2412,2415,2417,2420,2423],{"class":64,"line":386},[62,2410,2411],{"class":75},"  const",[62,2413,2414],{"class":83}," updatedPosts",[62,2416,680],{"class":75},[62,2418,2419],{"class":79}," [",[62,2421,2422],{"class":75},"...",[62,2424,2425],{"class":79},"data.value.posts];\n",[62,2427,2428,2431,2433,2435,2437],{"class":64,"line":401},[62,2429,2430],{"class":79},"  updatedPosts[index] ",[62,2432,90],{"class":75},[62,2434,80],{"class":79},[62,2436,2422],{"class":75},[62,2438,2439],{"class":79},"updatedPosts[index], title: newTitle };\n",[62,2441,2442,2444,2446,2448,2450],{"class":64,"line":415},[62,2443,2162],{"class":79},[62,2445,90],{"class":75},[62,2447,80],{"class":79},[62,2449,2422],{"class":75},[62,2451,2452],{"class":79},"data.value, posts: updatedPosts };\n",[62,2454,2455],{"class":64,"line":432},[62,2456,720],{"class":79},[45,2458,2460],{"id":2459},"pitfall-2-mixing-deep-and-shallow-patterns","Pitfall 2: Mixing Deep and Shallow Patterns",[53,2462,2464],{"className":55,"code":2463,"language":57,"meta":58,"style":58},"\u002F\u002F ❌ Inconsistent approach\nconst { data: posts } = await useFetch(\"\u002Fapi\u002Fposts\", { deep: false });\nconst { data: comments } = await useFetch(\"\u002Fapi\u002Fcomments\", { deep: true });\n\n\u002F\u002F ✅ Be consistent with your approach\nconst { data: posts } = await useFetch(\"\u002Fapi\u002Fposts\", { deep: false });\nconst { data: comments } = await useFetch(\"\u002Fapi\u002Fcomments\", { deep: false });\n",[28,2465,2466,2471,2501,2533,2537,2542,2572],{"__ignoreMap":58},[62,2467,2468],{"class":64,"line":65},[62,2469,2470],{"class":68},"\u002F\u002F ❌ Inconsistent approach\n",[62,2472,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499],{"class":64,"line":72},[62,2474,76],{"class":75},[62,2476,80],{"class":79},[62,2478,84],{"class":587},[62,2480,782],{"class":79},[62,2482,1413],{"class":83},[62,2484,87],{"class":79},[62,2486,90],{"class":75},[62,2488,93],{"class":75},[62,2490,97],{"class":96},[62,2492,100],{"class":79},[62,2494,2342],{"class":103},[62,2496,2345],{"class":79},[62,2498,178],{"class":83},[62,2500,2350],{"class":79},[62,2502,2503,2505,2507,2509,2511,2514,2516,2518,2520,2522,2524,2527,2529,2531],{"class":64,"line":172},[62,2504,76],{"class":75},[62,2506,80],{"class":79},[62,2508,84],{"class":587},[62,2510,782],{"class":79},[62,2512,2513],{"class":83},"comments",[62,2515,87],{"class":79},[62,2517,90],{"class":75},[62,2519,93],{"class":75},[62,2521,97],{"class":96},[62,2523,100],{"class":79},[62,2525,2526],{"class":103},"\"\u002Fapi\u002Fcomments\"",[62,2528,2345],{"class":79},[62,2530,1258],{"class":83},[62,2532,2350],{"class":79},[62,2534,2535],{"class":64,"line":184},[62,2536,515],{"emptyLinePlaceholder":514},[62,2538,2539],{"class":64,"line":347},[62,2540,2541],{"class":68},"\u002F\u002F ✅ Be consistent with your approach\n",[62,2543,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570],{"class":64,"line":359},[62,2545,76],{"class":75},[62,2547,80],{"class":79},[62,2549,84],{"class":587},[62,2551,782],{"class":79},[62,2553,1413],{"class":83},[62,2555,87],{"class":79},[62,2557,90],{"class":75},[62,2559,93],{"class":75},[62,2561,97],{"class":96},[62,2563,100],{"class":79},[62,2565,2342],{"class":103},[62,2567,2345],{"class":79},[62,2569,178],{"class":83},[62,2571,2350],{"class":79},[62,2573,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598,2600],{"class":64,"line":386},[62,2575,76],{"class":75},[62,2577,80],{"class":79},[62,2579,84],{"class":587},[62,2581,782],{"class":79},[62,2583,2513],{"class":83},[62,2585,87],{"class":79},[62,2587,90],{"class":75},[62,2589,93],{"class":75},[62,2591,97],{"class":96},[62,2593,100],{"class":79},[62,2595,2526],{"class":103},[62,2597,2345],{"class":79},[62,2599,178],{"class":83},[62,2601,2350],{"class":79},[19,2603,2605],{"id":2604},"performance-benchmarks","Performance Benchmarks",[24,2607,2608],{},"Based on real-world testing with different data sizes:",[2610,2611,2612,2631],"table",{},[2613,2614,2615],"thead",{},[2616,2617,2618,2622,2625,2628],"tr",{},[2619,2620,2621],"th",{},"Data Size",[2619,2623,2624],{},"Deep Reactivity",[2619,2626,2627],{},"Shallow Reactivity",[2619,2629,2630],{},"Performance Gain",[2632,2633,2634,2649,2663],"tbody",{},[2616,2635,2636,2640,2643,2646],{},[2637,2638,2639],"td",{},"100 items",[2637,2641,2642],{},"45ms",[2637,2644,2645],{},"12ms",[2637,2647,2648],{},"73% faster",[2616,2650,2651,2654,2657,2660],{},[2637,2652,2653],{},"1,000 items",[2637,2655,2656],{},"180ms",[2637,2658,2659],{},"28ms",[2637,2661,2662],{},"84% faster",[2616,2664,2665,2668,2671,2674],{},[2637,2666,2667],{},"10,000 items",[2637,2669,2670],{},"850ms",[2637,2672,2673],{},"95ms",[2637,2675,2676],{},"89% faster",[24,2678,2679],{},"Memory usage improvements:",[112,2681,2682,2685,2688],{},[115,2683,2684],{},"Small datasets (\u003C 100 items): 30-40% reduction",[115,2686,2687],{},"Medium datasets (100-1000 items): 50-60% reduction",[115,2689,2690],{},"Large datasets (> 1000 items): 70-80% reduction",[19,2692,2694],{"id":2693},"conclusion","Conclusion",[24,2696,2697,2698,2700,2701,2703],{},"Using ",[28,2699,34],{}," with Nuxt 3's ",[28,2702,30],{}," composable is a powerful optimization technique that can significantly improve your application's performance. It's particularly effective for:",[112,2705,2706,2709,2712,2715],{},[115,2707,2708],{},"Blog posts and articles",[115,2710,2711],{},"Product catalogs",[115,2713,2714],{},"Configuration data",[115,2716,2717],{},"Any large dataset that's primarily read-only",[2719,2720,2721],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":58,"searchDepth":72,"depth":72,"links":2723},[2724,2725,2729,2734,2739,2743,2749,2753,2754],{"id":21,"depth":72,"text":22},{"id":42,"depth":72,"text":43,"children":2726},[2727,2728],{"id":47,"depth":172,"text":48},{"id":129,"depth":172,"text":130},{"id":207,"depth":72,"text":208,"children":2730},[2731,2732,2733],{"id":211,"depth":172,"text":212},{"id":271,"depth":172,"text":272},{"id":732,"depth":172,"text":733},{"id":967,"depth":72,"text":968,"children":2735},[2736,2737,2738],{"id":971,"depth":172,"text":972},{"id":1197,"depth":172,"text":1198},{"id":1358,"depth":172,"text":1359},{"id":1376,"depth":72,"text":1377,"children":2740},[2741,2742],{"id":1380,"depth":172,"text":1381},{"id":1613,"depth":172,"text":1614},{"id":1797,"depth":72,"text":1798,"children":2744},[2745,2746,2747,2748],{"id":1801,"depth":172,"text":1802},{"id":1952,"depth":172,"text":1953},{"id":2059,"depth":172,"text":2060},{"id":2183,"depth":172,"text":2184},{"id":2306,"depth":72,"text":2307,"children":2750},[2751,2752],{"id":2310,"depth":172,"text":2311},{"id":2459,"depth":172,"text":2460},{"id":2604,"depth":72,"text":2605},{"id":2693,"depth":72,"text":2694},[277,2756],"nuxt",null,"2025-06-15","Learn how to optimize your Nuxt 3 applications by using shallowRef with useFetch. Discover the performance benefits and when to use deep: false for better reactivity management.","md",{},"\u002Fblog\u002Fusing-shallowref-nuxt-usefetch",{"title":5,"description":2759},"blog\u002F16.using-shallowref-nuxt-usefetch","7N9Zqk77Ji8MhZlk1sXB5UdK4nvbJbTtZ9iIh6X-f4M",[2767],{"id":656,"name":2762,"count":2768},2706,{"left":2770,"top":2770,"width":620,"height":620,"rotate":2770,"vFlip":2771,"hFlip":2771,"body":2772},0,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":2770,"top":2770,"width":620,"height":620,"rotate":2770,"vFlip":2771,"hFlip":2771,"body":2774},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":2770,"top":2770,"width":620,"height":620,"rotate":2770,"vFlip":2771,"hFlip":2771,"body":2776},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]