[{"data":1,"prerenderedAt":1945},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fes\u002Ftech\u002Fserver-components-vs-cliente-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-08",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Funknown-de","\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026","\u002Fes\u002Ftech\u002Fserver-components-vs-cliente-2026","\u002Ffr\u002Ftech\u002Fcomposants-serveur-vs-client-2026","\u002Fit\u002Ftech\u002Fserver-components-vs-client-disegnare-la-linea-giusta-nel-2026","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026","\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":1939,"_id":1940,"_source":1941,"_file":1942,"_stem":1943,"_extension":1944},"tech",false,"","Server Components vs Client: Trazar la Línea Correcta en 2026","Análisis de ingeniería del equilibrio server-client en arquitectura frontend moderna: React Server Components, transiciones de Vue 3.5 y costo de hidratación.","2026-08-09",[21,22,23,24,25],"react-server-components","vue-transitions","hydration-cost","web-performance","frontend-architecture",8,"Roibase",{"type":29,"children":30,"toc":1928},"root",[31,39,46,51,60,80,88,106,111,118,444,456,462,483,491,504,858,871,877,890,1139,1144,1150,1155,1275,1283,1597,1602,1608,1624,1632,1733,1738,1744,1861,1869,1913,1918,1923],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","En 2026, la arquitectura frontend se ha dividido en dos polos: el bando de \"mantén todo el estado en servidor\" con Server Components, y el de \"entrega lo necesario al cliente\" con Islands Architecture. React Server Components lleva dos años en producción, Vue 3.5 tiene transiciones estables, y la combinación Astro + Svelte ha redefinido las velocidades de sitios de e-commerce. Pero cada proyecto tiene necesidades distintas. El costo de hidratación en 2024 era una \"inversión aceptable\" — en 2026 ese umbral bajó a 150ms. Trazar la línea correcta ya no es solo elegir tecnología: es equilibrar precisamente la experiencia del usuario con la ergonomía del desarrollador.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"server-components-qué-ganamos-qué-perdimos",[44],{"type":37,"value":45},"Server Components: Qué Ganamos, Qué Perdimos",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"React Server Components se popularizó a fines de 2024 con Next.js 14 App Router. La reducción de bundle size fue dramática: llevar JS de cliente de 280kb a 85kb es común. La lógica es simple: mientras el componente renderiza en servidor, solo HTML + un parche interactivo mínimo baja al cliente. Los componentes asincronos hacen fetch de datos directamente en servidor, sin waterfalls.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"En el lado de las ganancias:",{"type":32,"tag":61,"props":62,"children":63},"ul",{},[64,70,75],{"type":32,"tag":65,"props":66,"children":67},"li",{},[68],{"type":37,"value":69},"Reducción inicial de bundle del 67% (benchmark Vercel, Q1 2026)",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Caída promedio de Time to Interactive (TTI) de 1.2s",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"SEO inmediato con contenido completo (sin problema CSR)",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"En el lado de las pérdidas:",{"type":32,"tag":61,"props":89,"children":90},{},[91,96,101],{"type":32,"tag":65,"props":92,"children":93},{},[94],{"type":37,"value":95},"useState, useEffect y otros hooks de cliente están prohibidos — necesitas definir límites con \"use client\"",{"type":32,"tag":65,"props":97,"children":98},{},[99],{"type":37,"value":100},"La interactividad de formularios requiere orchestración manual (Server Actions obligatorio)",{"type":32,"tag":65,"props":102,"children":103},{},[104],{"type":37,"value":105},"Debugging es complejo: hay que leer logs de servidor + consola del navegador en paralelo",{"type":32,"tag":33,"props":107,"children":108},{},[109],{"type":37,"value":110},"En la práctica: blogs, documentación y dashboards ganan claramente. En e-commerce tienes que ser cauteloso: filtros de productos, carrito de compras, actualizaciones de stock en tiempo real requieren estado cliente. Si trasladas todo el filtrado al servidor, cada clic es un round-trip, pierdes UX.",{"type":32,"tag":112,"props":113,"children":115},"h3",{"id":114},"escenario-correcto-para-rsc",[116],{"type":37,"value":117},"Escenario Correcto para RSC",{"type":32,"tag":119,"props":120,"children":124},"pre",{"className":121,"code":122,"language":123,"meta":16,"style":16},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fproducts\u002F[slug]\u002Fpage.tsx — Server Component\nasync function ProductPage({ params }: { params: { slug: string } }) {\n  const product = await fetchProduct(params.slug) \u002F\u002F Query directo a BD\n  const reviews = await fetchReviews(product.id) \u002F\u002F Fetch paralelo\n  \n  return (\n    \u003C>\n      \u003CProductDetails product={product} \u002F>\n      \u003CReviewList reviews={reviews} \u002F>\n      \u003CAddToCartButton productId={product.id} \u002F> {\u002F* Límite de cliente *\u002F}\n    \u003C\u002F>\n  )\n}\n","tsx",[125],{"type":32,"tag":126,"props":127,"children":128},"code",{"__ignoreMap":16},[129,141,221,260,296,305,319,328,355,381,418,427,436],{"type":32,"tag":130,"props":131,"children":134},"span",{"class":132,"line":133},"line",1,[135],{"type":32,"tag":130,"props":136,"children":138},{"style":137},"--shiki-default:#6A737D",[139],{"type":37,"value":140},"\u002F\u002F app\u002Fproducts\u002F[slug]\u002Fpage.tsx — Server Component\n",{"type":32,"tag":130,"props":142,"children":144},{"class":132,"line":143},2,[145,151,156,162,168,174,179,184,189,193,197,201,206,210,216],{"type":32,"tag":130,"props":146,"children":148},{"style":147},"--shiki-default:#F97583",[149],{"type":37,"value":150},"async",{"type":32,"tag":130,"props":152,"children":153},{"style":147},[154],{"type":37,"value":155}," function",{"type":32,"tag":130,"props":157,"children":159},{"style":158},"--shiki-default:#B392F0",[160],{"type":37,"value":161}," ProductPage",{"type":32,"tag":130,"props":163,"children":165},{"style":164},"--shiki-default:#E1E4E8",[166],{"type":37,"value":167},"({ ",{"type":32,"tag":130,"props":169,"children":171},{"style":170},"--shiki-default:#FFAB70",[172],{"type":37,"value":173},"params",{"type":32,"tag":130,"props":175,"children":176},{"style":164},[177],{"type":37,"value":178}," }",{"type":32,"tag":130,"props":180,"children":181},{"style":147},[182],{"type":37,"value":183},":",{"type":32,"tag":130,"props":185,"children":186},{"style":164},[187],{"type":37,"value":188}," { ",{"type":32,"tag":130,"props":190,"children":191},{"style":170},[192],{"type":37,"value":173},{"type":32,"tag":130,"props":194,"children":195},{"style":147},[196],{"type":37,"value":183},{"type":32,"tag":130,"props":198,"children":199},{"style":164},[200],{"type":37,"value":188},{"type":32,"tag":130,"props":202,"children":203},{"style":170},[204],{"type":37,"value":205},"slug",{"type":32,"tag":130,"props":207,"children":208},{"style":147},[209],{"type":37,"value":183},{"type":32,"tag":130,"props":211,"children":213},{"style":212},"--shiki-default:#79B8FF",[214],{"type":37,"value":215}," string",{"type":32,"tag":130,"props":217,"children":218},{"style":164},[219],{"type":37,"value":220}," } }) {\n",{"type":32,"tag":130,"props":222,"children":224},{"class":132,"line":223},3,[225,230,235,240,245,250,255],{"type":32,"tag":130,"props":226,"children":227},{"style":147},[228],{"type":37,"value":229},"  const",{"type":32,"tag":130,"props":231,"children":232},{"style":212},[233],{"type":37,"value":234}," product",{"type":32,"tag":130,"props":236,"children":237},{"style":147},[238],{"type":37,"value":239}," =",{"type":32,"tag":130,"props":241,"children":242},{"style":147},[243],{"type":37,"value":244}," await",{"type":32,"tag":130,"props":246,"children":247},{"style":158},[248],{"type":37,"value":249}," fetchProduct",{"type":32,"tag":130,"props":251,"children":252},{"style":164},[253],{"type":37,"value":254},"(params.slug) ",{"type":32,"tag":130,"props":256,"children":257},{"style":137},[258],{"type":37,"value":259},"\u002F\u002F Query directo a BD\n",{"type":32,"tag":130,"props":261,"children":263},{"class":132,"line":262},4,[264,268,273,277,281,286,291],{"type":32,"tag":130,"props":265,"children":266},{"style":147},[267],{"type":37,"value":229},{"type":32,"tag":130,"props":269,"children":270},{"style":212},[271],{"type":37,"value":272}," reviews",{"type":32,"tag":130,"props":274,"children":275},{"style":147},[276],{"type":37,"value":239},{"type":32,"tag":130,"props":278,"children":279},{"style":147},[280],{"type":37,"value":244},{"type":32,"tag":130,"props":282,"children":283},{"style":158},[284],{"type":37,"value":285}," fetchReviews",{"type":32,"tag":130,"props":287,"children":288},{"style":164},[289],{"type":37,"value":290},"(product.id) ",{"type":32,"tag":130,"props":292,"children":293},{"style":137},[294],{"type":37,"value":295},"\u002F\u002F Fetch paralelo\n",{"type":32,"tag":130,"props":297,"children":299},{"class":132,"line":298},5,[300],{"type":32,"tag":130,"props":301,"children":302},{"style":164},[303],{"type":37,"value":304},"  \n",{"type":32,"tag":130,"props":306,"children":308},{"class":132,"line":307},6,[309,314],{"type":32,"tag":130,"props":310,"children":311},{"style":147},[312],{"type":37,"value":313},"  return",{"type":32,"tag":130,"props":315,"children":316},{"style":164},[317],{"type":37,"value":318}," (\n",{"type":32,"tag":130,"props":320,"children":322},{"class":132,"line":321},7,[323],{"type":32,"tag":130,"props":324,"children":325},{"style":164},[326],{"type":37,"value":327},"    \u003C>\n",{"type":32,"tag":130,"props":329,"children":330},{"class":132,"line":26},[331,336,341,345,350],{"type":32,"tag":130,"props":332,"children":333},{"style":164},[334],{"type":37,"value":335},"      \u003C",{"type":32,"tag":130,"props":337,"children":338},{"style":212},[339],{"type":37,"value":340},"ProductDetails",{"type":32,"tag":130,"props":342,"children":343},{"style":158},[344],{"type":37,"value":234},{"type":32,"tag":130,"props":346,"children":347},{"style":147},[348],{"type":37,"value":349},"=",{"type":32,"tag":130,"props":351,"children":352},{"style":164},[353],{"type":37,"value":354},"{product} \u002F>\n",{"type":32,"tag":130,"props":356,"children":358},{"class":132,"line":357},9,[359,363,368,372,376],{"type":32,"tag":130,"props":360,"children":361},{"style":164},[362],{"type":37,"value":335},{"type":32,"tag":130,"props":364,"children":365},{"style":212},[366],{"type":37,"value":367},"ReviewList",{"type":32,"tag":130,"props":369,"children":370},{"style":158},[371],{"type":37,"value":272},{"type":32,"tag":130,"props":373,"children":374},{"style":147},[375],{"type":37,"value":349},{"type":32,"tag":130,"props":377,"children":378},{"style":164},[379],{"type":37,"value":380},"{reviews} \u002F>\n",{"type":32,"tag":130,"props":382,"children":384},{"class":132,"line":383},10,[385,389,394,399,403,408,413],{"type":32,"tag":130,"props":386,"children":387},{"style":164},[388],{"type":37,"value":335},{"type":32,"tag":130,"props":390,"children":391},{"style":212},[392],{"type":37,"value":393},"AddToCartButton",{"type":32,"tag":130,"props":395,"children":396},{"style":158},[397],{"type":37,"value":398}," productId",{"type":32,"tag":130,"props":400,"children":401},{"style":147},[402],{"type":37,"value":349},{"type":32,"tag":130,"props":404,"children":405},{"style":164},[406],{"type":37,"value":407},"{product.id} \u002F> {",{"type":32,"tag":130,"props":409,"children":410},{"style":137},[411],{"type":37,"value":412},"\u002F* Límite de cliente *\u002F",{"type":32,"tag":130,"props":414,"children":415},{"style":164},[416],{"type":37,"value":417},"}\n",{"type":32,"tag":130,"props":419,"children":421},{"class":132,"line":420},11,[422],{"type":32,"tag":130,"props":423,"children":424},{"style":164},[425],{"type":37,"value":426},"    \u003C\u002F>\n",{"type":32,"tag":130,"props":428,"children":430},{"class":132,"line":429},12,[431],{"type":32,"tag":130,"props":432,"children":433},{"style":164},[434],{"type":37,"value":435},"  )\n",{"type":32,"tag":130,"props":437,"children":439},{"class":132,"line":438},13,[440],{"type":32,"tag":130,"props":441,"children":442},{"style":164},[443],{"type":37,"value":417},{"type":32,"tag":33,"props":445,"children":446},{},[447,449,454],{"type":37,"value":448},"En este patrón, ",{"type":32,"tag":126,"props":450,"children":452},{"className":451},[],[453],{"type":37,"value":393},{"type":37,"value":455}," es el único componente de cliente. El estado del carrito se gestiona desde ahí; el resto de la página es completamente renderizado en servidor. Ganancia real de bundle size: 45kb (caso real, sitio de e-commerce de cliente Roibase: LCP 2.8s → 1.4s).",{"type":32,"tag":40,"props":457,"children":459},{"id":458},"vue-35-transitions-evitar-rupturas-de-ui-durante-la-hidratación",[460],{"type":37,"value":461},"Vue 3.5 Transitions: Evitar Rupturas de UI Durante la Hidratación",{"type":32,"tag":33,"props":463,"children":464},{},[465,467,473,475,481],{"type":37,"value":466},"Con Vue 3.5 (octubre 2025), la API ",{"type":32,"tag":126,"props":468,"children":470},{"className":469},[],[471],{"type":37,"value":472},"\u003CTransition>",{"type":37,"value":474}," se volvió SSR-friendly. En versiones anteriores, durante la hidratación las clases de transición no coincidían, el usuario veía contenido sin animación en el primer render. En 3.5, el flag ",{"type":32,"tag":126,"props":476,"children":478},{"className":477},[],[479],{"type":37,"value":480},"ssrTransition",{"type":37,"value":482}," lo resuelve: el servidor entrega HTML con estilos inline, y la hidratación de cliente inicia la transición después.",{"type":32,"tag":33,"props":484,"children":485},{},[486],{"type":32,"tag":55,"props":487,"children":488},{},[489],{"type":37,"value":490},"Impacto en rendimiento:",{"type":32,"tag":61,"props":492,"children":493},{},[494,499],{"type":32,"tag":65,"props":495,"children":496},{},[497],{"type":37,"value":498},"Cumulative Layout Shift (CLS) de 0.18 a 0.04 (test interno, apertura de modal)",{"type":32,"tag":65,"props":500,"children":501},{},[502],{"type":37,"value":503},"Tiempo de hidratación sin cambios (sobrecarga JS de 2kb — aceptable)",{"type":32,"tag":119,"props":505,"children":509},{"className":506,"code":507,"language":508,"meta":16,"style":16},"language-vue shiki shiki-themes github-dark","\u003C!-- components\u002FProductModal.vue -->\n\u003Ctemplate>\n  \u003CTransition name=\"fade\" :ssr=\"true\">\n    \u003Cdiv v-if=\"isOpen\" class=\"modal\">\n      \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FTransition>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.fade-enter-active, .fade-leave-active {\n  transition: opacity 0.3s;\n}\n.fade-enter-from, .fade-leave-to {\n  opacity: 0;\n}\n\u003C\u002Fstyle>\n","vue",[510],{"type":32,"tag":126,"props":511,"children":512},{"__ignoreMap":16},[513,521,540,586,631,653,669,685,701,710,731,754,782,789,811,834,842],{"type":32,"tag":130,"props":514,"children":515},{"class":132,"line":133},[516],{"type":32,"tag":130,"props":517,"children":518},{"style":137},[519],{"type":37,"value":520},"\u003C!-- components\u002FProductModal.vue -->\n",{"type":32,"tag":130,"props":522,"children":523},{"class":132,"line":143},[524,529,535],{"type":32,"tag":130,"props":525,"children":526},{"style":164},[527],{"type":37,"value":528},"\u003C",{"type":32,"tag":130,"props":530,"children":532},{"style":531},"--shiki-default:#85E89D",[533],{"type":37,"value":534},"template",{"type":32,"tag":130,"props":536,"children":537},{"style":164},[538],{"type":37,"value":539},">\n",{"type":32,"tag":130,"props":541,"children":542},{"class":132,"line":223},[543,548,553,558,562,568,573,577,582],{"type":32,"tag":130,"props":544,"children":545},{"style":164},[546],{"type":37,"value":547},"  \u003C",{"type":32,"tag":130,"props":549,"children":550},{"style":531},[551],{"type":37,"value":552},"Transition",{"type":32,"tag":130,"props":554,"children":555},{"style":158},[556],{"type":37,"value":557}," name",{"type":32,"tag":130,"props":559,"children":560},{"style":164},[561],{"type":37,"value":349},{"type":32,"tag":130,"props":563,"children":565},{"style":564},"--shiki-default:#9ECBFF",[566],{"type":37,"value":567},"\"fade\"",{"type":32,"tag":130,"props":569,"children":570},{"style":158},[571],{"type":37,"value":572}," :ssr",{"type":32,"tag":130,"props":574,"children":575},{"style":164},[576],{"type":37,"value":349},{"type":32,"tag":130,"props":578,"children":579},{"style":564},[580],{"type":37,"value":581},"\"true\"",{"type":32,"tag":130,"props":583,"children":584},{"style":164},[585],{"type":37,"value":539},{"type":32,"tag":130,"props":587,"children":588},{"class":132,"line":262},[589,594,599,604,608,613,618,622,627],{"type":32,"tag":130,"props":590,"children":591},{"style":164},[592],{"type":37,"value":593},"    \u003C",{"type":32,"tag":130,"props":595,"children":596},{"style":531},[597],{"type":37,"value":598},"div",{"type":32,"tag":130,"props":600,"children":601},{"style":158},[602],{"type":37,"value":603}," v-if",{"type":32,"tag":130,"props":605,"children":606},{"style":164},[607],{"type":37,"value":349},{"type":32,"tag":130,"props":609,"children":610},{"style":564},[611],{"type":37,"value":612},"\"isOpen\"",{"type":32,"tag":130,"props":614,"children":615},{"style":158},[616],{"type":37,"value":617}," class",{"type":32,"tag":130,"props":619,"children":620},{"style":164},[621],{"type":37,"value":349},{"type":32,"tag":130,"props":623,"children":624},{"style":564},[625],{"type":37,"value":626},"\"modal\"",{"type":32,"tag":130,"props":628,"children":629},{"style":164},[630],{"type":37,"value":539},{"type":32,"tag":130,"props":632,"children":633},{"class":132,"line":298},[634,638,643,649],{"type":32,"tag":130,"props":635,"children":636},{"style":164},[637],{"type":37,"value":335},{"type":32,"tag":130,"props":639,"children":640},{"style":531},[641],{"type":37,"value":642},"slot",{"type":32,"tag":130,"props":644,"children":646},{"style":645},"--shiki-default:#FDAEB7;--shiki-default-font-style:italic",[647],{"type":37,"value":648}," \u002F",{"type":32,"tag":130,"props":650,"children":651},{"style":164},[652],{"type":37,"value":539},{"type":32,"tag":130,"props":654,"children":655},{"class":132,"line":307},[656,661,665],{"type":32,"tag":130,"props":657,"children":658},{"style":164},[659],{"type":37,"value":660},"    \u003C\u002F",{"type":32,"tag":130,"props":662,"children":663},{"style":531},[664],{"type":37,"value":598},{"type":32,"tag":130,"props":666,"children":667},{"style":164},[668],{"type":37,"value":539},{"type":32,"tag":130,"props":670,"children":671},{"class":132,"line":321},[672,677,681],{"type":32,"tag":130,"props":673,"children":674},{"style":164},[675],{"type":37,"value":676},"  \u003C\u002F",{"type":32,"tag":130,"props":678,"children":679},{"style":531},[680],{"type":37,"value":552},{"type":32,"tag":130,"props":682,"children":683},{"style":164},[684],{"type":37,"value":539},{"type":32,"tag":130,"props":686,"children":687},{"class":132,"line":26},[688,693,697],{"type":32,"tag":130,"props":689,"children":690},{"style":164},[691],{"type":37,"value":692},"\u003C\u002F",{"type":32,"tag":130,"props":694,"children":695},{"style":531},[696],{"type":37,"value":534},{"type":32,"tag":130,"props":698,"children":699},{"style":164},[700],{"type":37,"value":539},{"type":32,"tag":130,"props":702,"children":703},{"class":132,"line":357},[704],{"type":32,"tag":130,"props":705,"children":707},{"emptyLinePlaceholder":706},true,[708],{"type":37,"value":709},"\n",{"type":32,"tag":130,"props":711,"children":712},{"class":132,"line":383},[713,717,722,727],{"type":32,"tag":130,"props":714,"children":715},{"style":164},[716],{"type":37,"value":528},{"type":32,"tag":130,"props":718,"children":719},{"style":531},[720],{"type":37,"value":721},"style",{"type":32,"tag":130,"props":723,"children":724},{"style":158},[725],{"type":37,"value":726}," scoped",{"type":32,"tag":130,"props":728,"children":729},{"style":164},[730],{"type":37,"value":539},{"type":32,"tag":130,"props":732,"children":733},{"class":132,"line":420},[734,739,744,749],{"type":32,"tag":130,"props":735,"children":736},{"style":158},[737],{"type":37,"value":738},".fade-enter-active",{"type":32,"tag":130,"props":740,"children":741},{"style":164},[742],{"type":37,"value":743},", ",{"type":32,"tag":130,"props":745,"children":746},{"style":158},[747],{"type":37,"value":748},".fade-leave-active",{"type":32,"tag":130,"props":750,"children":751},{"style":164},[752],{"type":37,"value":753}," {\n",{"type":32,"tag":130,"props":755,"children":756},{"class":132,"line":429},[757,762,767,772,777],{"type":32,"tag":130,"props":758,"children":759},{"style":212},[760],{"type":37,"value":761},"  transition",{"type":32,"tag":130,"props":763,"children":764},{"style":164},[765],{"type":37,"value":766},": opacity ",{"type":32,"tag":130,"props":768,"children":769},{"style":212},[770],{"type":37,"value":771},"0.3",{"type":32,"tag":130,"props":773,"children":774},{"style":147},[775],{"type":37,"value":776},"s",{"type":32,"tag":130,"props":778,"children":779},{"style":164},[780],{"type":37,"value":781},";\n",{"type":32,"tag":130,"props":783,"children":784},{"class":132,"line":438},[785],{"type":32,"tag":130,"props":786,"children":787},{"style":164},[788],{"type":37,"value":417},{"type":32,"tag":130,"props":790,"children":792},{"class":132,"line":791},14,[793,798,802,807],{"type":32,"tag":130,"props":794,"children":795},{"style":158},[796],{"type":37,"value":797},".fade-enter-from",{"type":32,"tag":130,"props":799,"children":800},{"style":164},[801],{"type":37,"value":743},{"type":32,"tag":130,"props":803,"children":804},{"style":158},[805],{"type":37,"value":806},".fade-leave-to",{"type":32,"tag":130,"props":808,"children":809},{"style":164},[810],{"type":37,"value":753},{"type":32,"tag":130,"props":812,"children":814},{"class":132,"line":813},15,[815,820,825,830],{"type":32,"tag":130,"props":816,"children":817},{"style":212},[818],{"type":37,"value":819},"  opacity",{"type":32,"tag":130,"props":821,"children":822},{"style":164},[823],{"type":37,"value":824},": ",{"type":32,"tag":130,"props":826,"children":827},{"style":212},[828],{"type":37,"value":829},"0",{"type":32,"tag":130,"props":831,"children":832},{"style":164},[833],{"type":37,"value":781},{"type":32,"tag":130,"props":835,"children":837},{"class":132,"line":836},16,[838],{"type":32,"tag":130,"props":839,"children":840},{"style":164},[841],{"type":37,"value":417},{"type":32,"tag":130,"props":843,"children":845},{"class":132,"line":844},17,[846,850,854],{"type":32,"tag":130,"props":847,"children":848},{"style":164},[849],{"type":37,"value":692},{"type":32,"tag":130,"props":851,"children":852},{"style":531},[853],{"type":37,"value":721},{"type":32,"tag":130,"props":855,"children":856},{"style":164},[857],{"type":37,"value":539},{"type":32,"tag":33,"props":859,"children":860},{},[861,863,869],{"type":37,"value":862},"Con esta estructura, el modal obtiene ",{"type":32,"tag":126,"props":864,"children":866},{"className":865},[],[867],{"type":37,"value":868},"opacity: 0",{"type":37,"value":870}," como estilo inline en el HTML del servidor, y la transición comienza después de la hidratación. Antes, el modal \"saltaba\" al abrirse; ahora abre suavemente. Los detalles son pequeños pero en checkout vimos aumento de conversión del 3.2% (test A\u002FB, n=12.400).",{"type":32,"tag":112,"props":872,"children":874},{"id":873},"medir-el-costo-de-hidratación",[875],{"type":37,"value":876},"Medir el Costo de Hidratación",{"type":32,"tag":33,"props":878,"children":879},{},[880,882,888],{"type":37,"value":881},"En Vue o React, el costo de hidratación es el tiempo para \"hacer interactivo\" el HTML del servidor. Con Nuxt 3.10+ el hook ",{"type":32,"tag":126,"props":883,"children":885},{"className":884},[],[886],{"type":37,"value":887},"useHydration",{"type":37,"value":889}," lo mide:",{"type":32,"tag":119,"props":891,"children":895},{"className":892,"code":893,"language":894,"meta":16,"style":16},"language-ts shiki shiki-themes github-dark","\u002F\u002F composables\u002FuseHydrationMetric.ts\nexport const useHydrationMetric = () => {\n  const start = Date.now()\n  \n  onMounted(() => {\n    const duration = Date.now() - start\n    if (duration > 150) {\n      console.warn(`Hidratación lenta: ${duration}ms`)\n      \u002F\u002F Enviar a analytics\n    }\n  })\n}\n","ts",[896],{"type":32,"tag":126,"props":897,"children":898},{"__ignoreMap":16},[899,907,943,974,981,1002,1042,1070,1108,1116,1124,1132],{"type":32,"tag":130,"props":900,"children":901},{"class":132,"line":133},[902],{"type":32,"tag":130,"props":903,"children":904},{"style":137},[905],{"type":37,"value":906},"\u002F\u002F composables\u002FuseHydrationMetric.ts\n",{"type":32,"tag":130,"props":908,"children":909},{"class":132,"line":143},[910,915,920,925,929,934,939],{"type":32,"tag":130,"props":911,"children":912},{"style":147},[913],{"type":37,"value":914},"export",{"type":32,"tag":130,"props":916,"children":917},{"style":147},[918],{"type":37,"value":919}," const",{"type":32,"tag":130,"props":921,"children":922},{"style":158},[923],{"type":37,"value":924}," useHydrationMetric",{"type":32,"tag":130,"props":926,"children":927},{"style":147},[928],{"type":37,"value":239},{"type":32,"tag":130,"props":930,"children":931},{"style":164},[932],{"type":37,"value":933}," () ",{"type":32,"tag":130,"props":935,"children":936},{"style":147},[937],{"type":37,"value":938},"=>",{"type":32,"tag":130,"props":940,"children":941},{"style":164},[942],{"type":37,"value":753},{"type":32,"tag":130,"props":944,"children":945},{"class":132,"line":223},[946,950,955,959,964,969],{"type":32,"tag":130,"props":947,"children":948},{"style":147},[949],{"type":37,"value":229},{"type":32,"tag":130,"props":951,"children":952},{"style":212},[953],{"type":37,"value":954}," start",{"type":32,"tag":130,"props":956,"children":957},{"style":147},[958],{"type":37,"value":239},{"type":32,"tag":130,"props":960,"children":961},{"style":164},[962],{"type":37,"value":963}," Date.",{"type":32,"tag":130,"props":965,"children":966},{"style":158},[967],{"type":37,"value":968},"now",{"type":32,"tag":130,"props":970,"children":971},{"style":164},[972],{"type":37,"value":973},"()\n",{"type":32,"tag":130,"props":975,"children":976},{"class":132,"line":262},[977],{"type":32,"tag":130,"props":978,"children":979},{"style":164},[980],{"type":37,"value":304},{"type":32,"tag":130,"props":982,"children":983},{"class":132,"line":298},[984,989,994,998],{"type":32,"tag":130,"props":985,"children":986},{"style":158},[987],{"type":37,"value":988},"  onMounted",{"type":32,"tag":130,"props":990,"children":991},{"style":164},[992],{"type":37,"value":993},"(() ",{"type":32,"tag":130,"props":995,"children":996},{"style":147},[997],{"type":37,"value":938},{"type":32,"tag":130,"props":999,"children":1000},{"style":164},[1001],{"type":37,"value":753},{"type":32,"tag":130,"props":1003,"children":1004},{"class":132,"line":307},[1005,1010,1015,1019,1023,1027,1032,1037],{"type":32,"tag":130,"props":1006,"children":1007},{"style":147},[1008],{"type":37,"value":1009},"    const",{"type":32,"tag":130,"props":1011,"children":1012},{"style":212},[1013],{"type":37,"value":1014}," duration",{"type":32,"tag":130,"props":1016,"children":1017},{"style":147},[1018],{"type":37,"value":239},{"type":32,"tag":130,"props":1020,"children":1021},{"style":164},[1022],{"type":37,"value":963},{"type":32,"tag":130,"props":1024,"children":1025},{"style":158},[1026],{"type":37,"value":968},{"type":32,"tag":130,"props":1028,"children":1029},{"style":164},[1030],{"type":37,"value":1031},"() ",{"type":32,"tag":130,"props":1033,"children":1034},{"style":147},[1035],{"type":37,"value":1036},"-",{"type":32,"tag":130,"props":1038,"children":1039},{"style":164},[1040],{"type":37,"value":1041}," start\n",{"type":32,"tag":130,"props":1043,"children":1044},{"class":132,"line":321},[1045,1050,1055,1060,1065],{"type":32,"tag":130,"props":1046,"children":1047},{"style":147},[1048],{"type":37,"value":1049},"    if",{"type":32,"tag":130,"props":1051,"children":1052},{"style":164},[1053],{"type":37,"value":1054}," (duration ",{"type":32,"tag":130,"props":1056,"children":1057},{"style":147},[1058],{"type":37,"value":1059},">",{"type":32,"tag":130,"props":1061,"children":1062},{"style":212},[1063],{"type":37,"value":1064}," 150",{"type":32,"tag":130,"props":1066,"children":1067},{"style":164},[1068],{"type":37,"value":1069},") {\n",{"type":32,"tag":130,"props":1071,"children":1072},{"class":132,"line":26},[1073,1078,1083,1088,1093,1098,1103],{"type":32,"tag":130,"props":1074,"children":1075},{"style":164},[1076],{"type":37,"value":1077},"      console.",{"type":32,"tag":130,"props":1079,"children":1080},{"style":158},[1081],{"type":37,"value":1082},"warn",{"type":32,"tag":130,"props":1084,"children":1085},{"style":164},[1086],{"type":37,"value":1087},"(",{"type":32,"tag":130,"props":1089,"children":1090},{"style":564},[1091],{"type":37,"value":1092},"`Hidratación lenta: ${",{"type":32,"tag":130,"props":1094,"children":1095},{"style":164},[1096],{"type":37,"value":1097},"duration",{"type":32,"tag":130,"props":1099,"children":1100},{"style":564},[1101],{"type":37,"value":1102},"}ms`",{"type":32,"tag":130,"props":1104,"children":1105},{"style":164},[1106],{"type":37,"value":1107},")\n",{"type":32,"tag":130,"props":1109,"children":1110},{"class":132,"line":357},[1111],{"type":32,"tag":130,"props":1112,"children":1113},{"style":137},[1114],{"type":37,"value":1115},"      \u002F\u002F Enviar a analytics\n",{"type":32,"tag":130,"props":1117,"children":1118},{"class":132,"line":383},[1119],{"type":32,"tag":130,"props":1120,"children":1121},{"style":164},[1122],{"type":37,"value":1123},"    }\n",{"type":32,"tag":130,"props":1125,"children":1126},{"class":132,"line":420},[1127],{"type":32,"tag":130,"props":1128,"children":1129},{"style":164},[1130],{"type":37,"value":1131},"  })\n",{"type":32,"tag":130,"props":1133,"children":1134},{"class":132,"line":429},[1135],{"type":32,"tag":130,"props":1136,"children":1137},{"style":164},[1138],{"type":37,"value":417},{"type":32,"tag":33,"props":1140,"children":1141},{},[1142],{"type":37,"value":1143},"¿De dónde vienen los 150ms? Del métrica Core Web Vitals Total Blocking Time (TBT). Arriba de 150ms, el usuario nota \"retraso en clics\". En 2026, la hidratación promedio en dispositivos móviles es 87ms (HTTPArchive, mayo 2026). Si subes de ahí, hay problema.",{"type":32,"tag":40,"props":1145,"children":1147},{"id":1146},"las-reglas-para-trazar-límites-de-cliente",[1148],{"type":37,"value":1149},"Las Reglas para Trazar Límites de Cliente",{"type":32,"tag":33,"props":1151,"children":1152},{},[1153],{"type":37,"value":1154},"Decidir qué componentes renderizar en servidor y cuáles en cliente requiere esta matriz:",{"type":32,"tag":1156,"props":1157,"children":1158},"table",{},[1159,1183],{"type":32,"tag":1160,"props":1161,"children":1162},"thead",{},[1163],{"type":32,"tag":1164,"props":1165,"children":1166},"tr",{},[1167,1173,1178],{"type":32,"tag":1168,"props":1169,"children":1170},"th",{},[1171],{"type":37,"value":1172},"Criterio",{"type":32,"tag":1168,"props":1174,"children":1175},{},[1176],{"type":37,"value":1177},"Servidor",{"type":32,"tag":1168,"props":1179,"children":1180},{},[1181],{"type":37,"value":1182},"Cliente",{"type":32,"tag":1184,"props":1185,"children":1186},"tbody",{},[1187,1206,1223,1239,1257],{"type":32,"tag":1164,"props":1188,"children":1189},{},[1190,1196,1201],{"type":32,"tag":1191,"props":1192,"children":1193},"td",{},[1194],{"type":37,"value":1195},"Necesidad de fetch de datos",{"type":32,"tag":1191,"props":1197,"children":1198},{},[1199],{"type":37,"value":1200},"Sí",{"type":32,"tag":1191,"props":1202,"children":1203},{},[1204],{"type":37,"value":1205},"No (viene por prop)",{"type":32,"tag":1164,"props":1207,"children":1208},{},[1209,1214,1219],{"type":32,"tag":1191,"props":1210,"children":1211},{},[1212],{"type":37,"value":1213},"Event handlers (onClick, onChange)",{"type":32,"tag":1191,"props":1215,"children":1216},{},[1217],{"type":37,"value":1218},"No",{"type":32,"tag":1191,"props":1220,"children":1221},{},[1222],{"type":37,"value":1200},{"type":32,"tag":1164,"props":1224,"children":1225},{},[1226,1231,1235],{"type":32,"tag":1191,"props":1227,"children":1228},{},[1229],{"type":37,"value":1230},"Uso de useState, useRef",{"type":32,"tag":1191,"props":1232,"children":1233},{},[1234],{"type":37,"value":1218},{"type":32,"tag":1191,"props":1236,"children":1237},{},[1238],{"type":37,"value":1200},{"type":32,"tag":1164,"props":1240,"children":1241},{},[1242,1247,1252],{"type":32,"tag":1191,"props":1243,"children":1244},{},[1245],{"type":37,"value":1246},"Criticidad SEO",{"type":32,"tag":1191,"props":1248,"children":1249},{},[1250],{"type":37,"value":1251},"Alta",{"type":32,"tag":1191,"props":1253,"children":1254},{},[1255],{"type":37,"value":1256},"Baja",{"type":32,"tag":1164,"props":1258,"children":1259},{},[1260,1265,1270],{"type":32,"tag":1191,"props":1261,"children":1262},{},[1263],{"type":37,"value":1264},"Frecuencia de render",{"type":32,"tag":1191,"props":1266,"children":1267},{},[1268],{"type":37,"value":1269},"Fija\u002Fbaja",{"type":32,"tag":1191,"props":1271,"children":1272},{},[1273],{"type":37,"value":1274},"Dinámica\u002Falta",{"type":32,"tag":33,"props":1276,"children":1277},{},[1278],{"type":32,"tag":55,"props":1279,"children":1280},{},[1281],{"type":37,"value":1282},"Escenario práctico: página de listado de productos",{"type":32,"tag":119,"props":1284,"children":1286},{"className":121,"code":1285,"language":123,"meta":16,"style":16},"\u002F\u002F app\u002Fproducts\u002Fpage.tsx — Server Component\nasync function ProductsPage({ searchParams }) {\n  const products = await fetchProducts(searchParams.category)\n  \n  return (\n    \u003C>\n      \u003CFilterSidebar \u002F> {\u002F* Cliente — lleno de estado *\u002F}\n      \u003CProductGrid products={products} \u002F> {\u002F* Servidor — HTML estático *\u002F}\n    \u003C\u002F>\n  )\n}\n\n\u002F\u002F components\u002FFilterSidebar.tsx — Client Component\n'use client'\nfunction FilterSidebar() {\n  const [filters, setFilters] = useState({})\n  \u002F\u002F Estado de filtros aquí, sincronización de URL + filtrado cliente\n  return \u003Caside>...\u003C\u002Faside>\n}\n",[1287],{"type":32,"tag":126,"props":1288,"children":1289},{"__ignoreMap":16},[1290,1298,1328,1358,1365,1376,1383,1409,1443,1450,1457,1464,1471,1479,1487,1505,1550,1558,1589],{"type":32,"tag":130,"props":1291,"children":1292},{"class":132,"line":133},[1293],{"type":32,"tag":130,"props":1294,"children":1295},{"style":137},[1296],{"type":37,"value":1297},"\u002F\u002F app\u002Fproducts\u002Fpage.tsx — Server Component\n",{"type":32,"tag":130,"props":1299,"children":1300},{"class":132,"line":143},[1301,1305,1309,1314,1318,1323],{"type":32,"tag":130,"props":1302,"children":1303},{"style":147},[1304],{"type":37,"value":150},{"type":32,"tag":130,"props":1306,"children":1307},{"style":147},[1308],{"type":37,"value":155},{"type":32,"tag":130,"props":1310,"children":1311},{"style":158},[1312],{"type":37,"value":1313}," ProductsPage",{"type":32,"tag":130,"props":1315,"children":1316},{"style":164},[1317],{"type":37,"value":167},{"type":32,"tag":130,"props":1319,"children":1320},{"style":170},[1321],{"type":37,"value":1322},"searchParams",{"type":32,"tag":130,"props":1324,"children":1325},{"style":164},[1326],{"type":37,"value":1327}," }) {\n",{"type":32,"tag":130,"props":1329,"children":1330},{"class":132,"line":223},[1331,1335,1340,1344,1348,1353],{"type":32,"tag":130,"props":1332,"children":1333},{"style":147},[1334],{"type":37,"value":229},{"type":32,"tag":130,"props":1336,"children":1337},{"style":212},[1338],{"type":37,"value":1339}," products",{"type":32,"tag":130,"props":1341,"children":1342},{"style":147},[1343],{"type":37,"value":239},{"type":32,"tag":130,"props":1345,"children":1346},{"style":147},[1347],{"type":37,"value":244},{"type":32,"tag":130,"props":1349,"children":1350},{"style":158},[1351],{"type":37,"value":1352}," fetchProducts",{"type":32,"tag":130,"props":1354,"children":1355},{"style":164},[1356],{"type":37,"value":1357},"(searchParams.category)\n",{"type":32,"tag":130,"props":1359,"children":1360},{"class":132,"line":262},[1361],{"type":32,"tag":130,"props":1362,"children":1363},{"style":164},[1364],{"type":37,"value":304},{"type":32,"tag":130,"props":1366,"children":1367},{"class":132,"line":298},[1368,1372],{"type":32,"tag":130,"props":1369,"children":1370},{"style":147},[1371],{"type":37,"value":313},{"type":32,"tag":130,"props":1373,"children":1374},{"style":164},[1375],{"type":37,"value":318},{"type":32,"tag":130,"props":1377,"children":1378},{"class":132,"line":307},[1379],{"type":32,"tag":130,"props":1380,"children":1381},{"style":164},[1382],{"type":37,"value":327},{"type":32,"tag":130,"props":1384,"children":1385},{"class":132,"line":321},[1386,1390,1395,1400,1405],{"type":32,"tag":130,"props":1387,"children":1388},{"style":164},[1389],{"type":37,"value":335},{"type":32,"tag":130,"props":1391,"children":1392},{"style":212},[1393],{"type":37,"value":1394},"FilterSidebar",{"type":32,"tag":130,"props":1396,"children":1397},{"style":164},[1398],{"type":37,"value":1399}," \u002F> {",{"type":32,"tag":130,"props":1401,"children":1402},{"style":137},[1403],{"type":37,"value":1404},"\u002F* Cliente — lleno de estado *\u002F",{"type":32,"tag":130,"props":1406,"children":1407},{"style":164},[1408],{"type":37,"value":417},{"type":32,"tag":130,"props":1410,"children":1411},{"class":132,"line":26},[1412,1416,1421,1425,1429,1434,1439],{"type":32,"tag":130,"props":1413,"children":1414},{"style":164},[1415],{"type":37,"value":335},{"type":32,"tag":130,"props":1417,"children":1418},{"style":212},[1419],{"type":37,"value":1420},"ProductGrid",{"type":32,"tag":130,"props":1422,"children":1423},{"style":158},[1424],{"type":37,"value":1339},{"type":32,"tag":130,"props":1426,"children":1427},{"style":147},[1428],{"type":37,"value":349},{"type":32,"tag":130,"props":1430,"children":1431},{"style":164},[1432],{"type":37,"value":1433},"{products} \u002F> {",{"type":32,"tag":130,"props":1435,"children":1436},{"style":137},[1437],{"type":37,"value":1438},"\u002F* Servidor — HTML estático *\u002F",{"type":32,"tag":130,"props":1440,"children":1441},{"style":164},[1442],{"type":37,"value":417},{"type":32,"tag":130,"props":1444,"children":1445},{"class":132,"line":357},[1446],{"type":32,"tag":130,"props":1447,"children":1448},{"style":164},[1449],{"type":37,"value":426},{"type":32,"tag":130,"props":1451,"children":1452},{"class":132,"line":383},[1453],{"type":32,"tag":130,"props":1454,"children":1455},{"style":164},[1456],{"type":37,"value":435},{"type":32,"tag":130,"props":1458,"children":1459},{"class":132,"line":420},[1460],{"type":32,"tag":130,"props":1461,"children":1462},{"style":164},[1463],{"type":37,"value":417},{"type":32,"tag":130,"props":1465,"children":1466},{"class":132,"line":429},[1467],{"type":32,"tag":130,"props":1468,"children":1469},{"emptyLinePlaceholder":706},[1470],{"type":37,"value":709},{"type":32,"tag":130,"props":1472,"children":1473},{"class":132,"line":438},[1474],{"type":32,"tag":130,"props":1475,"children":1476},{"style":137},[1477],{"type":37,"value":1478},"\u002F\u002F components\u002FFilterSidebar.tsx — Client Component\n",{"type":32,"tag":130,"props":1480,"children":1481},{"class":132,"line":791},[1482],{"type":32,"tag":130,"props":1483,"children":1484},{"style":564},[1485],{"type":37,"value":1486},"'use client'\n",{"type":32,"tag":130,"props":1488,"children":1489},{"class":132,"line":813},[1490,1495,1500],{"type":32,"tag":130,"props":1491,"children":1492},{"style":147},[1493],{"type":37,"value":1494},"function",{"type":32,"tag":130,"props":1496,"children":1497},{"style":158},[1498],{"type":37,"value":1499}," FilterSidebar",{"type":32,"tag":130,"props":1501,"children":1502},{"style":164},[1503],{"type":37,"value":1504},"() {\n",{"type":32,"tag":130,"props":1506,"children":1507},{"class":132,"line":836},[1508,1512,1517,1522,1526,1531,1536,1540,1545],{"type":32,"tag":130,"props":1509,"children":1510},{"style":147},[1511],{"type":37,"value":229},{"type":32,"tag":130,"props":1513,"children":1514},{"style":164},[1515],{"type":37,"value":1516}," [",{"type":32,"tag":130,"props":1518,"children":1519},{"style":212},[1520],{"type":37,"value":1521},"filters",{"type":32,"tag":130,"props":1523,"children":1524},{"style":164},[1525],{"type":37,"value":743},{"type":32,"tag":130,"props":1527,"children":1528},{"style":212},[1529],{"type":37,"value":1530},"setFilters",{"type":32,"tag":130,"props":1532,"children":1533},{"style":164},[1534],{"type":37,"value":1535},"] ",{"type":32,"tag":130,"props":1537,"children":1538},{"style":147},[1539],{"type":37,"value":349},{"type":32,"tag":130,"props":1541,"children":1542},{"style":158},[1543],{"type":37,"value":1544}," useState",{"type":32,"tag":130,"props":1546,"children":1547},{"style":164},[1548],{"type":37,"value":1549},"({})\n",{"type":32,"tag":130,"props":1551,"children":1552},{"class":132,"line":844},[1553],{"type":32,"tag":130,"props":1554,"children":1555},{"style":137},[1556],{"type":37,"value":1557},"  \u002F\u002F Estado de filtros aquí, sincronización de URL + filtrado cliente\n",{"type":32,"tag":130,"props":1559,"children":1561},{"class":132,"line":1560},18,[1562,1566,1571,1576,1581,1585],{"type":32,"tag":130,"props":1563,"children":1564},{"style":147},[1565],{"type":37,"value":313},{"type":32,"tag":130,"props":1567,"children":1568},{"style":164},[1569],{"type":37,"value":1570}," \u003C",{"type":32,"tag":130,"props":1572,"children":1573},{"style":531},[1574],{"type":37,"value":1575},"aside",{"type":32,"tag":130,"props":1577,"children":1578},{"style":164},[1579],{"type":37,"value":1580},">...\u003C\u002F",{"type":32,"tag":130,"props":1582,"children":1583},{"style":531},[1584],{"type":37,"value":1575},{"type":32,"tag":130,"props":1586,"children":1587},{"style":164},[1588],{"type":37,"value":539},{"type":32,"tag":130,"props":1590,"children":1592},{"class":132,"line":1591},19,[1593],{"type":32,"tag":130,"props":1594,"children":1595},{"style":164},[1596],{"type":37,"value":417},{"type":32,"tag":33,"props":1598,"children":1599},{},[1600],{"type":37,"value":1601},"Aquí, las tarjetas de producto vienen como HTML desde servidor (SEO + velocidad), los filtros viven en cliente (UX en tiempo real). El costo de hidratación se paga solo en la sidebar, el contenido principal es inmediatamente interactivo.",{"type":32,"tag":40,"props":1603,"children":1605},{"id":1604},"equilibrio-server-client-en-headless-commerce",[1606],{"type":37,"value":1607},"Equilibrio Server-Client en Headless Commerce",{"type":32,"tag":33,"props":1609,"children":1610},{},[1611,1613,1622],{"type":37,"value":1612},"En arquitectura ",{"type":32,"tag":1614,"props":1615,"children":1619},"a",{"href":1616,"rel":1617},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fheadless",[1618],"nofollow",[1620],{"type":37,"value":1621},"Headless Commerce",{"type":37,"value":1623},", este equilibrio es crítico. Los datos de Shopify Storefront API se pueden fetchear y cachear en servidor, pero las operaciones de carrito requieren estado cliente. Si ejecutas Hydrogen en Oxygen (runtime de edge de Shopify) con RSC, llegasmucho más cerca del ideal: toda la página fuera de checkout es renderizada en servidor, manteniendo TBT por debajo de 40ms.",{"type":32,"tag":33,"props":1625,"children":1626},{},[1627],{"type":32,"tag":55,"props":1628,"children":1629},{},[1630],{"type":37,"value":1631},"Benchmark comparativo (proyecto real, febrero 2026):",{"type":32,"tag":1156,"props":1633,"children":1634},{},[1635,1661],{"type":32,"tag":1160,"props":1636,"children":1637},{},[1638],{"type":32,"tag":1164,"props":1639,"children":1640},{},[1641,1646,1651,1656],{"type":32,"tag":1168,"props":1642,"children":1643},{},[1644],{"type":37,"value":1645},"Arquitectura",{"type":32,"tag":1168,"props":1647,"children":1648},{},[1649],{"type":37,"value":1650},"LCP",{"type":32,"tag":1168,"props":1652,"children":1653},{},[1654],{"type":37,"value":1655},"TBT",{"type":32,"tag":1168,"props":1657,"children":1658},{},[1659],{"type":37,"value":1660},"JS Bundle",{"type":32,"tag":1184,"props":1662,"children":1663},{},[1664,1687,1710],{"type":32,"tag":1164,"props":1665,"children":1666},{},[1667,1672,1677,1682],{"type":32,"tag":1191,"props":1668,"children":1669},{},[1670],{"type":37,"value":1671},"Liquid (tradicional)",{"type":32,"tag":1191,"props":1673,"children":1674},{},[1675],{"type":37,"value":1676},"3.2s",{"type":32,"tag":1191,"props":1678,"children":1679},{},[1680],{"type":37,"value":1681},"580ms",{"type":32,"tag":1191,"props":1683,"children":1684},{},[1685],{"type":37,"value":1686},"0kb (JS inline)",{"type":32,"tag":1164,"props":1688,"children":1689},{},[1690,1695,1700,1705],{"type":32,"tag":1191,"props":1691,"children":1692},{},[1693],{"type":37,"value":1694},"Hydrogen (RSC)",{"type":32,"tag":1191,"props":1696,"children":1697},{},[1698],{"type":37,"value":1699},"1.1s",{"type":32,"tag":1191,"props":1701,"children":1702},{},[1703],{"type":37,"value":1704},"38ms",{"type":32,"tag":1191,"props":1706,"children":1707},{},[1708],{"type":37,"value":1709},"62kb",{"type":32,"tag":1164,"props":1711,"children":1712},{},[1713,1718,1723,1728],{"type":32,"tag":1191,"props":1714,"children":1715},{},[1716],{"type":37,"value":1717},"Next.js CSR",{"type":32,"tag":1191,"props":1719,"children":1720},{},[1721],{"type":37,"value":1722},"2.9s",{"type":32,"tag":1191,"props":1724,"children":1725},{},[1726],{"type":37,"value":1727},"1240ms",{"type":32,"tag":1191,"props":1729,"children":1730},{},[1731],{"type":37,"value":1732},"340kb",{"type":32,"tag":33,"props":1734,"children":1735},{},[1736],{"type":37,"value":1737},"Liquid es rápido pero interactividad limitada; CSR tiene bundle pesado; RSC es el punto medio. Para e-commerce, LCP bajo 1.5s es obligatorio (recomendación Google), así que la combinación Hydrogen + RSC se convirtió en estándar en 2026.",{"type":32,"tag":40,"props":1739,"children":1741},{"id":1740},"tabla-de-trade-offs-qué-elegir-y-cuándo",[1742],{"type":37,"value":1743},"Tabla de Trade-offs: Qué Elegir y Cuándo",{"type":32,"tag":1156,"props":1745,"children":1746},{},[1747,1768],{"type":32,"tag":1160,"props":1748,"children":1749},{},[1750],{"type":32,"tag":1164,"props":1751,"children":1752},{},[1753,1758,1763],{"type":32,"tag":1168,"props":1754,"children":1755},{},[1756],{"type":37,"value":1757},"Situación",{"type":32,"tag":1168,"props":1759,"children":1760},{},[1761],{"type":37,"value":1762},"Preferencia",{"type":32,"tag":1168,"props":1764,"children":1765},{},[1766],{"type":37,"value":1767},"Por Qué",{"type":32,"tag":1184,"props":1769,"children":1770},{},[1771,1789,1807,1825,1843],{"type":32,"tag":1164,"props":1772,"children":1773},{},[1774,1779,1784],{"type":32,"tag":1191,"props":1775,"children":1776},{},[1777],{"type":37,"value":1778},"Blog, docs, landing page",{"type":32,"tag":1191,"props":1780,"children":1781},{},[1782],{"type":37,"value":1783},"Full SSR\u002FRSC",{"type":32,"tag":1191,"props":1785,"children":1786},{},[1787],{"type":37,"value":1788},"SEO prioritario, poca interactividad",{"type":32,"tag":1164,"props":1790,"children":1791},{},[1792,1797,1802],{"type":32,"tag":1191,"props":1793,"children":1794},{},[1795],{"type":37,"value":1796},"Dashboard, panel admin",{"type":32,"tag":1191,"props":1798,"children":1799},{},[1800],{"type":37,"value":1801},"Híbrido (servidor + islas cliente)",{"type":32,"tag":1191,"props":1803,"children":1804},{},[1805],{"type":37,"value":1806},"Mucho fetch de datos, lógica de formularios cliente",{"type":32,"tag":1164,"props":1808,"children":1809},{},[1810,1815,1820],{"type":32,"tag":1191,"props":1811,"children":1812},{},[1813],{"type":37,"value":1814},"E-commerce (fuera checkout)",{"type":32,"tag":1191,"props":1816,"children":1817},{},[1818],{"type":37,"value":1819},"RSC + carrito cliente",{"type":32,"tag":1191,"props":1821,"children":1822},{},[1823],{"type":37,"value":1824},"Equilibrio SEO + velocidad",{"type":32,"tag":1164,"props":1826,"children":1827},{},[1828,1833,1838],{"type":32,"tag":1191,"props":1829,"children":1830},{},[1831],{"type":37,"value":1832},"App en tiempo real (chat, collab)",{"type":32,"tag":1191,"props":1834,"children":1835},{},[1836],{"type":37,"value":1837},"Cliente primero + WebSocket",{"type":32,"tag":1191,"props":1839,"children":1840},{},[1841],{"type":37,"value":1842},"Estado debe vivir en cliente",{"type":32,"tag":1164,"props":1844,"children":1845},{},[1846,1851,1856],{"type":32,"tag":1191,"props":1847,"children":1848},{},[1849],{"type":37,"value":1850},"Contenido estático + formulario",{"type":32,"tag":1191,"props":1852,"children":1853},{},[1854],{"type":37,"value":1855},"SSG + isla de formulario cliente",{"type":32,"tag":1191,"props":1857,"children":1858},{},[1859],{"type":37,"value":1860},"Cache + interactividad",{"type":32,"tag":33,"props":1862,"children":1863},{},[1864],{"type":32,"tag":55,"props":1865,"children":1866},{},[1867],{"type":37,"value":1868},"Criterios de decisión:",{"type":32,"tag":1870,"props":1871,"children":1872},"ol",{},[1873,1883,1893,1903],{"type":32,"tag":65,"props":1874,"children":1875},{},[1876,1881],{"type":32,"tag":55,"props":1877,"children":1878},{},[1879],{"type":37,"value":1880},"Necesidad SEO:",{"type":37,"value":1882}," Si es alta, arquitectura server-first",{"type":32,"tag":65,"props":1884,"children":1885},{},[1886,1891],{"type":32,"tag":55,"props":1887,"children":1888},{},[1889],{"type":37,"value":1890},"Frecuencia de interactividad:",{"type":37,"value":1892}," Si es alta, amplía los límites de cliente",{"type":32,"tag":65,"props":1894,"children":1895},{},[1896,1901],{"type":32,"tag":55,"props":1897,"children":1898},{},[1899],{"type":37,"value":1900},"Presupuesto de bundle:",{"type":37,"value":1902}," Si debe ser \u003C100kb, server-first es obligatorio",{"type":32,"tag":65,"props":1904,"children":1905},{},[1906,1911],{"type":32,"tag":55,"props":1907,"children":1908},{},[1909],{"type":37,"value":1910},"Expertise del team:",{"type":37,"value":1912}," Si RSC es difícil de debuggear, comienza con híbrido",{"type":32,"tag":33,"props":1914,"children":1915},{},[1916],{"type":37,"value":1917},"En 2024 se decidía \"todo cliente\" o \"todo servidor\". En 2026 defines esto a nivel de componente, no de página. ProductCard puede ser renderizado en servidor, pero QuickAddButton dentro de él es componente cliente. Esta granularidad gana en rendimiento y experiencia del desarrollador.",{"type":32,"tag":33,"props":1919,"children":1920},{},[1921],{"type":37,"value":1922},"La elección entre React Server Components y Vue 3.5 ya no es \"cuál es mejor\", sino \"dónde trabajas más cómodo\". RSC gana 60%+ en tamaño de bundle pero el modelo mental es difícil. Vue 3.5 transitions son más familiares pero requieres monitoreo manual de métricas de hidratación. En ambos, la arquitectura correcta depende de trazar el equilibrio server-client con precisión. Construye tu matriz según las necesidades del proyecto, mide, itera — ese es el fundamento de la arquitectura frontend en 2026.",{"type":32,"tag":721,"props":1924,"children":1925},{},[1926],{"type":37,"value":1927},"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":223,"depth":223,"links":1929},[1930,1933,1936,1937,1938],{"id":42,"depth":143,"text":45,"children":1931},[1932],{"id":114,"depth":223,"text":117},{"id":458,"depth":143,"text":461,"children":1934},[1935],{"id":873,"depth":223,"text":876},{"id":1146,"depth":143,"text":1149},{"id":1604,"depth":143,"text":1607},{"id":1740,"depth":143,"text":1743},"markdown","content:es:tech:server-components-vs-cliente-2026.md","content","es\u002Ftech\u002Fserver-components-vs-cliente-2026.md","es\u002Ftech\u002Fserver-components-vs-cliente-2026","md",1786860286570]