[{"data":1,"prerenderedAt":528},["ShallowReactive",2],{"\u002Fblog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase":3},{"id":4,"title":5,"body":6,"date":504,"description":505,"extension":506,"headerImage":507,"isActive":508,"keywords":509,"meta":518,"navigation":508,"path":519,"seo":520,"stem":521,"subject":522,"summary":524,"tags":525,"__hash__":527},"blog\u002Fblog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase.md","Caché eficiente de ficheros con Nuxt y Firebase",{"type":7,"value":8,"toc":499},"minimark",[9,14,18,21,24,28,40,47,221,241,254,479,485,489,492,495],[10,11,13],"h2",{"id":12},"el-problema","El problema",[15,16,17],"p",{},"Si has estado revisando la performance de tu sitio web y has encontrado problemas que te indican que no estás utilizando una caché eficiente de tus ficheros, tal vez te has preguntado como puedes solucionarlo.",[15,19,20],{},"Cuando alguien entra a tu web se realizan muchas peticiones de ficheros desde el navegador al servidor donde está alojada. Si estas peticiones tardan mucho en responder, la página tardará más en cargar y por lo tanto en estar disponible para el usuario final, y ¡El tiempo es muy importante!",[15,22,23],{},"Si ciertos ficheros que no vamos a cambiar (o no tenemos previsión de hacerlo a corto plazo) están almacenados en caché, las peticiones del navegador hacia éstos serán mucho más rápidas y el tiempo de respuesta de la web mejorará considerablemente.",[10,25,27],{"id":26},"la-solución","La solución",[15,29,30,31,35,36,39],{},"Una vez que tenemos nuestra aplicación de ",[32,33,34],"strong",{},"Nuxt"," generada correctamente y el hosting configurado en ",[32,37,38],{},"Firebase",", podemos también configurar cómo se va a realizar la caché de nuestros ficheros.",[15,41,42,43,46],{},"Para ello debemos localizar el fichero ",[32,44,45],{},"firebase.json"," en el directorio raíz de nuestro proyecto y lo editamos de la siguiente forma:",[48,49,54],"pre",{"className":50,"code":51,"filename":45,"language":52,"meta":53,"style":53},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"hosting\": {\n    \"headers\": [ {\n      \"source\": \"**\u002F*.@(jpg|jpeg|gif|png|webp)\",\n      \"headers\": [ {\n        \"key\": \"Cache-Control\",\n        \"value\": \"max-age=2592000\"\n      } ]\n    }\n    ]\n  }\n}\n","json","",[55,56,57,66,85,104,130,145,168,188,197,203,209,215],"code",{"__ignoreMap":53},[58,59,62],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sMK4o","{\n",[58,67,69,72,76,79,82],{"class":60,"line":68},2,[58,70,71],{"class":64},"  \"",[58,73,75],{"class":74},"spNyl","hosting",[58,77,78],{"class":64},"\"",[58,80,81],{"class":64},":",[58,83,84],{"class":64}," {\n",[58,86,88,91,95,97,99,102],{"class":60,"line":87},3,[58,89,90],{"class":64},"    \"",[58,92,94],{"class":93},"sBMFI","headers",[58,96,78],{"class":64},[58,98,81],{"class":64},[58,100,101],{"class":64}," [",[58,103,84],{"class":64},[58,105,107,110,114,116,118,121,125,127],{"class":60,"line":106},4,[58,108,109],{"class":64},"      \"",[58,111,113],{"class":112},"sbssI","source",[58,115,78],{"class":64},[58,117,81],{"class":64},[58,119,120],{"class":64}," \"",[58,122,124],{"class":123},"sfazB","**\u002F*.@(jpg|jpeg|gif|png|webp)",[58,126,78],{"class":64},[58,128,129],{"class":64},",\n",[58,131,133,135,137,139,141,143],{"class":60,"line":132},5,[58,134,109],{"class":64},[58,136,94],{"class":112},[58,138,78],{"class":64},[58,140,81],{"class":64},[58,142,101],{"class":64},[58,144,84],{"class":64},[58,146,148,151,155,157,159,161,164,166],{"class":60,"line":147},6,[58,149,150],{"class":64},"        \"",[58,152,154],{"class":153},"swJcz","key",[58,156,78],{"class":64},[58,158,81],{"class":64},[58,160,120],{"class":64},[58,162,163],{"class":123},"Cache-Control",[58,165,78],{"class":64},[58,167,129],{"class":64},[58,169,171,173,176,178,180,182,185],{"class":60,"line":170},7,[58,172,150],{"class":64},[58,174,175],{"class":153},"value",[58,177,78],{"class":64},[58,179,81],{"class":64},[58,181,120],{"class":64},[58,183,184],{"class":123},"max-age=2592000",[58,186,187],{"class":64},"\"\n",[58,189,191,194],{"class":60,"line":190},8,[58,192,193],{"class":64},"      }",[58,195,196],{"class":64}," ]\n",[58,198,200],{"class":60,"line":199},9,[58,201,202],{"class":64},"    }\n",[58,204,206],{"class":60,"line":205},10,[58,207,208],{"class":64},"    ]\n",[58,210,212],{"class":60,"line":211},11,[58,213,214],{"class":64},"  }\n",[58,216,218],{"class":60,"line":217},12,[58,219,220],{"class":64},"}\n",[15,222,223,224,227,228,227,231,227,234,227,237,240],{},"De esta forma estamos diciendo que todos los ficheros con alguno de estos formatos: ",[32,225,226],{},"jpg",", ",[32,229,230],{},"jpeg",[32,232,233],{},"gif",[32,235,236],{},"png",[32,238,239],{},"webp",", estarán cacheados por un tiempo de 30 días (2.592.000 segundos).",[15,242,243,244,227,247,227,250,253],{},"También podemos cachear otro tipo de ficheros como ",[32,245,246],{},"css",[32,248,249],{},"js",[32,251,252],{},"html"," o cualquier otro formato que necesitemos, además de definir distintos bloques de caché según el tipo de fichero o incluso su nombre.",[48,255,257],{"className":50,"code":256,"filename":45,"language":52,"meta":53,"style":53},"{\n  \"hosting\": {\n    \"headers\": [ \n      {\n        \"source\": \"**\u002F*.@(jpg|jpeg|gif|png|webp)\",\n        \"headers\": [ {\n          \"key\": \"Cache-Control\",\n          \"value\": \"max-age=5184000\"\n        } ]\n      },\n      {\n        \"source\": \"**\u002F*.@(json)\",\n        \"headers\": [ {\n          \"key\": \"Cache-Control\",\n          \"value\": \"max-age=2592000\"\n        } ]\n      }\n   ]\n  }\n}\n",[55,258,259,263,275,291,296,314,328,347,364,371,376,380,399,414,433,450,457,463,469,474],{"__ignoreMap":53},[58,260,261],{"class":60,"line":61},[58,262,65],{"class":64},[58,264,265,267,269,271,273],{"class":60,"line":68},[58,266,71],{"class":64},[58,268,75],{"class":74},[58,270,78],{"class":64},[58,272,81],{"class":64},[58,274,84],{"class":64},[58,276,277,279,281,283,285,287],{"class":60,"line":87},[58,278,90],{"class":64},[58,280,94],{"class":93},[58,282,78],{"class":64},[58,284,81],{"class":64},[58,286,101],{"class":64},[58,288,290],{"class":289},"sTEyZ"," \n",[58,292,293],{"class":60,"line":106},[58,294,295],{"class":64},"      {\n",[58,297,298,300,302,304,306,308,310,312],{"class":60,"line":132},[58,299,150],{"class":64},[58,301,113],{"class":112},[58,303,78],{"class":64},[58,305,81],{"class":64},[58,307,120],{"class":64},[58,309,124],{"class":123},[58,311,78],{"class":64},[58,313,129],{"class":64},[58,315,316,318,320,322,324,326],{"class":60,"line":147},[58,317,150],{"class":64},[58,319,94],{"class":112},[58,321,78],{"class":64},[58,323,81],{"class":64},[58,325,101],{"class":64},[58,327,84],{"class":64},[58,329,330,333,335,337,339,341,343,345],{"class":60,"line":170},[58,331,332],{"class":64},"          \"",[58,334,154],{"class":153},[58,336,78],{"class":64},[58,338,81],{"class":64},[58,340,120],{"class":64},[58,342,163],{"class":123},[58,344,78],{"class":64},[58,346,129],{"class":64},[58,348,349,351,353,355,357,359,362],{"class":60,"line":190},[58,350,332],{"class":64},[58,352,175],{"class":153},[58,354,78],{"class":64},[58,356,81],{"class":64},[58,358,120],{"class":64},[58,360,361],{"class":123},"max-age=5184000",[58,363,187],{"class":64},[58,365,366,369],{"class":60,"line":199},[58,367,368],{"class":64},"        }",[58,370,196],{"class":64},[58,372,373],{"class":60,"line":205},[58,374,375],{"class":64},"      },\n",[58,377,378],{"class":60,"line":211},[58,379,295],{"class":64},[58,381,382,384,386,388,390,392,395,397],{"class":60,"line":217},[58,383,150],{"class":64},[58,385,113],{"class":112},[58,387,78],{"class":64},[58,389,81],{"class":64},[58,391,120],{"class":64},[58,393,394],{"class":123},"**\u002F*.@(json)",[58,396,78],{"class":64},[58,398,129],{"class":64},[58,400,402,404,406,408,410,412],{"class":60,"line":401},13,[58,403,150],{"class":64},[58,405,94],{"class":112},[58,407,78],{"class":64},[58,409,81],{"class":64},[58,411,101],{"class":64},[58,413,84],{"class":64},[58,415,417,419,421,423,425,427,429,431],{"class":60,"line":416},14,[58,418,332],{"class":64},[58,420,154],{"class":153},[58,422,78],{"class":64},[58,424,81],{"class":64},[58,426,120],{"class":64},[58,428,163],{"class":123},[58,430,78],{"class":64},[58,432,129],{"class":64},[58,434,436,438,440,442,444,446,448],{"class":60,"line":435},15,[58,437,332],{"class":64},[58,439,175],{"class":153},[58,441,78],{"class":64},[58,443,81],{"class":64},[58,445,120],{"class":64},[58,447,184],{"class":123},[58,449,187],{"class":64},[58,451,453,455],{"class":60,"line":452},16,[58,454,368],{"class":64},[58,456,196],{"class":64},[58,458,460],{"class":60,"line":459},17,[58,461,462],{"class":64},"      }\n",[58,464,466],{"class":60,"line":465},18,[58,467,468],{"class":64},"   ]\n",[58,470,472],{"class":60,"line":471},19,[58,473,214],{"class":64},[58,475,477],{"class":60,"line":476},20,[58,478,220],{"class":64},[15,480,481,482,484],{},"Con este ejemplo definimos los ficheros de imágenes con una caché de 60 días (5.184.000 segundos) y los ficheros de tipo ",[32,483,52],{}," con una caché de 30 días.",[10,486,488],{"id":487},"cuánto-tiempo-debo-cachear-mis-ficheros","¿Cuánto tiempo debo cachear mis ficheros?",[15,490,491],{},"Siempre va a depender el uso que tu web haga de los mismos y la frecuencia con que vas a modificarlos. Por ejemplo, si tienes un logo en tu web y no tienes previsión de cambiarlo puedes definir un tiempo de caché a partir de 1 año o incluso más, pero si tienes una imagen de portada que va a cambiar cada día no va a servir de nada que definas una caché de 1 mes.",[15,493,494],{},"Debes estudiar cada fichero o grupos de ficheros que generes en tu web y decidir el tiempo de caché que debería tener en base a las modificaciones que pueda sufrir.",[496,497,498],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":53,"searchDepth":68,"depth":87,"links":500},[501,502,503],{"id":12,"depth":68,"text":13},{"id":26,"depth":68,"text":27},{"id":487,"depth":68,"text":488},"2021-08-13","Aprende a generar tus ficheros con un tiempo de caché eficiente con Nuxt y Firebase hosting.","md","blog\u002Fclock",true,[510,511,512,513,514,515,516,517],"thebyteland nuxt firebase","thebyteland nuxt","nuxt firebase cache","nuxt cache files","nuxt cache ficheros","nuxt cache","nuxt firebase","nuxt",{},"\u002Fblog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase",{"title":5,"description":505},"blog\u002Fcache-eficiente-de-ficheros-con-nuxt-y-firebase",[523,34],"VueJS","Aprende a generar tus ficheros estáticos con un tiempo de caché eficiente y así mejorar el rendimiento de tu web.",[526],"Programación","gwRPT1SXzFs586C9WadAjlzAR5ESIggEUhI3Jb5DbBk",1786401734962]