[{"data":1,"prerenderedAt":2581},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fes\u002Ftech\u002Fserver-components-vs-client-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fen\u002Ftech\u002Fserver-components-vs-client-2026-drawing-the-right-line","\u002Fes\u002Ftech\u002Fserver-components-vs-client-2026","\u002Ffr\u002Ftech\u002Fcomponents-client-vs-serveur-2026","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026-dogrumu-cizgi-cizmek","\u002Ftr\u002Ftech\u002Fserver-components-vs-client-2026da-dogru-cizgiyi-cizmek",{"_path":8,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":2575,"_id":2576,"_source":2577,"_file":2578,"_stem":2579,"_extension":2580},"tech",false,"","Server Components vs Client: Encontrar la línea correcta en 2026","Optimizar el costo de hidratación con React Server Components y Vue 3.5. Impacto de las decisiones arquitectónicas en el tamaño del bundle, TBT y FCP.","2026-05-24",[21,22,23,24,25],"react-server-components","vue-hydration","web-performance","headless-architecture","frontend-optimization",8,"Roibase",{"type":29,"children":30,"toc":2563},"root",[31,39,46,51,65,70,863,868,874,895,916,1067,1096,1112,1118,1123,1252,1257,1262,1268,1273,1278,1431,1436,1441,1641,1646,1652,1657,1713,1734,2093,2113,2119,2124,2129,2152,2157,2324,2329,2335,2503,2508,2514,2519,2524,2552,2557],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","En 2024, React Server Components se volvió mainstream. Después del lanzamiento de Vue 3.5 en 2025, patrones similares se generalizaron en el ecosistema Nuxt. Ahora, a mediados de 2026, mientras las arquitecturas de proyectos establecidas quedan atrás, los nuevos proyectos deben responder la pregunta: \"¿qué componentes se renderizan en el servidor y cuáles en el cliente?\" Esta decisión impacta directamente el tamaño del bundle, Time to Interactive (TTI) y First Contentful Paint (FCP). Es especialmente crítico en proyectos de comercio headless: el flujo de checkout debe ser interactivo, pero la lista de productos podría no justificar el costo de hidratación.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"de-dónde-viene-el-costo-de-runtime-de-los-server-components",[44],{"type":37,"value":45},"De dónde viene el costo de runtime de los Server Components",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Renderizar en el servidor no siempre significa más eficiencia. Cuando el HTML renderizado en el servidor llega al cliente, si contiene partes interactivas, comienza el proceso de hidratación. Durante este proceso, React o Vue vinculan los event listeners al DOM sin reconstruirlo. El problema: hidratando un árbol de componentes grande, JavaScript bloquea el hilo principal.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,63],{"type":37,"value":55},"Según el Chrome User Experience Report Q1 2026, el valor mediano de TBT (Total Blocking Time) en sitios de comercio electrónico es 320ms. La contribución de la hidratación a este tiempo es entre 180-240ms en promedio. Es decir, el 60-75% del TBT proviene de la hidratación. Con Nuxt 3.12+ y Next.js 15+ con hidratación selectiva activa, si aplicas ",{"type":32,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":37,"value":62},"client:load",{"type":37,"value":64}," a cada componente, vuelves al mismo problema.",{"type":32,"tag":33,"props":66,"children":67},{},[68],{"type":37,"value":69},"Escenario de ejemplo: una página de categoría con 120 productos. Cada tarjeta de producto contiene una imagen lazy-loaded, información de precio y un botón \"Agregar al carrito\". Si todas las tarjetas son componentes cliente, el bundle inicial es 340KB (gzipped). El tiempo de hidratación promedia 420ms (iPhone 13, 4G). Pero el 80% de la tarjeta es estática — solo el botón es interactivo. Convertirlo a Server Component e indicar solo el botón con una directiva cliente reduce el bundle a 95KB y la hidratación a 120ms.",{"type":32,"tag":71,"props":72,"children":76},"pre",{"className":73,"code":74,"language":75,"meta":16,"style":16},"language-jsx shiki shiki-themes github-dark","\u002F\u002F ❌ Tarjeta completa en cliente\n'use client'\nexport default function ProductCard({ product }) {\n  const [inCart, setInCart] = useState(false)\n  return (\n    \u003Cdiv className=\"card\">\n      \u003Cimg src={product.image} loading=\"lazy\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003Cp>{product.price}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setInCart(true)}>Agregar al carrito\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F ✅ Solo el botón en cliente\n\u002F\u002F ProductCard.server.jsx\nexport default function ProductCard({ product }) {\n  return (\n    \u003Cdiv className=\"card\">\n      \u003Cimg src={product.image} loading=\"lazy\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003Cp>{product.price}\u003C\u002Fp>\n      \u003CAddToCartButton productId={product.id} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F AddToCartButton.client.jsx\n'use client'\nexport default function AddToCartButton({ productId }) {\n  const [inCart, setInCart] = useState(false)\n  return \u003Cbutton onClick={() => setInCart(true)}>Agregar al carrito\u003C\u002Fbutton>\n}\n","jsx",[77],{"type":32,"tag":57,"props":78,"children":79},{"__ignoreMap":16},[80,92,102,145,205,219,253,300,325,350,409,426,435,444,454,463,472,504,516,544,584,608,632,659,675,683,691,699,708,716,750,798,855],{"type":32,"tag":81,"props":82,"children":85},"span",{"class":83,"line":84},"line",1,[86],{"type":32,"tag":81,"props":87,"children":89},{"style":88},"--shiki-default:#6A737D",[90],{"type":37,"value":91},"\u002F\u002F ❌ Tarjeta completa en cliente\n",{"type":32,"tag":81,"props":93,"children":95},{"class":83,"line":94},2,[96],{"type":32,"tag":81,"props":97,"children":99},{"style":98},"--shiki-default:#9ECBFF",[100],{"type":37,"value":101},"'use client'\n",{"type":32,"tag":81,"props":103,"children":105},{"class":83,"line":104},3,[106,112,117,122,128,134,140],{"type":32,"tag":81,"props":107,"children":109},{"style":108},"--shiki-default:#F97583",[110],{"type":37,"value":111},"export",{"type":32,"tag":81,"props":113,"children":114},{"style":108},[115],{"type":37,"value":116}," default",{"type":32,"tag":81,"props":118,"children":119},{"style":108},[120],{"type":37,"value":121}," function",{"type":32,"tag":81,"props":123,"children":125},{"style":124},"--shiki-default:#B392F0",[126],{"type":37,"value":127}," ProductCard",{"type":32,"tag":81,"props":129,"children":131},{"style":130},"--shiki-default:#E1E4E8",[132],{"type":37,"value":133},"({ ",{"type":32,"tag":81,"props":135,"children":137},{"style":136},"--shiki-default:#FFAB70",[138],{"type":37,"value":139},"product",{"type":32,"tag":81,"props":141,"children":142},{"style":130},[143],{"type":37,"value":144}," }) {\n",{"type":32,"tag":81,"props":146,"children":148},{"class":83,"line":147},4,[149,154,159,165,170,175,180,185,190,195,200],{"type":32,"tag":81,"props":150,"children":151},{"style":108},[152],{"type":37,"value":153},"  const",{"type":32,"tag":81,"props":155,"children":156},{"style":130},[157],{"type":37,"value":158}," [",{"type":32,"tag":81,"props":160,"children":162},{"style":161},"--shiki-default:#79B8FF",[163],{"type":37,"value":164},"inCart",{"type":32,"tag":81,"props":166,"children":167},{"style":130},[168],{"type":37,"value":169},", ",{"type":32,"tag":81,"props":171,"children":172},{"style":161},[173],{"type":37,"value":174},"setInCart",{"type":32,"tag":81,"props":176,"children":177},{"style":130},[178],{"type":37,"value":179},"] ",{"type":32,"tag":81,"props":181,"children":182},{"style":108},[183],{"type":37,"value":184},"=",{"type":32,"tag":81,"props":186,"children":187},{"style":124},[188],{"type":37,"value":189}," useState",{"type":32,"tag":81,"props":191,"children":192},{"style":130},[193],{"type":37,"value":194},"(",{"type":32,"tag":81,"props":196,"children":197},{"style":161},[198],{"type":37,"value":199},"false",{"type":32,"tag":81,"props":201,"children":202},{"style":130},[203],{"type":37,"value":204},")\n",{"type":32,"tag":81,"props":206,"children":208},{"class":83,"line":207},5,[209,214],{"type":32,"tag":81,"props":210,"children":211},{"style":108},[212],{"type":37,"value":213},"  return",{"type":32,"tag":81,"props":215,"children":216},{"style":130},[217],{"type":37,"value":218}," (\n",{"type":32,"tag":81,"props":220,"children":222},{"class":83,"line":221},6,[223,228,234,239,243,248],{"type":32,"tag":81,"props":224,"children":225},{"style":130},[226],{"type":37,"value":227},"    \u003C",{"type":32,"tag":81,"props":229,"children":231},{"style":230},"--shiki-default:#85E89D",[232],{"type":37,"value":233},"div",{"type":32,"tag":81,"props":235,"children":236},{"style":124},[237],{"type":37,"value":238}," className",{"type":32,"tag":81,"props":240,"children":241},{"style":108},[242],{"type":37,"value":184},{"type":32,"tag":81,"props":244,"children":245},{"style":98},[246],{"type":37,"value":247},"\"card\"",{"type":32,"tag":81,"props":249,"children":250},{"style":130},[251],{"type":37,"value":252},">\n",{"type":32,"tag":81,"props":254,"children":256},{"class":83,"line":255},7,[257,262,267,272,276,281,286,290,295],{"type":32,"tag":81,"props":258,"children":259},{"style":130},[260],{"type":37,"value":261},"      \u003C",{"type":32,"tag":81,"props":263,"children":264},{"style":230},[265],{"type":37,"value":266},"img",{"type":32,"tag":81,"props":268,"children":269},{"style":124},[270],{"type":37,"value":271}," src",{"type":32,"tag":81,"props":273,"children":274},{"style":108},[275],{"type":37,"value":184},{"type":32,"tag":81,"props":277,"children":278},{"style":130},[279],{"type":37,"value":280},"{product.image} ",{"type":32,"tag":81,"props":282,"children":283},{"style":124},[284],{"type":37,"value":285},"loading",{"type":32,"tag":81,"props":287,"children":288},{"style":108},[289],{"type":37,"value":184},{"type":32,"tag":81,"props":291,"children":292},{"style":98},[293],{"type":37,"value":294},"\"lazy\"",{"type":32,"tag":81,"props":296,"children":297},{"style":130},[298],{"type":37,"value":299}," \u002F>\n",{"type":32,"tag":81,"props":301,"children":302},{"class":83,"line":26},[303,307,312,317,321],{"type":32,"tag":81,"props":304,"children":305},{"style":130},[306],{"type":37,"value":261},{"type":32,"tag":81,"props":308,"children":309},{"style":230},[310],{"type":37,"value":311},"h3",{"type":32,"tag":81,"props":313,"children":314},{"style":130},[315],{"type":37,"value":316},">{product.title}\u003C\u002F",{"type":32,"tag":81,"props":318,"children":319},{"style":230},[320],{"type":37,"value":311},{"type":32,"tag":81,"props":322,"children":323},{"style":130},[324],{"type":37,"value":252},{"type":32,"tag":81,"props":326,"children":328},{"class":83,"line":327},9,[329,333,337,342,346],{"type":32,"tag":81,"props":330,"children":331},{"style":130},[332],{"type":37,"value":261},{"type":32,"tag":81,"props":334,"children":335},{"style":230},[336],{"type":37,"value":33},{"type":32,"tag":81,"props":338,"children":339},{"style":130},[340],{"type":37,"value":341},">{product.price}\u003C\u002F",{"type":32,"tag":81,"props":343,"children":344},{"style":230},[345],{"type":37,"value":33},{"type":32,"tag":81,"props":347,"children":348},{"style":130},[349],{"type":37,"value":252},{"type":32,"tag":81,"props":351,"children":353},{"class":83,"line":352},10,[354,358,363,368,372,377,382,387,391,396,401,405],{"type":32,"tag":81,"props":355,"children":356},{"style":130},[357],{"type":37,"value":261},{"type":32,"tag":81,"props":359,"children":360},{"style":230},[361],{"type":37,"value":362},"button",{"type":32,"tag":81,"props":364,"children":365},{"style":124},[366],{"type":37,"value":367}," onClick",{"type":32,"tag":81,"props":369,"children":370},{"style":108},[371],{"type":37,"value":184},{"type":32,"tag":81,"props":373,"children":374},{"style":130},[375],{"type":37,"value":376},"{() ",{"type":32,"tag":81,"props":378,"children":379},{"style":108},[380],{"type":37,"value":381},"=>",{"type":32,"tag":81,"props":383,"children":384},{"style":124},[385],{"type":37,"value":386}," setInCart",{"type":32,"tag":81,"props":388,"children":389},{"style":130},[390],{"type":37,"value":194},{"type":32,"tag":81,"props":392,"children":393},{"style":161},[394],{"type":37,"value":395},"true",{"type":32,"tag":81,"props":397,"children":398},{"style":130},[399],{"type":37,"value":400},")}>Agregar al carrito\u003C\u002F",{"type":32,"tag":81,"props":402,"children":403},{"style":230},[404],{"type":37,"value":362},{"type":32,"tag":81,"props":406,"children":407},{"style":130},[408],{"type":37,"value":252},{"type":32,"tag":81,"props":410,"children":412},{"class":83,"line":411},11,[413,418,422],{"type":32,"tag":81,"props":414,"children":415},{"style":130},[416],{"type":37,"value":417},"    \u003C\u002F",{"type":32,"tag":81,"props":419,"children":420},{"style":230},[421],{"type":37,"value":233},{"type":32,"tag":81,"props":423,"children":424},{"style":130},[425],{"type":37,"value":252},{"type":32,"tag":81,"props":427,"children":429},{"class":83,"line":428},12,[430],{"type":32,"tag":81,"props":431,"children":432},{"style":130},[433],{"type":37,"value":434},"  )\n",{"type":32,"tag":81,"props":436,"children":438},{"class":83,"line":437},13,[439],{"type":32,"tag":81,"props":440,"children":441},{"style":130},[442],{"type":37,"value":443},"}\n",{"type":32,"tag":81,"props":445,"children":447},{"class":83,"line":446},14,[448],{"type":32,"tag":81,"props":449,"children":451},{"emptyLinePlaceholder":450},true,[452],{"type":37,"value":453},"\n",{"type":32,"tag":81,"props":455,"children":457},{"class":83,"line":456},15,[458],{"type":32,"tag":81,"props":459,"children":460},{"style":88},[461],{"type":37,"value":462},"\u002F\u002F ✅ Solo el botón en cliente\n",{"type":32,"tag":81,"props":464,"children":466},{"class":83,"line":465},16,[467],{"type":32,"tag":81,"props":468,"children":469},{"style":88},[470],{"type":37,"value":471},"\u002F\u002F ProductCard.server.jsx\n",{"type":32,"tag":81,"props":473,"children":475},{"class":83,"line":474},17,[476,480,484,488,492,496,500],{"type":32,"tag":81,"props":477,"children":478},{"style":108},[479],{"type":37,"value":111},{"type":32,"tag":81,"props":481,"children":482},{"style":108},[483],{"type":37,"value":116},{"type":32,"tag":81,"props":485,"children":486},{"style":108},[487],{"type":37,"value":121},{"type":32,"tag":81,"props":489,"children":490},{"style":124},[491],{"type":37,"value":127},{"type":32,"tag":81,"props":493,"children":494},{"style":130},[495],{"type":37,"value":133},{"type":32,"tag":81,"props":497,"children":498},{"style":136},[499],{"type":37,"value":139},{"type":32,"tag":81,"props":501,"children":502},{"style":130},[503],{"type":37,"value":144},{"type":32,"tag":81,"props":505,"children":507},{"class":83,"line":506},18,[508,512],{"type":32,"tag":81,"props":509,"children":510},{"style":108},[511],{"type":37,"value":213},{"type":32,"tag":81,"props":513,"children":514},{"style":130},[515],{"type":37,"value":218},{"type":32,"tag":81,"props":517,"children":519},{"class":83,"line":518},19,[520,524,528,532,536,540],{"type":32,"tag":81,"props":521,"children":522},{"style":130},[523],{"type":37,"value":227},{"type":32,"tag":81,"props":525,"children":526},{"style":230},[527],{"type":37,"value":233},{"type":32,"tag":81,"props":529,"children":530},{"style":124},[531],{"type":37,"value":238},{"type":32,"tag":81,"props":533,"children":534},{"style":108},[535],{"type":37,"value":184},{"type":32,"tag":81,"props":537,"children":538},{"style":98},[539],{"type":37,"value":247},{"type":32,"tag":81,"props":541,"children":542},{"style":130},[543],{"type":37,"value":252},{"type":32,"tag":81,"props":545,"children":547},{"class":83,"line":546},20,[548,552,556,560,564,568,572,576,580],{"type":32,"tag":81,"props":549,"children":550},{"style":130},[551],{"type":37,"value":261},{"type":32,"tag":81,"props":553,"children":554},{"style":230},[555],{"type":37,"value":266},{"type":32,"tag":81,"props":557,"children":558},{"style":124},[559],{"type":37,"value":271},{"type":32,"tag":81,"props":561,"children":562},{"style":108},[563],{"type":37,"value":184},{"type":32,"tag":81,"props":565,"children":566},{"style":130},[567],{"type":37,"value":280},{"type":32,"tag":81,"props":569,"children":570},{"style":124},[571],{"type":37,"value":285},{"type":32,"tag":81,"props":573,"children":574},{"style":108},[575],{"type":37,"value":184},{"type":32,"tag":81,"props":577,"children":578},{"style":98},[579],{"type":37,"value":294},{"type":32,"tag":81,"props":581,"children":582},{"style":130},[583],{"type":37,"value":299},{"type":32,"tag":81,"props":585,"children":587},{"class":83,"line":586},21,[588,592,596,600,604],{"type":32,"tag":81,"props":589,"children":590},{"style":130},[591],{"type":37,"value":261},{"type":32,"tag":81,"props":593,"children":594},{"style":230},[595],{"type":37,"value":311},{"type":32,"tag":81,"props":597,"children":598},{"style":130},[599],{"type":37,"value":316},{"type":32,"tag":81,"props":601,"children":602},{"style":230},[603],{"type":37,"value":311},{"type":32,"tag":81,"props":605,"children":606},{"style":130},[607],{"type":37,"value":252},{"type":32,"tag":81,"props":609,"children":611},{"class":83,"line":610},22,[612,616,620,624,628],{"type":32,"tag":81,"props":613,"children":614},{"style":130},[615],{"type":37,"value":261},{"type":32,"tag":81,"props":617,"children":618},{"style":230},[619],{"type":37,"value":33},{"type":32,"tag":81,"props":621,"children":622},{"style":130},[623],{"type":37,"value":341},{"type":32,"tag":81,"props":625,"children":626},{"style":230},[627],{"type":37,"value":33},{"type":32,"tag":81,"props":629,"children":630},{"style":130},[631],{"type":37,"value":252},{"type":32,"tag":81,"props":633,"children":635},{"class":83,"line":634},23,[636,640,645,650,654],{"type":32,"tag":81,"props":637,"children":638},{"style":130},[639],{"type":37,"value":261},{"type":32,"tag":81,"props":641,"children":642},{"style":161},[643],{"type":37,"value":644},"AddToCartButton",{"type":32,"tag":81,"props":646,"children":647},{"style":124},[648],{"type":37,"value":649}," productId",{"type":32,"tag":81,"props":651,"children":652},{"style":108},[653],{"type":37,"value":184},{"type":32,"tag":81,"props":655,"children":656},{"style":130},[657],{"type":37,"value":658},"{product.id} \u002F>\n",{"type":32,"tag":81,"props":660,"children":662},{"class":83,"line":661},24,[663,667,671],{"type":32,"tag":81,"props":664,"children":665},{"style":130},[666],{"type":37,"value":417},{"type":32,"tag":81,"props":668,"children":669},{"style":230},[670],{"type":37,"value":233},{"type":32,"tag":81,"props":672,"children":673},{"style":130},[674],{"type":37,"value":252},{"type":32,"tag":81,"props":676,"children":678},{"class":83,"line":677},25,[679],{"type":32,"tag":81,"props":680,"children":681},{"style":130},[682],{"type":37,"value":434},{"type":32,"tag":81,"props":684,"children":686},{"class":83,"line":685},26,[687],{"type":32,"tag":81,"props":688,"children":689},{"style":130},[690],{"type":37,"value":443},{"type":32,"tag":81,"props":692,"children":694},{"class":83,"line":693},27,[695],{"type":32,"tag":81,"props":696,"children":697},{"emptyLinePlaceholder":450},[698],{"type":37,"value":453},{"type":32,"tag":81,"props":700,"children":702},{"class":83,"line":701},28,[703],{"type":32,"tag":81,"props":704,"children":705},{"style":88},[706],{"type":37,"value":707},"\u002F\u002F AddToCartButton.client.jsx\n",{"type":32,"tag":81,"props":709,"children":711},{"class":83,"line":710},29,[712],{"type":32,"tag":81,"props":713,"children":714},{"style":98},[715],{"type":37,"value":101},{"type":32,"tag":81,"props":717,"children":719},{"class":83,"line":718},30,[720,724,728,732,737,741,746],{"type":32,"tag":81,"props":721,"children":722},{"style":108},[723],{"type":37,"value":111},{"type":32,"tag":81,"props":725,"children":726},{"style":108},[727],{"type":37,"value":116},{"type":32,"tag":81,"props":729,"children":730},{"style":108},[731],{"type":37,"value":121},{"type":32,"tag":81,"props":733,"children":734},{"style":124},[735],{"type":37,"value":736}," AddToCartButton",{"type":32,"tag":81,"props":738,"children":739},{"style":130},[740],{"type":37,"value":133},{"type":32,"tag":81,"props":742,"children":743},{"style":136},[744],{"type":37,"value":745},"productId",{"type":32,"tag":81,"props":747,"children":748},{"style":130},[749],{"type":37,"value":144},{"type":32,"tag":81,"props":751,"children":753},{"class":83,"line":752},31,[754,758,762,766,770,774,778,782,786,790,794],{"type":32,"tag":81,"props":755,"children":756},{"style":108},[757],{"type":37,"value":153},{"type":32,"tag":81,"props":759,"children":760},{"style":130},[761],{"type":37,"value":158},{"type":32,"tag":81,"props":763,"children":764},{"style":161},[765],{"type":37,"value":164},{"type":32,"tag":81,"props":767,"children":768},{"style":130},[769],{"type":37,"value":169},{"type":32,"tag":81,"props":771,"children":772},{"style":161},[773],{"type":37,"value":174},{"type":32,"tag":81,"props":775,"children":776},{"style":130},[777],{"type":37,"value":179},{"type":32,"tag":81,"props":779,"children":780},{"style":108},[781],{"type":37,"value":184},{"type":32,"tag":81,"props":783,"children":784},{"style":124},[785],{"type":37,"value":189},{"type":32,"tag":81,"props":787,"children":788},{"style":130},[789],{"type":37,"value":194},{"type":32,"tag":81,"props":791,"children":792},{"style":161},[793],{"type":37,"value":199},{"type":32,"tag":81,"props":795,"children":796},{"style":130},[797],{"type":37,"value":204},{"type":32,"tag":81,"props":799,"children":801},{"class":83,"line":800},32,[802,806,811,815,819,823,827,831,835,839,843,847,851],{"type":32,"tag":81,"props":803,"children":804},{"style":108},[805],{"type":37,"value":213},{"type":32,"tag":81,"props":807,"children":808},{"style":130},[809],{"type":37,"value":810}," \u003C",{"type":32,"tag":81,"props":812,"children":813},{"style":230},[814],{"type":37,"value":362},{"type":32,"tag":81,"props":816,"children":817},{"style":124},[818],{"type":37,"value":367},{"type":32,"tag":81,"props":820,"children":821},{"style":108},[822],{"type":37,"value":184},{"type":32,"tag":81,"props":824,"children":825},{"style":130},[826],{"type":37,"value":376},{"type":32,"tag":81,"props":828,"children":829},{"style":108},[830],{"type":37,"value":381},{"type":32,"tag":81,"props":832,"children":833},{"style":124},[834],{"type":37,"value":386},{"type":32,"tag":81,"props":836,"children":837},{"style":130},[838],{"type":37,"value":194},{"type":32,"tag":81,"props":840,"children":841},{"style":161},[842],{"type":37,"value":395},{"type":32,"tag":81,"props":844,"children":845},{"style":130},[846],{"type":37,"value":400},{"type":32,"tag":81,"props":848,"children":849},{"style":230},[850],{"type":37,"value":362},{"type":32,"tag":81,"props":852,"children":853},{"style":130},[854],{"type":37,"value":252},{"type":32,"tag":81,"props":856,"children":858},{"class":83,"line":857},33,[859],{"type":32,"tag":81,"props":860,"children":861},{"style":130},[862],{"type":37,"value":443},{"type":32,"tag":33,"props":864,"children":865},{},[866],{"type":37,"value":867},"Con este enfoque, React Server Components envía el runtime de JavaScript solo para el botón. La imagen, título y precio llegan como HTML, fuera del alcance de la hidratación. El TBT se reduce en un 71%, el FCP baja de 1840ms a 680ms.",{"type":32,"tag":311,"props":869,"children":871},{"id":870},"nuxt-35-y-la-nueva-estrategia-de-payload-de-vue",[872],{"type":37,"value":873},"Nuxt 3.5+ y la nueva estrategia de payload de Vue",{"type":32,"tag":33,"props":875,"children":876},{},[877,879,885,887,893],{"type":37,"value":878},"El cambio que trae Vue 3.5: la serialización de estados ",{"type":32,"tag":57,"props":880,"children":882},{"className":881},[],[883],{"type":37,"value":884},"reactive()",{"type":37,"value":886}," y ",{"type":32,"tag":57,"props":888,"children":890},{"className":889},[],[891],{"type":37,"value":892},"ref()",{"type":37,"value":894}," es más agresiva. Los componentes renderizados en el servidor envían un payload JSON pequeño al cliente, que se reconstruye durante la hidratación. Es similar al streaming RSC de Next.js, pero el sistema de reactividad de Vue es más granular.",{"type":32,"tag":33,"props":896,"children":897},{},[898,900,906,908,914],{"type":37,"value":899},"Cuando se activa ",{"type":32,"tag":57,"props":901,"children":903},{"className":902},[],[904],{"type":37,"value":905},"experimental.payloadExtraction",{"type":37,"value":907}," en ",{"type":32,"tag":57,"props":909,"children":911},{"className":910},[],[912],{"type":37,"value":913},"nuxt.config.ts",{"type":37,"value":915}," de Nuxt 3.12, se genera un archivo de payload separado para cada ruta. Este archivo se sirve desde CDN en formato gzip-compressed. El payload promedia 40-60KB y, después de ser parseado en el cliente, se inyecta en el store. El tiempo de hidratación disminuye un 45-50%.",{"type":32,"tag":71,"props":917,"children":921},{"className":918,"code":919,"language":920,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  experimental: {\n    payloadExtraction: true,\n    componentIslands: true\n  },\n  nitro: {\n    prerender: {\n      routes: ['\u002Fproducts', '\u002Fcategories']\n    }\n  }\n})\n","typescript",[922],{"type":32,"tag":57,"props":923,"children":924},{"__ignoreMap":16},[925,933,954,962,979,992,1000,1008,1016,1043,1051,1059],{"type":32,"tag":81,"props":926,"children":927},{"class":83,"line":84},[928],{"type":32,"tag":81,"props":929,"children":930},{"style":88},[931],{"type":37,"value":932},"\u002F\u002F nuxt.config.ts\n",{"type":32,"tag":81,"props":934,"children":935},{"class":83,"line":94},[936,940,944,949],{"type":32,"tag":81,"props":937,"children":938},{"style":108},[939],{"type":37,"value":111},{"type":32,"tag":81,"props":941,"children":942},{"style":108},[943],{"type":37,"value":116},{"type":32,"tag":81,"props":945,"children":946},{"style":124},[947],{"type":37,"value":948}," defineNuxtConfig",{"type":32,"tag":81,"props":950,"children":951},{"style":130},[952],{"type":37,"value":953},"({\n",{"type":32,"tag":81,"props":955,"children":956},{"class":83,"line":104},[957],{"type":32,"tag":81,"props":958,"children":959},{"style":130},[960],{"type":37,"value":961},"  experimental: {\n",{"type":32,"tag":81,"props":963,"children":964},{"class":83,"line":147},[965,970,974],{"type":32,"tag":81,"props":966,"children":967},{"style":130},[968],{"type":37,"value":969},"    payloadExtraction: ",{"type":32,"tag":81,"props":971,"children":972},{"style":161},[973],{"type":37,"value":395},{"type":32,"tag":81,"props":975,"children":976},{"style":130},[977],{"type":37,"value":978},",\n",{"type":32,"tag":81,"props":980,"children":981},{"class":83,"line":207},[982,987],{"type":32,"tag":81,"props":983,"children":984},{"style":130},[985],{"type":37,"value":986},"    componentIslands: ",{"type":32,"tag":81,"props":988,"children":989},{"style":161},[990],{"type":37,"value":991},"true\n",{"type":32,"tag":81,"props":993,"children":994},{"class":83,"line":221},[995],{"type":32,"tag":81,"props":996,"children":997},{"style":130},[998],{"type":37,"value":999},"  },\n",{"type":32,"tag":81,"props":1001,"children":1002},{"class":83,"line":255},[1003],{"type":32,"tag":81,"props":1004,"children":1005},{"style":130},[1006],{"type":37,"value":1007},"  nitro: {\n",{"type":32,"tag":81,"props":1009,"children":1010},{"class":83,"line":26},[1011],{"type":32,"tag":81,"props":1012,"children":1013},{"style":130},[1014],{"type":37,"value":1015},"    prerender: {\n",{"type":32,"tag":81,"props":1017,"children":1018},{"class":83,"line":327},[1019,1024,1029,1033,1038],{"type":32,"tag":81,"props":1020,"children":1021},{"style":130},[1022],{"type":37,"value":1023},"      routes: [",{"type":32,"tag":81,"props":1025,"children":1026},{"style":98},[1027],{"type":37,"value":1028},"'\u002Fproducts'",{"type":32,"tag":81,"props":1030,"children":1031},{"style":130},[1032],{"type":37,"value":169},{"type":32,"tag":81,"props":1034,"children":1035},{"style":98},[1036],{"type":37,"value":1037},"'\u002Fcategories'",{"type":32,"tag":81,"props":1039,"children":1040},{"style":130},[1041],{"type":37,"value":1042},"]\n",{"type":32,"tag":81,"props":1044,"children":1045},{"class":83,"line":352},[1046],{"type":32,"tag":81,"props":1047,"children":1048},{"style":130},[1049],{"type":37,"value":1050},"    }\n",{"type":32,"tag":81,"props":1052,"children":1053},{"class":83,"line":411},[1054],{"type":32,"tag":81,"props":1055,"children":1056},{"style":130},[1057],{"type":37,"value":1058},"  }\n",{"type":32,"tag":81,"props":1060,"children":1061},{"class":83,"line":428},[1062],{"type":32,"tag":81,"props":1063,"children":1064},{"style":130},[1065],{"type":37,"value":1066},"})\n",{"type":32,"tag":33,"props":1068,"children":1069},{},[1070,1072,1078,1080,1086,1088,1094],{"type":37,"value":1071},"La característica ",{"type":32,"tag":57,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":37,"value":1077},"componentIslands",{"type":37,"value":1079}," permite alojar componentes renderizados en servidor e hidratados en cliente en el mismo árbol. Similar a los ",{"type":32,"tag":57,"props":1081,"children":1083},{"className":1082},[],[1084],{"type":37,"value":1085},"Suspense",{"type":37,"value":1087}," boundary de React — pero en Vue lo envuelves con el componente ",{"type":32,"tag":57,"props":1089,"children":1091},{"className":1090},[],[1092],{"type":37,"value":1093},"\u003CNuxtIsland>",{"type":37,"value":1095},". El estado dentro de la island es independiente del global store y se hidrata solo cuando es necesario.",{"type":32,"tag":33,"props":1097,"children":1098},{},[1099,1101,1110],{"type":37,"value":1100},"En la arquitectura de ",{"type":32,"tag":1102,"props":1103,"children":1107},"a",{"href":1104,"rel":1105},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fheadless",[1106],"nofollow",[1108],{"type":37,"value":1109},"Comercio Headless",{"type":37,"value":1111}," de Roibase, este patrón funciona así: la lista de productos es un componente servidor, la UI de filtrado es un componente cliente. Cuando cambian los filtros, solo se actualiza el parámetro de consulta de la lista, el servidor devuelve HTML nuevo e island se remonta. El estado en el cliente permanece solo en el dropdown de filtros, no se filtra en las tarjetas de productos. Ahorro de bundle: 63%.",{"type":32,"tag":40,"props":1113,"children":1115},{"id":1114},"medir-el-costo-de-hidratación-chrome-devtools-profiler",[1116],{"type":37,"value":1117},"Medir el costo de hidratación: Chrome DevTools Profiler",{"type":32,"tag":33,"props":1119,"children":1120},{},[1121],{"type":37,"value":1122},"No necesitas teoría, necesitas números reales. Chrome DevTools → Performance → Start profiling → Recarga la página → Stop. En el flame chart, busca el bloque amarillo etiquetado \"Hydration\". El ancho del bloque muestra la duración de la hidratación.",{"type":32,"tag":1124,"props":1125,"children":1126},"table",{},[1127,1156],{"type":32,"tag":1128,"props":1129,"children":1130},"thead",{},[1131],{"type":32,"tag":1132,"props":1133,"children":1134},"tr",{},[1135,1141,1146,1151],{"type":32,"tag":1136,"props":1137,"children":1138},"th",{},[1139],{"type":37,"value":1140},"Métrica",{"type":32,"tag":1136,"props":1142,"children":1143},{},[1144],{"type":37,"value":1145},"Renderizado completo en cliente",{"type":32,"tag":1136,"props":1147,"children":1148},{},[1149],{"type":37,"value":1150},"Hidratación selectiva",{"type":32,"tag":1136,"props":1152,"children":1153},{},[1154],{"type":37,"value":1155},"Solo servidor (sin hidratación)",{"type":32,"tag":1157,"props":1158,"children":1159},"tbody",{},[1160,1184,1207,1229],{"type":32,"tag":1132,"props":1161,"children":1162},{},[1163,1169,1174,1179],{"type":32,"tag":1164,"props":1165,"children":1166},"td",{},[1167],{"type":37,"value":1168},"FCP",{"type":32,"tag":1164,"props":1170,"children":1171},{},[1172],{"type":37,"value":1173},"1840ms",{"type":32,"tag":1164,"props":1175,"children":1176},{},[1177],{"type":37,"value":1178},"680ms",{"type":32,"tag":1164,"props":1180,"children":1181},{},[1182],{"type":37,"value":1183},"420ms",{"type":32,"tag":1132,"props":1185,"children":1186},{},[1187,1192,1197,1202],{"type":32,"tag":1164,"props":1188,"children":1189},{},[1190],{"type":37,"value":1191},"LCP",{"type":32,"tag":1164,"props":1193,"children":1194},{},[1195],{"type":37,"value":1196},"2910ms",{"type":32,"tag":1164,"props":1198,"children":1199},{},[1200],{"type":37,"value":1201},"1350ms",{"type":32,"tag":1164,"props":1203,"children":1204},{},[1205],{"type":37,"value":1206},"890ms",{"type":32,"tag":1132,"props":1208,"children":1209},{},[1210,1215,1219,1224],{"type":32,"tag":1164,"props":1211,"children":1212},{},[1213],{"type":37,"value":1214},"TBT",{"type":32,"tag":1164,"props":1216,"children":1217},{},[1218],{"type":37,"value":1183},{"type":32,"tag":1164,"props":1220,"children":1221},{},[1222],{"type":37,"value":1223},"120ms",{"type":32,"tag":1164,"props":1225,"children":1226},{},[1227],{"type":37,"value":1228},"0ms",{"type":32,"tag":1132,"props":1230,"children":1231},{},[1232,1237,1242,1247],{"type":32,"tag":1164,"props":1233,"children":1234},{},[1235],{"type":37,"value":1236},"JS inicial",{"type":32,"tag":1164,"props":1238,"children":1239},{},[1240],{"type":37,"value":1241},"340KB",{"type":32,"tag":1164,"props":1243,"children":1244},{},[1245],{"type":37,"value":1246},"95KB",{"type":32,"tag":1164,"props":1248,"children":1249},{},[1250],{"type":37,"value":1251},"18KB",{"type":32,"tag":33,"props":1253,"children":1254},{},[1255],{"type":37,"value":1256},"Esta tabla proviene de un proyecto real de Shopify Hydrogen 2.0 (repositorio de prueba de Roibase, febrero 2026). La fila \"Solo servidor\" es HTML completamente estático más un script cliente mínimo (excluyendo carrito y checkout). \"Hidratación selectiva\" mantiene solo los botones interactivos como componentes cliente. \"Renderizado completo en cliente\" es el enfoque antiguo de Next.js 13 Pages Router.",{"type":32,"tag":33,"props":1258,"children":1259},{},[1260],{"type":37,"value":1261},"Ver TBT en cero suena perfecto, pero hay compensaciones: cada solicitud requiere renderizado completo en el servidor. Si implementas personalización (precios por usuario, estado de stock), la estrategia de caché se complica. Mantener caché por usuario en Edge aumenta el costo de CDN. El equilibrio correcto: pre-renderizar contenido estático, buscar dinámicamente la parte dinámica en el cliente.",{"type":32,"tag":311,"props":1263,"children":1265},{"id":1264},"incremental-static-regeneration-isr-vs-on-demand-revalidation",[1266],{"type":37,"value":1267},"Incremental Static Regeneration (ISR) vs On-Demand Revalidation",{"type":32,"tag":33,"props":1269,"children":1270},{},[1271],{"type":37,"value":1272},"Next.js 14+ y Nuxt 3.10+ lo soportan. ISR: las páginas se reconstruyen en segundo plano a intervalos regulares. On-Demand Revalidation: se activa por webhook (por ejemplo, cuando se actualiza un producto en Shopify).",{"type":32,"tag":33,"props":1274,"children":1275},{},[1276],{"type":37,"value":1277},"Configuración de ISR:",{"type":32,"tag":71,"props":1279,"children":1281},{"className":918,"code":1280,"language":920,"meta":16,"style":16},"\u002F\u002F Next.js app\u002Fproducts\u002F[slug]\u002Fpage.tsx\nexport const revalidate = 3600 \u002F\u002F 1 hora\n\nexport async function generateStaticParams() {\n  const products = await fetchAllProducts()\n  return products.map(p => ({ slug: p.slug }))\n}\n",[1282],{"type":32,"tag":57,"props":1283,"children":1284},{"__ignoreMap":16},[1285,1293,1325,1332,1358,1389,1424],{"type":32,"tag":81,"props":1286,"children":1287},{"class":83,"line":84},[1288],{"type":32,"tag":81,"props":1289,"children":1290},{"style":88},[1291],{"type":37,"value":1292},"\u002F\u002F Next.js app\u002Fproducts\u002F[slug]\u002Fpage.tsx\n",{"type":32,"tag":81,"props":1294,"children":1295},{"class":83,"line":94},[1296,1300,1305,1310,1315,1320],{"type":32,"tag":81,"props":1297,"children":1298},{"style":108},[1299],{"type":37,"value":111},{"type":32,"tag":81,"props":1301,"children":1302},{"style":108},[1303],{"type":37,"value":1304}," const",{"type":32,"tag":81,"props":1306,"children":1307},{"style":161},[1308],{"type":37,"value":1309}," revalidate",{"type":32,"tag":81,"props":1311,"children":1312},{"style":108},[1313],{"type":37,"value":1314}," =",{"type":32,"tag":81,"props":1316,"children":1317},{"style":161},[1318],{"type":37,"value":1319}," 3600",{"type":32,"tag":81,"props":1321,"children":1322},{"style":88},[1323],{"type":37,"value":1324}," \u002F\u002F 1 hora\n",{"type":32,"tag":81,"props":1326,"children":1327},{"class":83,"line":104},[1328],{"type":32,"tag":81,"props":1329,"children":1330},{"emptyLinePlaceholder":450},[1331],{"type":37,"value":453},{"type":32,"tag":81,"props":1333,"children":1334},{"class":83,"line":147},[1335,1339,1344,1348,1353],{"type":32,"tag":81,"props":1336,"children":1337},{"style":108},[1338],{"type":37,"value":111},{"type":32,"tag":81,"props":1340,"children":1341},{"style":108},[1342],{"type":37,"value":1343}," async",{"type":32,"tag":81,"props":1345,"children":1346},{"style":108},[1347],{"type":37,"value":121},{"type":32,"tag":81,"props":1349,"children":1350},{"style":124},[1351],{"type":37,"value":1352}," generateStaticParams",{"type":32,"tag":81,"props":1354,"children":1355},{"style":130},[1356],{"type":37,"value":1357},"() {\n",{"type":32,"tag":81,"props":1359,"children":1360},{"class":83,"line":207},[1361,1365,1370,1374,1379,1384],{"type":32,"tag":81,"props":1362,"children":1363},{"style":108},[1364],{"type":37,"value":153},{"type":32,"tag":81,"props":1366,"children":1367},{"style":161},[1368],{"type":37,"value":1369}," products",{"type":32,"tag":81,"props":1371,"children":1372},{"style":108},[1373],{"type":37,"value":1314},{"type":32,"tag":81,"props":1375,"children":1376},{"style":108},[1377],{"type":37,"value":1378}," await",{"type":32,"tag":81,"props":1380,"children":1381},{"style":124},[1382],{"type":37,"value":1383}," fetchAllProducts",{"type":32,"tag":81,"props":1385,"children":1386},{"style":130},[1387],{"type":37,"value":1388},"()\n",{"type":32,"tag":81,"props":1390,"children":1391},{"class":83,"line":221},[1392,1396,1401,1406,1410,1414,1419],{"type":32,"tag":81,"props":1393,"children":1394},{"style":108},[1395],{"type":37,"value":213},{"type":32,"tag":81,"props":1397,"children":1398},{"style":130},[1399],{"type":37,"value":1400}," products.",{"type":32,"tag":81,"props":1402,"children":1403},{"style":124},[1404],{"type":37,"value":1405},"map",{"type":32,"tag":81,"props":1407,"children":1408},{"style":130},[1409],{"type":37,"value":194},{"type":32,"tag":81,"props":1411,"children":1412},{"style":136},[1413],{"type":37,"value":33},{"type":32,"tag":81,"props":1415,"children":1416},{"style":108},[1417],{"type":37,"value":1418}," =>",{"type":32,"tag":81,"props":1420,"children":1421},{"style":130},[1422],{"type":37,"value":1423}," ({ slug: p.slug }))\n",{"type":32,"tag":81,"props":1425,"children":1426},{"class":83,"line":255},[1427],{"type":32,"tag":81,"props":1428,"children":1429},{"style":130},[1430],{"type":37,"value":443},{"type":32,"tag":33,"props":1432,"children":1433},{},[1434],{"type":37,"value":1435},"Con este enfoque, la página del producto se renderiza en el servidor y se sirve desde caché durante 1 hora. Sin hidratación, JavaScript mínimo. LCP 420ms, TBT 0ms. Pero la compensación: la información de stock podría estar retrasada 1 hora. Riesgoso en comercio electrónico.",{"type":32,"tag":33,"props":1437,"children":1438},{},[1439],{"type":37,"value":1440},"On-Demand Revalidation:",{"type":32,"tag":71,"props":1442,"children":1444},{"className":918,"code":1443,"language":920,"meta":16,"style":16},"\u002F\u002F app\u002Fapi\u002Frevalidate\u002Froute.ts\nimport { revalidatePath } from 'next\u002Fcache'\n\nexport async function POST(request: Request) {\n  const { slug } = await request.json()\n  revalidatePath(`\u002Fproducts\u002F${slug}`)\n  return Response.json({ revalidated: true })\n}\n",[1445],{"type":32,"tag":57,"props":1446,"children":1447},{"__ignoreMap":16},[1448,1456,1479,1486,1530,1574,1604,1634],{"type":32,"tag":81,"props":1449,"children":1450},{"class":83,"line":84},[1451],{"type":32,"tag":81,"props":1452,"children":1453},{"style":88},[1454],{"type":37,"value":1455},"\u002F\u002F app\u002Fapi\u002Frevalidate\u002Froute.ts\n",{"type":32,"tag":81,"props":1457,"children":1458},{"class":83,"line":94},[1459,1464,1469,1474],{"type":32,"tag":81,"props":1460,"children":1461},{"style":108},[1462],{"type":37,"value":1463},"import",{"type":32,"tag":81,"props":1465,"children":1466},{"style":130},[1467],{"type":37,"value":1468}," { revalidatePath } ",{"type":32,"tag":81,"props":1470,"children":1471},{"style":108},[1472],{"type":37,"value":1473},"from",{"type":32,"tag":81,"props":1475,"children":1476},{"style":98},[1477],{"type":37,"value":1478}," 'next\u002Fcache'\n",{"type":32,"tag":81,"props":1480,"children":1481},{"class":83,"line":104},[1482],{"type":32,"tag":81,"props":1483,"children":1484},{"emptyLinePlaceholder":450},[1485],{"type":37,"value":453},{"type":32,"tag":81,"props":1487,"children":1488},{"class":83,"line":147},[1489,1493,1497,1501,1506,1510,1515,1520,1525],{"type":32,"tag":81,"props":1490,"children":1491},{"style":108},[1492],{"type":37,"value":111},{"type":32,"tag":81,"props":1494,"children":1495},{"style":108},[1496],{"type":37,"value":1343},{"type":32,"tag":81,"props":1498,"children":1499},{"style":108},[1500],{"type":37,"value":121},{"type":32,"tag":81,"props":1502,"children":1503},{"style":124},[1504],{"type":37,"value":1505}," POST",{"type":32,"tag":81,"props":1507,"children":1508},{"style":130},[1509],{"type":37,"value":194},{"type":32,"tag":81,"props":1511,"children":1512},{"style":136},[1513],{"type":37,"value":1514},"request",{"type":32,"tag":81,"props":1516,"children":1517},{"style":108},[1518],{"type":37,"value":1519},":",{"type":32,"tag":81,"props":1521,"children":1522},{"style":124},[1523],{"type":37,"value":1524}," Request",{"type":32,"tag":81,"props":1526,"children":1527},{"style":130},[1528],{"type":37,"value":1529},") {\n",{"type":32,"tag":81,"props":1531,"children":1532},{"class":83,"line":207},[1533,1537,1542,1547,1552,1556,1560,1565,1570],{"type":32,"tag":81,"props":1534,"children":1535},{"style":108},[1536],{"type":37,"value":153},{"type":32,"tag":81,"props":1538,"children":1539},{"style":130},[1540],{"type":37,"value":1541}," { ",{"type":32,"tag":81,"props":1543,"children":1544},{"style":161},[1545],{"type":37,"value":1546},"slug",{"type":32,"tag":81,"props":1548,"children":1549},{"style":130},[1550],{"type":37,"value":1551}," } ",{"type":32,"tag":81,"props":1553,"children":1554},{"style":108},[1555],{"type":37,"value":184},{"type":32,"tag":81,"props":1557,"children":1558},{"style":108},[1559],{"type":37,"value":1378},{"type":32,"tag":81,"props":1561,"children":1562},{"style":130},[1563],{"type":37,"value":1564}," request.",{"type":32,"tag":81,"props":1566,"children":1567},{"style":124},[1568],{"type":37,"value":1569},"json",{"type":32,"tag":81,"props":1571,"children":1572},{"style":130},[1573],{"type":37,"value":1388},{"type":32,"tag":81,"props":1575,"children":1576},{"class":83,"line":221},[1577,1582,1586,1591,1595,1600],{"type":32,"tag":81,"props":1578,"children":1579},{"style":124},[1580],{"type":37,"value":1581},"  revalidatePath",{"type":32,"tag":81,"props":1583,"children":1584},{"style":130},[1585],{"type":37,"value":194},{"type":32,"tag":81,"props":1587,"children":1588},{"style":98},[1589],{"type":37,"value":1590},"`\u002Fproducts\u002F${",{"type":32,"tag":81,"props":1592,"children":1593},{"style":130},[1594],{"type":37,"value":1546},{"type":32,"tag":81,"props":1596,"children":1597},{"style":98},[1598],{"type":37,"value":1599},"}`",{"type":32,"tag":81,"props":1601,"children":1602},{"style":130},[1603],{"type":37,"value":204},{"type":32,"tag":81,"props":1605,"children":1606},{"class":83,"line":255},[1607,1611,1616,1620,1625,1629],{"type":32,"tag":81,"props":1608,"children":1609},{"style":108},[1610],{"type":37,"value":213},{"type":32,"tag":81,"props":1612,"children":1613},{"style":130},[1614],{"type":37,"value":1615}," Response.",{"type":32,"tag":81,"props":1617,"children":1618},{"style":124},[1619],{"type":37,"value":1569},{"type":32,"tag":81,"props":1621,"children":1622},{"style":130},[1623],{"type":37,"value":1624},"({ revalidated: ",{"type":32,"tag":81,"props":1626,"children":1627},{"style":161},[1628],{"type":37,"value":395},{"type":32,"tag":81,"props":1630,"children":1631},{"style":130},[1632],{"type":37,"value":1633}," })\n",{"type":32,"tag":81,"props":1635,"children":1636},{"class":83,"line":26},[1637],{"type":32,"tag":81,"props":1638,"children":1639},{"style":130},[1640],{"type":37,"value":443},{"type":32,"tag":33,"props":1642,"children":1643},{},[1644],{"type":37,"value":1645},"Un webhook de Shopify hace una solicitud a este endpoint, Next.js reconstruye inmediatamente la página relevante. La actualización de stock se refleja en 2-5 segundos. Sin hidratación, TBT 0ms. El mejor escenario.",{"type":32,"tag":40,"props":1647,"children":1649},{"id":1648},"cuándo-los-componentes-cliente-son-inevitables",[1650],{"type":37,"value":1651},"Cuándo los componentes cliente son inevitables",{"type":32,"tag":33,"props":1653,"children":1654},{},[1655],{"type":37,"value":1656},"No puedes hacerlo todo en el servidor. Estas situaciones hacen que el componente cliente sea obligatorio:",{"type":32,"tag":1658,"props":1659,"children":1660},"ol",{},[1661,1673,1683,1693,1703],{"type":32,"tag":1662,"props":1663,"children":1664},"li",{},[1665,1671],{"type":32,"tag":1666,"props":1667,"children":1668},"strong",{},[1669],{"type":37,"value":1670},"Validación de formularios",{"type":37,"value":1672}," — retroalimentación en tiempo real, mensajes de error con cada pulsación",{"type":32,"tag":1662,"props":1674,"children":1675},{},[1676,1681],{"type":32,"tag":1666,"props":1677,"children":1678},{},[1679],{"type":37,"value":1680},"Desplazamiento infinito",{"type":37,"value":1682}," — la API de Intersection Observer funciona en el cliente",{"type":32,"tag":1662,"props":1684,"children":1685},{},[1686,1691],{"type":32,"tag":1666,"props":1687,"children":1688},{},[1689],{"type":37,"value":1690},"Estado del carrito de compras",{"type":37,"value":1692}," — requiere almacenamiento de sesión o store global como Zustand",{"type":32,"tag":1662,"props":1694,"children":1695},{},[1696,1701],{"type":32,"tag":1666,"props":1697,"children":1698},{},[1699],{"type":37,"value":1700},"Renderizado de prueba A\u002FB",{"type":37,"value":1702}," — leer cookies y renderizar UI diferente",{"type":32,"tag":1662,"props":1704,"children":1705},{},[1706,1711],{"type":32,"tag":1666,"props":1707,"children":1708},{},[1709],{"type":37,"value":1710},"Widget de terceros",{"type":37,"value":1712}," — por ejemplo, popup de Klaviyo que carga script en el cliente",{"type":32,"tag":33,"props":1714,"children":1715},{},[1716,1718,1724,1726,1732],{"type":37,"value":1717},"En estos casos, la hidratación selectiva es obligatoria. En React, la directiva ",{"type":32,"tag":57,"props":1719,"children":1721},{"className":1720},[],[1722],{"type":37,"value":1723},"use client",{"type":37,"value":1725},", en Vue, el wrapper ",{"type":32,"tag":57,"props":1727,"children":1729},{"className":1728},[],[1730],{"type":37,"value":1731},"\u003CClientOnly>",{"type":37,"value":1733},". Pero cuidado: si estos componentes están profundos en el árbol, los componentes padres también se hacen cliente. Esto se conoce como \"client boundary leakage\".",{"type":32,"tag":71,"props":1735,"children":1737},{"className":73,"code":1736,"language":75,"meta":16,"style":16},"\u002F\u002F ❌ Incorrecto: el layout completo se vuelve cliente\n'use client'\nexport default function Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CHeader \u002F>\n      {children}\n      \u003CNewsletterPopup \u002F> {\u002F* Por eso pusimos 'use client' *\u002F}\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F ✅ Correcto: solo el popup es cliente\nexport default function Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CHeader \u002F>\n      {children}\n      \u003CNewsletterPopup \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F NewsletterPopup.tsx\n'use client'\nexport default function NewsletterPopup() {\n  \u002F\u002F Script de Klaviyo aquí\n}\n",[1738],{"type":32,"tag":57,"props":1739,"children":1740},{"__ignoreMap":16},[1741,1749,1756,1789,1800,1815,1831,1839,1865,1880,1887,1894,1901,1909,1940,1951,1966,1981,1988,2003,2018,2025,2032,2039,2047,2054,2078,2086],{"type":32,"tag":81,"props":1742,"children":1743},{"class":83,"line":84},[1744],{"type":32,"tag":81,"props":1745,"children":1746},{"style":88},[1747],{"type":37,"value":1748},"\u002F\u002F ❌ Incorrecto: el layout completo se vuelve cliente\n",{"type":32,"tag":81,"props":1750,"children":1751},{"class":83,"line":94},[1752],{"type":32,"tag":81,"props":1753,"children":1754},{"style":98},[1755],{"type":37,"value":101},{"type":32,"tag":81,"props":1757,"children":1758},{"class":83,"line":104},[1759,1763,1767,1771,1776,1780,1785],{"type":32,"tag":81,"props":1760,"children":1761},{"style":108},[1762],{"type":37,"value":111},{"type":32,"tag":81,"props":1764,"children":1765},{"style":108},[1766],{"type":37,"value":116},{"type":32,"tag":81,"props":1768,"children":1769},{"style":108},[1770],{"type":37,"value":121},{"type":32,"tag":81,"props":1772,"children":1773},{"style":124},[1774],{"type":37,"value":1775}," Layout",{"type":32,"tag":81,"props":1777,"children":1778},{"style":130},[1779],{"type":37,"value":133},{"type":32,"tag":81,"props":1781,"children":1782},{"style":136},[1783],{"type":37,"value":1784},"children",{"type":32,"tag":81,"props":1786,"children":1787},{"style":130},[1788],{"type":37,"value":144},{"type":32,"tag":81,"props":1790,"children":1791},{"class":83,"line":147},[1792,1796],{"type":32,"tag":81,"props":1793,"children":1794},{"style":108},[1795],{"type":37,"value":213},{"type":32,"tag":81,"props":1797,"children":1798},{"style":130},[1799],{"type":37,"value":218},{"type":32,"tag":81,"props":1801,"children":1802},{"class":83,"line":207},[1803,1807,1811],{"type":32,"tag":81,"props":1804,"children":1805},{"style":130},[1806],{"type":37,"value":227},{"type":32,"tag":81,"props":1808,"children":1809},{"style":230},[1810],{"type":37,"value":233},{"type":32,"tag":81,"props":1812,"children":1813},{"style":130},[1814],{"type":37,"value":252},{"type":32,"tag":81,"props":1816,"children":1817},{"class":83,"line":221},[1818,1822,1827],{"type":32,"tag":81,"props":1819,"children":1820},{"style":130},[1821],{"type":37,"value":261},{"type":32,"tag":81,"props":1823,"children":1824},{"style":161},[1825],{"type":37,"value":1826},"Header",{"type":32,"tag":81,"props":1828,"children":1829},{"style":130},[1830],{"type":37,"value":299},{"type":32,"tag":81,"props":1832,"children":1833},{"class":83,"line":255},[1834],{"type":32,"tag":81,"props":1835,"children":1836},{"style":130},[1837],{"type":37,"value":1838},"      {children}\n",{"type":32,"tag":81,"props":1840,"children":1841},{"class":83,"line":26},[1842,1846,1851,1856,1861],{"type":32,"tag":81,"props":1843,"children":1844},{"style":130},[1845],{"type":37,"value":261},{"type":32,"tag":81,"props":1847,"children":1848},{"style":161},[1849],{"type":37,"value":1850},"NewsletterPopup",{"type":32,"tag":81,"props":1852,"children":1853},{"style":130},[1854],{"type":37,"value":1855}," \u002F> {",{"type":32,"tag":81,"props":1857,"children":1858},{"style":88},[1859],{"type":37,"value":1860},"\u002F* Por eso pusimos 'use client' *\u002F",{"type":32,"tag":81,"props":1862,"children":1863},{"style":130},[1864],{"type":37,"value":443},{"type":32,"tag":81,"props":1866,"children":1867},{"class":83,"line":327},[1868,1872,1876],{"type":32,"tag":81,"props":1869,"children":1870},{"style":130},[1871],{"type":37,"value":417},{"type":32,"tag":81,"props":1873,"children":1874},{"style":230},[1875],{"type":37,"value":233},{"type":32,"tag":81,"props":1877,"children":1878},{"style":130},[1879],{"type":37,"value":252},{"type":32,"tag":81,"props":1881,"children":1882},{"class":83,"line":352},[1883],{"type":32,"tag":81,"props":1884,"children":1885},{"style":130},[1886],{"type":37,"value":434},{"type":32,"tag":81,"props":1888,"children":1889},{"class":83,"line":411},[1890],{"type":32,"tag":81,"props":1891,"children":1892},{"style":130},[1893],{"type":37,"value":443},{"type":32,"tag":81,"props":1895,"children":1896},{"class":83,"line":428},[1897],{"type":32,"tag":81,"props":1898,"children":1899},{"emptyLinePlaceholder":450},[1900],{"type":37,"value":453},{"type":32,"tag":81,"props":1902,"children":1903},{"class":83,"line":437},[1904],{"type":32,"tag":81,"props":1905,"children":1906},{"style":88},[1907],{"type":37,"value":1908},"\u002F\u002F ✅ Correcto: solo el popup es cliente\n",{"type":32,"tag":81,"props":1910,"children":1911},{"class":83,"line":446},[1912,1916,1920,1924,1928,1932,1936],{"type":32,"tag":81,"props":1913,"children":1914},{"style":108},[1915],{"type":37,"value":111},{"type":32,"tag":81,"props":1917,"children":1918},{"style":108},[1919],{"type":37,"value":116},{"type":32,"tag":81,"props":1921,"children":1922},{"style":108},[1923],{"type":37,"value":121},{"type":32,"tag":81,"props":1925,"children":1926},{"style":124},[1927],{"type":37,"value":1775},{"type":32,"tag":81,"props":1929,"children":1930},{"style":130},[1931],{"type":37,"value":133},{"type":32,"tag":81,"props":1933,"children":1934},{"style":136},[1935],{"type":37,"value":1784},{"type":32,"tag":81,"props":1937,"children":1938},{"style":130},[1939],{"type":37,"value":144},{"type":32,"tag":81,"props":1941,"children":1942},{"class":83,"line":456},[1943,1947],{"type":32,"tag":81,"props":1944,"children":1945},{"style":108},[1946],{"type":37,"value":213},{"type":32,"tag":81,"props":1948,"children":1949},{"style":130},[1950],{"type":37,"value":218},{"type":32,"tag":81,"props":1952,"children":1953},{"class":83,"line":465},[1954,1958,1962],{"type":32,"tag":81,"props":1955,"children":1956},{"style":130},[1957],{"type":37,"value":227},{"type":32,"tag":81,"props":1959,"children":1960},{"style":230},[1961],{"type":37,"value":233},{"type":32,"tag":81,"props":1963,"children":1964},{"style":130},[1965],{"type":37,"value":252},{"type":32,"tag":81,"props":1967,"children":1968},{"class":83,"line":474},[1969,1973,1977],{"type":32,"tag":81,"props":1970,"children":1971},{"style":130},[1972],{"type":37,"value":261},{"type":32,"tag":81,"props":1974,"children":1975},{"style":161},[1976],{"type":37,"value":1826},{"type":32,"tag":81,"props":1978,"children":1979},{"style":130},[1980],{"type":37,"value":299},{"type":32,"tag":81,"props":1982,"children":1983},{"class":83,"line":506},[1984],{"type":32,"tag":81,"props":1985,"children":1986},{"style":130},[1987],{"type":37,"value":1838},{"type":32,"tag":81,"props":1989,"children":1990},{"class":83,"line":518},[1991,1995,1999],{"type":32,"tag":81,"props":1992,"children":1993},{"style":130},[1994],{"type":37,"value":261},{"type":32,"tag":81,"props":1996,"children":1997},{"style":161},[1998],{"type":37,"value":1850},{"type":32,"tag":81,"props":2000,"children":2001},{"style":130},[2002],{"type":37,"value":299},{"type":32,"tag":81,"props":2004,"children":2005},{"class":83,"line":546},[2006,2010,2014],{"type":32,"tag":81,"props":2007,"children":2008},{"style":130},[2009],{"type":37,"value":417},{"type":32,"tag":81,"props":2011,"children":2012},{"style":230},[2013],{"type":37,"value":233},{"type":32,"tag":81,"props":2015,"children":2016},{"style":130},[2017],{"type":37,"value":252},{"type":32,"tag":81,"props":2019,"children":2020},{"class":83,"line":586},[2021],{"type":32,"tag":81,"props":2022,"children":2023},{"style":130},[2024],{"type":37,"value":434},{"type":32,"tag":81,"props":2026,"children":2027},{"class":83,"line":610},[2028],{"type":32,"tag":81,"props":2029,"children":2030},{"style":130},[2031],{"type":37,"value":443},{"type":32,"tag":81,"props":2033,"children":2034},{"class":83,"line":634},[2035],{"type":32,"tag":81,"props":2036,"children":2037},{"emptyLinePlaceholder":450},[2038],{"type":37,"value":453},{"type":32,"tag":81,"props":2040,"children":2041},{"class":83,"line":661},[2042],{"type":32,"tag":81,"props":2043,"children":2044},{"style":88},[2045],{"type":37,"value":2046},"\u002F\u002F NewsletterPopup.tsx\n",{"type":32,"tag":81,"props":2048,"children":2049},{"class":83,"line":677},[2050],{"type":32,"tag":81,"props":2051,"children":2052},{"style":98},[2053],{"type":37,"value":101},{"type":32,"tag":81,"props":2055,"children":2056},{"class":83,"line":685},[2057,2061,2065,2069,2074],{"type":32,"tag":81,"props":2058,"children":2059},{"style":108},[2060],{"type":37,"value":111},{"type":32,"tag":81,"props":2062,"children":2063},{"style":108},[2064],{"type":37,"value":116},{"type":32,"tag":81,"props":2066,"children":2067},{"style":108},[2068],{"type":37,"value":121},{"type":32,"tag":81,"props":2070,"children":2071},{"style":124},[2072],{"type":37,"value":2073}," NewsletterPopup",{"type":32,"tag":81,"props":2075,"children":2076},{"style":130},[2077],{"type":37,"value":1357},{"type":32,"tag":81,"props":2079,"children":2080},{"class":83,"line":693},[2081],{"type":32,"tag":81,"props":2082,"children":2083},{"style":88},[2084],{"type":37,"value":2085},"  \u002F\u002F Script de Klaviyo aquí\n",{"type":32,"tag":81,"props":2087,"children":2088},{"class":83,"line":701},[2089],{"type":32,"tag":81,"props":2090,"children":2091},{"style":130},[2092],{"type":37,"value":443},{"type":32,"tag":33,"props":2094,"children":2095},{},[2096,2098,2104,2106,2111],{"type":37,"value":2097},"En el segundo ejemplo, ",{"type":32,"tag":57,"props":2099,"children":2101},{"className":2100},[],[2102],{"type":37,"value":2103},"Layout",{"type":37,"value":2105}," permanece como componente servidor, solo ",{"type":32,"tag":57,"props":2107,"children":2109},{"className":2108},[],[2110],{"type":37,"value":1850},{"type":37,"value":2112}," se hidrata. Diferencia de tamaño de bundle: 280KB → 45KB.",{"type":32,"tag":40,"props":2114,"children":2116},{"id":2115},"renderizado-en-edge-y-personalización-basada-en-geolocalización",[2117],{"type":37,"value":2118},"Renderizado en Edge y personalización basada en geolocalización",{"type":32,"tag":33,"props":2120,"children":2121},{},[2122],{"type":37,"value":2123},"Para 2026, Cloudflare Workers, Vercel Edge Functions y Netlify Edge son mainstream. Estas plataformas ejecutan código en aislamientos V8 con cold start \u003C 5ms. Renderizar Server Components en edge es tanto rápido como económico. Pero hay límites: una consulta a base de datos o una llamada a API externa lo ralentiza.",{"type":32,"tag":33,"props":2125,"children":2126},{},[2127],{"type":37,"value":2128},"Ejemplo: mostrar precios según el país del usuario. Si el precio proviene de la base de datos, un round-trip desde edge a origen suma 80-120ms. En este caso, dos estrategias:",{"type":32,"tag":1658,"props":2130,"children":2131},{},[2132,2142],{"type":32,"tag":1662,"props":2133,"children":2134},{},[2135,2140],{"type":32,"tag":1666,"props":2136,"children":2137},{},[2138],{"type":37,"value":2139},"Mantener precios en el KV store de edge",{"type":37,"value":2141}," — ideal para datos con lectura intensiva, escritura poco frecuente (actualización de precios 1-2 veces al día)",{"type":32,"tag":1662,"props":2143,"children":2144},{},[2145,2150],{"type":32,"tag":1666,"props":2146,"children":2147},{},[2148],{"type":37,"value":2149},"Fetch del componente de precio en el cliente",{"type":37,"value":2151}," — el HTML inicial muestra precio general, después de cargar JavaScript llega el precio real",{"type":32,"tag":33,"props":2153,"children":2154},{},[2155],{"type":37,"value":2156},"El segundo enfoque es más simple pero arriesga CLS (Cumulative Layout Shift). Reserva un espacio de 120px para el bloque de precio, muestra un skeleton loader y reemplaza cuando termina el fetch.",{"type":32,"tag":71,"props":2158,"children":2160},{"className":918,"code":2159,"language":920,"meta":16,"style":16},"\u002F\u002F Cloudflare Workers + Nuxt 3.12\nexport default defineEventHandler(async (event) => {\n  const country = event.node.req.headers['cf-ipcountry']\n  const prices = await env.PRICES_KV.get(country, { type: 'json' })\n  return { prices }\n})\n",[2161],{"type":32,"tag":57,"props":2162,"children":2163},{"__ignoreMap":16},[2164,2172,2221,2251,2305,2317],{"type":32,"tag":81,"props":2165,"children":2166},{"class":83,"line":84},[2167],{"type":32,"tag":81,"props":2168,"children":2169},{"style":88},[2170],{"type":37,"value":2171},"\u002F\u002F Cloudflare Workers + Nuxt 3.12\n",{"type":32,"tag":81,"props":2173,"children":2174},{"class":83,"line":94},[2175,2179,2183,2188,2192,2197,2202,2207,2212,2216],{"type":32,"tag":81,"props":2176,"children":2177},{"style":108},[2178],{"type":37,"value":111},{"type":32,"tag":81,"props":2180,"children":2181},{"style":108},[2182],{"type":37,"value":116},{"type":32,"tag":81,"props":2184,"children":2185},{"style":124},[2186],{"type":37,"value":2187}," defineEventHandler",{"type":32,"tag":81,"props":2189,"children":2190},{"style":130},[2191],{"type":37,"value":194},{"type":32,"tag":81,"props":2193,"children":2194},{"style":108},[2195],{"type":37,"value":2196},"async",{"type":32,"tag":81,"props":2198,"children":2199},{"style":130},[2200],{"type":37,"value":2201}," (",{"type":32,"tag":81,"props":2203,"children":2204},{"style":136},[2205],{"type":37,"value":2206},"event",{"type":32,"tag":81,"props":2208,"children":2209},{"style":130},[2210],{"type":37,"value":2211},") ",{"type":32,"tag":81,"props":2213,"children":2214},{"style":108},[2215],{"type":37,"value":381},{"type":32,"tag":81,"props":2217,"children":2218},{"style":130},[2219],{"type":37,"value":2220}," {\n",{"type":32,"tag":81,"props":2222,"children":2223},{"class":83,"line":104},[2224,2228,2233,2237,2242,2247],{"type":32,"tag":81,"props":2225,"children":2226},{"style":108},[2227],{"type":37,"value":153},{"type":32,"tag":81,"props":2229,"children":2230},{"style":161},[2231],{"type":37,"value":2232}," country",{"type":32,"tag":81,"props":2234,"children":2235},{"style":108},[2236],{"type":37,"value":1314},{"type":32,"tag":81,"props":2238,"children":2239},{"style":130},[2240],{"type":37,"value":2241}," event.node.req.headers[",{"type":32,"tag":81,"props":2243,"children":2244},{"style":98},[2245],{"type":37,"value":2246},"'cf-ipcountry'",{"type":32,"tag":81,"props":2248,"children":2249},{"style":130},[2250],{"type":37,"value":1042},{"type":32,"tag":81,"props":2252,"children":2253},{"class":83,"line":147},[2254,2258,2263,2267,2271,2276,2281,2286,2291,2296,2301],{"type":32,"tag":81,"props":2255,"children":2256},{"style":108},[2257],{"type":37,"value":153},{"type":32,"tag":81,"props":2259,"children":2260},{"style":161},[2261],{"type":37,"value":2262}," prices",{"type":32,"tag":81,"props":2264,"children":2265},{"style":108},[2266],{"type":37,"value":1314},{"type":32,"tag":81,"props":2268,"children":2269},{"style":108},[2270],{"type":37,"value":1378},{"type":32,"tag":81,"props":2272,"children":2273},{"style":130},[2274],{"type":37,"value":2275}," env.",{"type":32,"tag":81,"props":2277,"children":2278},{"style":161},[2279],{"type":37,"value":2280},"PRICES_KV",{"type":32,"tag":81,"props":2282,"children":2283},{"style":130},[2284],{"type":37,"value":2285},".",{"type":32,"tag":81,"props":2287,"children":2288},{"style":124},[2289],{"type":37,"value":2290},"get",{"type":32,"tag":81,"props":2292,"children":2293},{"style":130},[2294],{"type":37,"value":2295},"(country, { type: ",{"type":32,"tag":81,"props":2297,"children":2298},{"style":98},[2299],{"type":37,"value":2300},"'json'",{"type":32,"tag":81,"props":2302,"children":2303},{"style":130},[2304],{"type":37,"value":1633},{"type":32,"tag":81,"props":2306,"children":2307},{"class":83,"line":207},[2308,2312],{"type":32,"tag":81,"props":2309,"children":2310},{"style":108},[2311],{"type":37,"value":213},{"type":32,"tag":81,"props":2313,"children":2314},{"style":130},[2315],{"type":37,"value":2316}," { prices }\n",{"type":32,"tag":81,"props":2318,"children":2319},{"class":83,"line":221},[2320],{"type":32,"tag":81,"props":2321,"children":2322},{"style":130},[2323],{"type":37,"value":1066},{"type":32,"tag":33,"props":2325,"children":2326},{},[2327],{"type":37,"value":2328},"La latencia de lectura de Cloudflare KV promedia 30ms. El precio se devuelve sin ir a la base de datos de origen. Con este enfoque, la página del producto puede ser completamente un componente servidor, sin hidratación, TBT 0ms.",{"type":32,"tag":40,"props":2330,"children":2332},{"id":2331},"matriz-de-compensaciones-qué-patrón-cuándo",[2333],{"type":37,"value":2334},"Matriz de compensaciones: qué patrón, cuándo",{"type":32,"tag":1124,"props":2336,"children":2337},{},[2338,2368],{"type":32,"tag":1128,"props":2339,"children":2340},{},[2341],{"type":32,"tag":1132,"props":2342,"children":2343},{},[2344,2349,2354,2359,2363],{"type":32,"tag":1136,"props":2345,"children":2346},{},[2347],{"type":37,"value":2348},"Situación",{"type":32,"tag":1136,"props":2350,"children":2351},{},[2352],{"type":37,"value":2353},"Patrón recomendado",{"type":32,"tag":1136,"props":2355,"children":2356},{},[2357],{"type":37,"value":2358},"Bundle",{"type":32,"tag":1136,"props":2360,"children":2361},{},[2362],{"type":37,"value":1214},{"type":32,"tag":1136,"props":2364,"children":2365},{},[2366],{"type":37,"value":2367},"Compensación",{"type":32,"tag":1157,"props":2369,"children":2370},{},[2371,2397,2422,2447,2475],{"type":32,"tag":1132,"props":2372,"children":2373},{},[2374,2379,2384,2388,2392],{"type":32,"tag":1164,"props":2375,"children":2376},{},[2377],{"type":37,"value":2378},"Blog estático, documentación",{"type":32,"tag":1164,"props":2380,"children":2381},{},[2382],{"type":37,"value":2383},"Solo servidor",{"type":32,"tag":1164,"props":2385,"children":2386},{},[2387],{"type":37,"value":1251},{"type":32,"tag":1164,"props":2389,"children":2390},{},[2391],{"type":37,"value":1228},{"type":32,"tag":1164,"props":2393,"children":2394},{},[2395],{"type":37,"value":2396},"Sin elementos interactivos",{"type":32,"tag":1132,"props":2398,"children":2399},{},[2400,2405,2409,2413,2417],{"type":32,"tag":1164,"props":2401,"children":2402},{},[2403],{"type":37,"value":2404},"Lista de productos de e-commerce",{"type":32,"tag":1164,"props":2406,"children":2407},{},[2408],{"type":37,"value":1150},{"type":32,"tag":1164,"props":2410,"children":2411},{},[2412],{"type":37,"value":1246},{"type":32,"tag":1164,"props":2414,"children":2415},{},[2416],{"type":37,"value":1223},{"type":32,"tag":1164,"props":2418,"children":2419},{},[2420],{"type":37,"value":2421},"Sin hidratación fuera del botón",{"type":32,"tag":1132,"props":2423,"children":2424},{},[2425,2430,2434,2438,2442],{"type":32,"tag":1164,"props":2426,"children":2427},{},[2428],{"type":37,"value":2429},"Dashboard, panel admin",{"type":32,"tag":1164,"props":2431,"children":2432},{},[2433],{"type":37,"value":1145},{"type":32,"tag":1164,"props":2435,"children":2436},{},[2437],{"type":37,"value":1241},{"type":32,"tag":1164,"props":2439,"children":2440},{},[2441],{"type":37,"value":1183},{"type":32,"tag":1164,"props":2443,"children":2444},{},[2445],{"type":37,"value":2446},"Todos los datos dinámicos, sin caché",{"type":32,"tag":1132,"props":2448,"children":2449},{},[2450,2455,2460,2465,2470],{"type":32,"tag":1164,"props":2451,"children":2452},{},[2453],{"type":37,"value":2454},"Landing page + formulario",{"type":32,"tag":1164,"props":2456,"children":2457},{},[2458],{"type":37,"value":2459},"Servidor + formulario cliente",{"type":32,"tag":1164,"props":2461,"children":2462},{},[2463],{"type":37,"value":2464},"60KB",{"type":32,"tag":1164,"props":2466,"children":2467},{},[2468],{"type":37,"value":2469},"80ms",{"type":32,"tag":1164,"props":2471,"children":2472},{},[2473],{"type":37,"value":2474},"Validación de formulario en cliente",{"type":32,"tag":1132,"props":2476,"children":2477},{},[2478,2483,2488,2493,2498],{"type":32,"tag":1164,"props":2479,"children":2480},{},[2481],{"type":37,"value":2482},"Precios basados en geolocalización",{"type":32,"tag":1164,"props":2484,"children":2485},{},[2486],{"type":37,"value":2487},"SSR en Edge + KV",{"type":32,"tag":1164,"props":2489,"children":2490},{},[2491],{"type":37,"value":2492},"30KB",{"type":32,"tag":1164,"props":2494,"children":2495},{},[2496],{"type":37,"value":2497},"20ms",{"type":32,"tag":1164,"props":2499,"children":2500},{},[2501],{"type":37,"value":2502},"Limitación de escritura en KV",{"type":32,"tag":33,"props":2504,"children":2505},{},[2506],{"type":37,"value":2507},"En los proyectos de Roibase, típicamente usamos \"hidratación selectiva\". Porque la mayoría de sitios de comercio electrónico tienen tanto contenido estático (descripción de producto, imágenes) como elementos interactivos (carrito, filtro). Renderizado completo en servidor no es práctico en comercio electrónico, renderizado completo en cliente afecta Core Web Vitals.",{"type":32,"tag":40,"props":2509,"children":2511},{"id":2510},"qué-debes-hacer-ahora-en-tu-proyecto",[2512],{"type":37,"value":2513},"Qué debes hacer ahora en tu proyecto",{"type":32,"tag":33,"props":2515,"children":2516},{},[2517],{"type":37,"value":2518},"Si tu proyecto actual está en Next.js Pages Router o Nuxt 2, reescribir no es urgente. Pero cuando agregues nuevas características, usa App Router (Next.js 15+) o Nuxt 3.12+. Un enfoque híbrido es posible: migra las páginas críticas (checkout, detalle de producto) a la nueva arquitectura, deja blog y páginas estáticas en la anterior.",{"type":32,"tag":33,"props":2520,"children":2521},{},[2522],{"type":37,"value":2523},"Si comienzas un proyecto nuevo:",{"type":32,"tag":1658,"props":2525,"children":2526},{},[2527,2532,2537,2542,2547],{"type":32,"tag":1662,"props":2528,"children":2529},{},[2530],{"type":37,"value":2531},"Haz un inventario de componentes — cuál es interactivo, cuál estático",{"type":32,"tag":1662,"props":2533,"children":2534},{},[2535],{"type":37,"value":2536},"Marca los interactivos como componentes cliente",{"type":32,"tag":1662,"props":2538,"children":2539},{},[2540],{"type":37,"value":2541},"El resto, componentes servidor",{"type":32,"tag":1662,"props":2543,"children":2544},{},[2545],{"type":37,"value":2546},"Mide TBT con Chrome DevTools Profiler, objetivo \u003C 200ms",{"type":32,"tag":1662,"props":2548,"children":2549},{},[2550],{"type":37,"value":2551},"Si TBT sigue alto, reduce el estado en los componentes cliente",{"type":32,"tag":33,"props":2553,"children":2554},{},[2555],{"type":37,"value":2556},"En la arquitectura de comercio headless, estas decisiones son más críticas. Porque el servidor SSR generalmente trae datos de un backend SaaS como Shopify. Si haces mucho fetch en el cliente, chocas contra el rate limit. Si haces mucho renderizado en servidor, TTFB (Time to First Byte) sube. El equilibrio: datos críticos (stock, precio) en componente servidor, datos de usuario (carrito, wishlist) en componente cliente.",{"type":32,"tag":2558,"props":2559,"children":2560},"style",{},[2561],{"type":37,"value":2562},"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);}",{"title":16,"searchDepth":104,"depth":104,"links":2564},[2565,2568,2571,2572,2573,2574],{"id":42,"depth":94,"text":45,"children":2566},[2567],{"id":870,"depth":104,"text":873},{"id":1114,"depth":94,"text":1117,"children":2569},[2570],{"id":1264,"depth":104,"text":1267},{"id":1648,"depth":94,"text":1651},{"id":2115,"depth":94,"text":2118},{"id":2331,"depth":94,"text":2334},{"id":2510,"depth":94,"text":2513},"markdown","content:es:tech:server-components-vs-client-2026.md","content","es\u002Ftech\u002Fserver-components-vs-client-2026.md","es\u002Ftech\u002Fserver-components-vs-client-2026","md",1780898614045]