[{"data":1,"prerenderedAt":2857},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fes\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung","\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-right-line-in-2026","\u002Fes\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026","\u002Ffr\u002Ftech\u002Fserver-components-vs-client-2026-tracer-la-bonne-ligne","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026-drawing-the-line","\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":2851,"_id":2852,"_source":2853,"_file":2854,"_stem":2855,"_extension":2856},"tech",false,"","Server Components vs Client: Dibujando la Línea Correcta en 2026","¿Dónde dibujar la línea entre React Server Components y client-side rendering? Guía práctica basada en hydration cost, bundle size y tradeoffs de runtime.","2026-07-21",[21,22,23,24,25],"react-server-components","hydration","vue-3-5","web-performance","headless-commerce",9,"Roibase",{"type":29,"children":30,"toc":2839},"root",[31,39,46,51,56,163,168,175,197,673,685,691,719,728,748,756,769,774,790,798,803,809,822,827,1606,1618,1624,1629,1634,1699,1704,1933,1952,1958,1963,1968,2047,2052,2058,2063,2107,2112,2261,2274,2280,2285,2781,2786,2814,2819,2833],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","En 2024, React Server Components llegó a producción. En 2025, Vue 3.5 estabilizó transition hooks. En 2026, las preguntas siguen siendo las mismas: ¿qué components debo renderizar en servidor, cuáles en cliente? ¿El product grid de tu storefront Shopify debería ser RSC o Vue Vapor component? La respuesta es \"depende del contexto\", pero ¿cómo se mide ese contexto? Este artículo presenta un framework que cuantifica hydration cost, bundle size e interactivity latency — métricas concretas, no suposiciones.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"hydration-cost-los-números-reales",[44],{"type":37,"value":45},"Hydration Cost: Los Números Reales",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Hydration es el proceso de \"animar\" HTML renderizado en servidor con JavaScript en cliente. Antes de Vue 3.5, el costo promedio era 200–800ms (Chrome 120, Android mid-tier). React 18 con Suspense redujo esto a 100–400ms pero no a cero. Next.js 15 con App Router y RSC disminuyó el bundle cliente en 40–60%, y el cost de hydration bajó linealmente.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"En proyectos Shopify de Roibase, estos son los números que observamos:",{"type":32,"tag":57,"props":58,"children":59},"table",{},[60,89],{"type":32,"tag":61,"props":62,"children":63},"thead",{},[64],{"type":32,"tag":65,"props":66,"children":67},"tr",{},[68,74,79,84],{"type":32,"tag":69,"props":70,"children":71},"th",{},[72],{"type":37,"value":73},"Escenario",{"type":32,"tag":69,"props":75,"children":76},{},[77],{"type":37,"value":78},"Bundle Size",{"type":32,"tag":69,"props":80,"children":81},{},[82],{"type":37,"value":83},"Hydration (P75)",{"type":32,"tag":69,"props":85,"children":86},{},[87],{"type":37,"value":88},"TBT (P75)",{"type":32,"tag":90,"props":91,"children":92},"tbody",{},[93,117,140],{"type":32,"tag":65,"props":94,"children":95},{},[96,102,107,112],{"type":32,"tag":97,"props":98,"children":99},"td",{},[100],{"type":37,"value":101},"Full CSR (Vue 3.4)",{"type":32,"tag":97,"props":103,"children":104},{},[105],{"type":37,"value":106},"240kb",{"type":32,"tag":97,"props":108,"children":109},{},[110],{"type":37,"value":111},"680ms",{"type":32,"tag":97,"props":113,"children":114},{},[115],{"type":37,"value":116},"1200ms",{"type":32,"tag":65,"props":118,"children":119},{},[120,125,130,135],{"type":32,"tag":97,"props":121,"children":122},{},[123],{"type":37,"value":124},"Partial SSR + hydration",{"type":32,"tag":97,"props":126,"children":127},{},[128],{"type":37,"value":129},"180kb",{"type":32,"tag":97,"props":131,"children":132},{},[133],{"type":37,"value":134},"420ms",{"type":32,"tag":97,"props":136,"children":137},{},[138],{"type":37,"value":139},"800ms",{"type":32,"tag":65,"props":141,"children":142},{},[143,148,153,158],{"type":32,"tag":97,"props":144,"children":145},{},[146],{"type":37,"value":147},"RSC + minimal client",{"type":32,"tag":97,"props":149,"children":150},{},[151],{"type":37,"value":152},"95kb",{"type":32,"tag":97,"props":154,"children":155},{},[156],{"type":37,"value":157},"140ms",{"type":32,"tag":97,"props":159,"children":160},{},[161],{"type":37,"value":162},"220ms",{"type":32,"tag":33,"props":164,"children":165},{},[166],{"type":37,"value":167},"Esta tabla está basada en field data de Android mid-tier (Moto G Power, 4GB RAM). Full CSR en una página de listing bloquea el main thread 680ms durante hydration — el usuario hace clic en un filtro pero la UI no responde. Con RSC, la misma página renderiza product cards en servidor y envía solo el component de filtro interactivo al cliente: hydration baja a 140ms, TBT a 220ms.",{"type":32,"tag":169,"props":170,"children":172},"h3",{"id":171},"vue-35-selective-hydration-con-transition-hooks",[173],{"type":37,"value":174},"Vue 3.5 Selective Hydration con Transition Hooks",{"type":32,"tag":33,"props":176,"children":177},{},[178,180,187,189,195],{"type":37,"value":179},"Vue 3.5 estabilizó ",{"type":32,"tag":181,"props":182,"children":184},"code",{"className":183},[],[185],{"type":37,"value":186},"onBeforeMount",{"type":37,"value":188}," y ",{"type":32,"tag":181,"props":190,"children":192},{"className":191},[],[193],{"type":37,"value":194},"onServerPrefetch",{"type":37,"value":196},", permitiendo separar la parte renderizada en servidor de la hidratada en cliente:",{"type":32,"tag":198,"props":199,"children":203},"pre",{"code":200,"language":201,"meta":16,"className":202,"style":16},"\u003Cscript setup>\nimport { ref, onServerPrefetch, onBeforeMount } from 'vue'\n\nconst products = ref([])\nconst isClient = ref(false)\n\n\u002F\u002F Se ejecuta en servidor, se salta en cliente\nonServerPrefetch(async () => {\n  products.value = await fetchProducts()\n})\n\n\u002F\u002F Se ejecuta en cliente, se salta en servidor\nonBeforeMount(() => {\n  isClient.value = true\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Contenido estático no se hidratan -->\n    \u003CProductGrid :products=\"products\" \u002F>\n    \n    \u003C!-- Component interactivo solo carga en cliente -->\n    \u003CFilterPanel v-if=\"isClient\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","language-vue shiki shiki-themes github-dark",[204],{"type":32,"tag":181,"props":205,"children":206},{"__ignoreMap":16},[207,236,262,272,302,338,346,356,388,416,425,433,442,463,481,489,506,514,531,549,558,591,600,609,640,657],{"type":32,"tag":208,"props":209,"children":212},"span",{"class":210,"line":211},"line",1,[213,219,225,231],{"type":32,"tag":208,"props":214,"children":216},{"style":215},"--shiki-default:#E1E4E8",[217],{"type":37,"value":218},"\u003C",{"type":32,"tag":208,"props":220,"children":222},{"style":221},"--shiki-default:#85E89D",[223],{"type":37,"value":224},"script",{"type":32,"tag":208,"props":226,"children":228},{"style":227},"--shiki-default:#B392F0",[229],{"type":37,"value":230}," setup",{"type":32,"tag":208,"props":232,"children":233},{"style":215},[234],{"type":37,"value":235},">\n",{"type":32,"tag":208,"props":237,"children":239},{"class":210,"line":238},2,[240,246,251,256],{"type":32,"tag":208,"props":241,"children":243},{"style":242},"--shiki-default:#F97583",[244],{"type":37,"value":245},"import",{"type":32,"tag":208,"props":247,"children":248},{"style":215},[249],{"type":37,"value":250}," { ref, onServerPrefetch, onBeforeMount } ",{"type":32,"tag":208,"props":252,"children":253},{"style":242},[254],{"type":37,"value":255},"from",{"type":32,"tag":208,"props":257,"children":259},{"style":258},"--shiki-default:#9ECBFF",[260],{"type":37,"value":261}," 'vue'\n",{"type":32,"tag":208,"props":263,"children":265},{"class":210,"line":264},3,[266],{"type":32,"tag":208,"props":267,"children":269},{"emptyLinePlaceholder":268},true,[270],{"type":37,"value":271},"\n",{"type":32,"tag":208,"props":273,"children":275},{"class":210,"line":274},4,[276,281,287,292,297],{"type":32,"tag":208,"props":277,"children":278},{"style":242},[279],{"type":37,"value":280},"const",{"type":32,"tag":208,"props":282,"children":284},{"style":283},"--shiki-default:#79B8FF",[285],{"type":37,"value":286}," products",{"type":32,"tag":208,"props":288,"children":289},{"style":242},[290],{"type":37,"value":291}," =",{"type":32,"tag":208,"props":293,"children":294},{"style":227},[295],{"type":37,"value":296}," ref",{"type":32,"tag":208,"props":298,"children":299},{"style":215},[300],{"type":37,"value":301},"([])\n",{"type":32,"tag":208,"props":303,"children":305},{"class":210,"line":304},5,[306,310,315,319,323,328,333],{"type":32,"tag":208,"props":307,"children":308},{"style":242},[309],{"type":37,"value":280},{"type":32,"tag":208,"props":311,"children":312},{"style":283},[313],{"type":37,"value":314}," isClient",{"type":32,"tag":208,"props":316,"children":317},{"style":242},[318],{"type":37,"value":291},{"type":32,"tag":208,"props":320,"children":321},{"style":227},[322],{"type":37,"value":296},{"type":32,"tag":208,"props":324,"children":325},{"style":215},[326],{"type":37,"value":327},"(",{"type":32,"tag":208,"props":329,"children":330},{"style":283},[331],{"type":37,"value":332},"false",{"type":32,"tag":208,"props":334,"children":335},{"style":215},[336],{"type":37,"value":337},")\n",{"type":32,"tag":208,"props":339,"children":341},{"class":210,"line":340},6,[342],{"type":32,"tag":208,"props":343,"children":344},{"emptyLinePlaceholder":268},[345],{"type":37,"value":271},{"type":32,"tag":208,"props":347,"children":349},{"class":210,"line":348},7,[350],{"type":32,"tag":208,"props":351,"children":353},{"style":352},"--shiki-default:#6A737D",[354],{"type":37,"value":355},"\u002F\u002F Se ejecuta en servidor, se salta en cliente\n",{"type":32,"tag":208,"props":357,"children":359},{"class":210,"line":358},8,[360,364,368,373,378,383],{"type":32,"tag":208,"props":361,"children":362},{"style":227},[363],{"type":37,"value":194},{"type":32,"tag":208,"props":365,"children":366},{"style":215},[367],{"type":37,"value":327},{"type":32,"tag":208,"props":369,"children":370},{"style":242},[371],{"type":37,"value":372},"async",{"type":32,"tag":208,"props":374,"children":375},{"style":215},[376],{"type":37,"value":377}," () ",{"type":32,"tag":208,"props":379,"children":380},{"style":242},[381],{"type":37,"value":382},"=>",{"type":32,"tag":208,"props":384,"children":385},{"style":215},[386],{"type":37,"value":387}," {\n",{"type":32,"tag":208,"props":389,"children":390},{"class":210,"line":26},[391,396,401,406,411],{"type":32,"tag":208,"props":392,"children":393},{"style":215},[394],{"type":37,"value":395},"  products.value ",{"type":32,"tag":208,"props":397,"children":398},{"style":242},[399],{"type":37,"value":400},"=",{"type":32,"tag":208,"props":402,"children":403},{"style":242},[404],{"type":37,"value":405}," await",{"type":32,"tag":208,"props":407,"children":408},{"style":227},[409],{"type":37,"value":410}," fetchProducts",{"type":32,"tag":208,"props":412,"children":413},{"style":215},[414],{"type":37,"value":415},"()\n",{"type":32,"tag":208,"props":417,"children":419},{"class":210,"line":418},10,[420],{"type":32,"tag":208,"props":421,"children":422},{"style":215},[423],{"type":37,"value":424},"})\n",{"type":32,"tag":208,"props":426,"children":428},{"class":210,"line":427},11,[429],{"type":32,"tag":208,"props":430,"children":431},{"emptyLinePlaceholder":268},[432],{"type":37,"value":271},{"type":32,"tag":208,"props":434,"children":436},{"class":210,"line":435},12,[437],{"type":32,"tag":208,"props":438,"children":439},{"style":352},[440],{"type":37,"value":441},"\u002F\u002F Se ejecuta en cliente, se salta en servidor\n",{"type":32,"tag":208,"props":443,"children":445},{"class":210,"line":444},13,[446,450,455,459],{"type":32,"tag":208,"props":447,"children":448},{"style":227},[449],{"type":37,"value":186},{"type":32,"tag":208,"props":451,"children":452},{"style":215},[453],{"type":37,"value":454},"(() ",{"type":32,"tag":208,"props":456,"children":457},{"style":242},[458],{"type":37,"value":382},{"type":32,"tag":208,"props":460,"children":461},{"style":215},[462],{"type":37,"value":387},{"type":32,"tag":208,"props":464,"children":466},{"class":210,"line":465},14,[467,472,476],{"type":32,"tag":208,"props":468,"children":469},{"style":215},[470],{"type":37,"value":471},"  isClient.value ",{"type":32,"tag":208,"props":473,"children":474},{"style":242},[475],{"type":37,"value":400},{"type":32,"tag":208,"props":477,"children":478},{"style":283},[479],{"type":37,"value":480}," true\n",{"type":32,"tag":208,"props":482,"children":484},{"class":210,"line":483},15,[485],{"type":32,"tag":208,"props":486,"children":487},{"style":215},[488],{"type":37,"value":424},{"type":32,"tag":208,"props":490,"children":492},{"class":210,"line":491},16,[493,498,502],{"type":32,"tag":208,"props":494,"children":495},{"style":215},[496],{"type":37,"value":497},"\u003C\u002F",{"type":32,"tag":208,"props":499,"children":500},{"style":221},[501],{"type":37,"value":224},{"type":32,"tag":208,"props":503,"children":504},{"style":215},[505],{"type":37,"value":235},{"type":32,"tag":208,"props":507,"children":509},{"class":210,"line":508},17,[510],{"type":32,"tag":208,"props":511,"children":512},{"emptyLinePlaceholder":268},[513],{"type":37,"value":271},{"type":32,"tag":208,"props":515,"children":517},{"class":210,"line":516},18,[518,522,527],{"type":32,"tag":208,"props":519,"children":520},{"style":215},[521],{"type":37,"value":218},{"type":32,"tag":208,"props":523,"children":524},{"style":221},[525],{"type":37,"value":526},"template",{"type":32,"tag":208,"props":528,"children":529},{"style":215},[530],{"type":37,"value":235},{"type":32,"tag":208,"props":532,"children":534},{"class":210,"line":533},19,[535,540,545],{"type":32,"tag":208,"props":536,"children":537},{"style":215},[538],{"type":37,"value":539},"  \u003C",{"type":32,"tag":208,"props":541,"children":542},{"style":221},[543],{"type":37,"value":544},"div",{"type":32,"tag":208,"props":546,"children":547},{"style":215},[548],{"type":37,"value":235},{"type":32,"tag":208,"props":550,"children":552},{"class":210,"line":551},20,[553],{"type":32,"tag":208,"props":554,"children":555},{"style":352},[556],{"type":37,"value":557},"    \u003C!-- Contenido estático no se hidratan -->\n",{"type":32,"tag":208,"props":559,"children":561},{"class":210,"line":560},21,[562,567,572,577,581,586],{"type":32,"tag":208,"props":563,"children":564},{"style":215},[565],{"type":37,"value":566},"    \u003C",{"type":32,"tag":208,"props":568,"children":569},{"style":221},[570],{"type":37,"value":571},"ProductGrid",{"type":32,"tag":208,"props":573,"children":574},{"style":227},[575],{"type":37,"value":576}," :products",{"type":32,"tag":208,"props":578,"children":579},{"style":215},[580],{"type":37,"value":400},{"type":32,"tag":208,"props":582,"children":583},{"style":258},[584],{"type":37,"value":585},"\"products\"",{"type":32,"tag":208,"props":587,"children":588},{"style":215},[589],{"type":37,"value":590}," \u002F>\n",{"type":32,"tag":208,"props":592,"children":594},{"class":210,"line":593},22,[595],{"type":32,"tag":208,"props":596,"children":597},{"style":215},[598],{"type":37,"value":599},"    \n",{"type":32,"tag":208,"props":601,"children":603},{"class":210,"line":602},23,[604],{"type":32,"tag":208,"props":605,"children":606},{"style":352},[607],{"type":37,"value":608},"    \u003C!-- Component interactivo solo carga en cliente -->\n",{"type":32,"tag":208,"props":610,"children":612},{"class":210,"line":611},24,[613,617,622,627,631,636],{"type":32,"tag":208,"props":614,"children":615},{"style":215},[616],{"type":37,"value":566},{"type":32,"tag":208,"props":618,"children":619},{"style":221},[620],{"type":37,"value":621},"FilterPanel",{"type":32,"tag":208,"props":623,"children":624},{"style":227},[625],{"type":37,"value":626}," v-if",{"type":32,"tag":208,"props":628,"children":629},{"style":215},[630],{"type":37,"value":400},{"type":32,"tag":208,"props":632,"children":633},{"style":258},[634],{"type":37,"value":635},"\"isClient\"",{"type":32,"tag":208,"props":637,"children":638},{"style":215},[639],{"type":37,"value":590},{"type":32,"tag":208,"props":641,"children":643},{"class":210,"line":642},25,[644,649,653],{"type":32,"tag":208,"props":645,"children":646},{"style":215},[647],{"type":37,"value":648},"  \u003C\u002F",{"type":32,"tag":208,"props":650,"children":651},{"style":221},[652],{"type":37,"value":544},{"type":32,"tag":208,"props":654,"children":655},{"style":215},[656],{"type":37,"value":235},{"type":32,"tag":208,"props":658,"children":660},{"class":210,"line":659},26,[661,665,669],{"type":32,"tag":208,"props":662,"children":663},{"style":215},[664],{"type":37,"value":497},{"type":32,"tag":208,"props":666,"children":667},{"style":221},[668],{"type":37,"value":526},{"type":32,"tag":208,"props":670,"children":671},{"style":215},[672],{"type":37,"value":235},{"type":32,"tag":33,"props":674,"children":675},{},[676,678,683],{"type":37,"value":677},"Este patrón reduce bundle size de 180kb a 110kb — ",{"type":32,"tag":181,"props":679,"children":681},{"className":680},[],[682],{"type":37,"value":621},{"type":37,"value":684}," se lazy-load. El cost de hydration baja de 420ms a 180ms porque solo se hidratan las partes interactivas.",{"type":32,"tag":40,"props":686,"children":688},{"id":687},"bundle-size-vs-interactivity-latency-el-tradeoff",[689],{"type":37,"value":690},"Bundle Size vs Interactivity Latency: El Tradeoff",{"type":32,"tag":33,"props":692,"children":693},{},[694,696,702,704,710,711,717],{"type":37,"value":695},"RSC no resuelve todo. Un server component no puede reaccionar a user actions — no puede usar ",{"type":32,"tag":181,"props":697,"children":699},{"className":698},[],[700],{"type":37,"value":701},"onClick",{"type":37,"value":703},", ",{"type":32,"tag":181,"props":705,"children":707},{"className":706},[],[708],{"type":37,"value":709},"useState",{"type":37,"value":703},{"type":32,"tag":181,"props":712,"children":714},{"className":713},[],[715],{"type":37,"value":716},"useEffect",{"type":37,"value":718},". Si el usuario hace clic en un product para abrir un modal, ese modal debe ser client component. Aquí empieza el tradeoff:",{"type":32,"tag":33,"props":720,"children":721},{},[722],{"type":32,"tag":723,"props":724,"children":725},"strong",{},[726],{"type":37,"value":727},"Escenario 1: Product card RSC + modal client component",{"type":32,"tag":729,"props":730,"children":731},"ul",{},[732,738,743],{"type":32,"tag":733,"props":734,"children":735},"li",{},[736],{"type":37,"value":737},"Bundle inicial: 95kb",{"type":32,"tag":733,"props":739,"children":740},{},[741],{"type":37,"value":742},"Bundle lazy load (modal): 45kb",{"type":32,"tag":733,"props":744,"children":745},{},[746],{"type":37,"value":747},"Latency al primer clic: 300ms (descarga + parse de 45kb)",{"type":32,"tag":33,"props":749,"children":750},{},[751],{"type":32,"tag":723,"props":752,"children":753},{},[754],{"type":37,"value":755},"Escenario 2: Card + modal como client component",{"type":32,"tag":729,"props":757,"children":758},{},[759,764],{"type":32,"tag":733,"props":760,"children":761},{},[762],{"type":37,"value":763},"Bundle inicial: 185kb",{"type":32,"tag":733,"props":765,"children":766},{},[767],{"type":37,"value":768},"Latency al primer clic: 80ms (código ya está ahí)",{"type":32,"tag":33,"props":770,"children":771},{},[772],{"type":37,"value":773},"Del análisis de conversion rates (Roibase 2025 field study): 78% de usuarios hace clic en el primer product dentro de 3 segundos. En el Escenario 1, ese primer clic sufre un delay de 300ms — el modal no abre, el usuario hace clic de nuevo, frustración. En el Escenario 2, los 90kb extras de bundle impactan el cost de hydration en la carga inicial pero la latency de interactividad es cero.",{"type":32,"tag":33,"props":775,"children":776},{},[777,779,788],{"type":37,"value":778},"Resolvimos este tradeoff en nuestra ",{"type":32,"tag":780,"props":781,"children":785},"a",{"href":782,"rel":783},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fheadless",[784],"nofollow",[786],{"type":37,"value":787},"arquitectura headless commerce",{"type":37,"value":789}," con esta fórmula:",{"type":32,"tag":198,"props":791,"children":793},{"code":792},"Probabilidad de primer clic × número de usuarios > 60% → client component\nDe lo contrario → RSC + lazy load\n",[794],{"type":32,"tag":181,"props":795,"children":796},{"__ignoreMap":16},[797],{"type":37,"value":792},{"type":32,"tag":33,"props":799,"children":800},{},[801],{"type":37,"value":802},"Product cards reciben 78% de clics → client component. El acordeón \"Delivery options\" solo 12% → RSC + lazy load.",{"type":32,"tag":40,"props":804,"children":806},{"id":805},"server-component-boundary-dónde-dibujar-la-línea",[807],{"type":37,"value":808},"Server Component Boundary: Dónde Dibujar la Línea",{"type":32,"tag":33,"props":810,"children":811},{},[812,814,820],{"type":37,"value":813},"React Server Components define el boundary con la directiva ",{"type":32,"tag":181,"props":815,"children":817},{"className":816},[],[818],{"type":37,"value":819},"\"use client\"",{"type":37,"value":821},". Todo arriba de ese boundary se renderiza en servidor; todo abajo va al bundle cliente. Si dibujas la línea mal, o envías código cliente innecesario o no puedes manejar state en servidor.",{"type":32,"tag":33,"props":823,"children":824},{},[825],{"type":37,"value":826},"El patrón que observamos en proyectos Shopify Hydrogen 2.0:",{"type":32,"tag":198,"props":828,"children":832},{"code":829,"language":830,"meta":16,"className":831,"style":16},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\nexport default function ProductPage({ product }) {\n  return (\n    \u003Cdiv>\n      {\u002F* Server component — datos dinámicos, no interactivo *\u002F}\n      \u003CProductImages images={product.images} \u002F>\n      \u003CProductTitle title={product.title} \u002F>\n      \n      {\u002F* Client component — form, state, input del usuario *\u002F}\n      \u003CAddToCartForm product={product} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F components\u002FAddToCartForm.tsx\n'use client'\nimport { useState } from 'react'\n\nexport function AddToCartForm({ product }) {\n  const [quantity, setQuantity] = useState(1)\n  const [loading, setLoading] = useState(false)\n\n  async function handleSubmit() {\n    setLoading(true)\n    await addToCart(product.id, quantity)\n    setLoading(false)\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput \n        type=\"number\" \n        value={quantity} \n        onChange={(e) => setQuantity(e.target.value)} \n      \u002F>\n      \u003Cbutton disabled={loading}>\n        {loading ? 'Adding...' : 'Add to Cart'}\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n","tsx","language-tsx shiki shiki-themes github-dark",[833],{"type":32,"tag":181,"props":834,"children":835},{"__ignoreMap":16},[836,844,883,896,911,929,956,982,990,1006,1032,1048,1056,1063,1070,1078,1086,1107,1114,1142,1196,1245,1252,1274,1295,1313,1332,1341,1349,1361,1388,1406,1428,1446,1488,1497,1524,1557,1574,1590,1598],{"type":32,"tag":208,"props":837,"children":838},{"class":210,"line":211},[839],{"type":32,"tag":208,"props":840,"children":841},{"style":352},[842],{"type":37,"value":843},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":845,"children":846},{"class":210,"line":238},[847,852,857,862,867,872,878],{"type":32,"tag":208,"props":848,"children":849},{"style":242},[850],{"type":37,"value":851},"export",{"type":32,"tag":208,"props":853,"children":854},{"style":242},[855],{"type":37,"value":856}," default",{"type":32,"tag":208,"props":858,"children":859},{"style":242},[860],{"type":37,"value":861}," function",{"type":32,"tag":208,"props":863,"children":864},{"style":227},[865],{"type":37,"value":866}," ProductPage",{"type":32,"tag":208,"props":868,"children":869},{"style":215},[870],{"type":37,"value":871},"({ ",{"type":32,"tag":208,"props":873,"children":875},{"style":874},"--shiki-default:#FFAB70",[876],{"type":37,"value":877},"product",{"type":32,"tag":208,"props":879,"children":880},{"style":215},[881],{"type":37,"value":882}," }) {\n",{"type":32,"tag":208,"props":884,"children":885},{"class":210,"line":264},[886,891],{"type":32,"tag":208,"props":887,"children":888},{"style":242},[889],{"type":37,"value":890},"  return",{"type":32,"tag":208,"props":892,"children":893},{"style":215},[894],{"type":37,"value":895}," (\n",{"type":32,"tag":208,"props":897,"children":898},{"class":210,"line":274},[899,903,907],{"type":32,"tag":208,"props":900,"children":901},{"style":215},[902],{"type":37,"value":566},{"type":32,"tag":208,"props":904,"children":905},{"style":221},[906],{"type":37,"value":544},{"type":32,"tag":208,"props":908,"children":909},{"style":215},[910],{"type":37,"value":235},{"type":32,"tag":208,"props":912,"children":913},{"class":210,"line":304},[914,919,924],{"type":32,"tag":208,"props":915,"children":916},{"style":215},[917],{"type":37,"value":918},"      {",{"type":32,"tag":208,"props":920,"children":921},{"style":352},[922],{"type":37,"value":923},"\u002F* Server component — datos dinámicos, no interactivo *\u002F",{"type":32,"tag":208,"props":925,"children":926},{"style":215},[927],{"type":37,"value":928},"}\n",{"type":32,"tag":208,"props":930,"children":931},{"class":210,"line":340},[932,937,942,947,951],{"type":32,"tag":208,"props":933,"children":934},{"style":215},[935],{"type":37,"value":936},"      \u003C",{"type":32,"tag":208,"props":938,"children":939},{"style":283},[940],{"type":37,"value":941},"ProductImages",{"type":32,"tag":208,"props":943,"children":944},{"style":227},[945],{"type":37,"value":946}," images",{"type":32,"tag":208,"props":948,"children":949},{"style":242},[950],{"type":37,"value":400},{"type":32,"tag":208,"props":952,"children":953},{"style":215},[954],{"type":37,"value":955},"{product.images} \u002F>\n",{"type":32,"tag":208,"props":957,"children":958},{"class":210,"line":348},[959,963,968,973,977],{"type":32,"tag":208,"props":960,"children":961},{"style":215},[962],{"type":37,"value":936},{"type":32,"tag":208,"props":964,"children":965},{"style":283},[966],{"type":37,"value":967},"ProductTitle",{"type":32,"tag":208,"props":969,"children":970},{"style":227},[971],{"type":37,"value":972}," title",{"type":32,"tag":208,"props":974,"children":975},{"style":242},[976],{"type":37,"value":400},{"type":32,"tag":208,"props":978,"children":979},{"style":215},[980],{"type":37,"value":981},"{product.title} \u002F>\n",{"type":32,"tag":208,"props":983,"children":984},{"class":210,"line":358},[985],{"type":32,"tag":208,"props":986,"children":987},{"style":215},[988],{"type":37,"value":989},"      \n",{"type":32,"tag":208,"props":991,"children":992},{"class":210,"line":26},[993,997,1002],{"type":32,"tag":208,"props":994,"children":995},{"style":215},[996],{"type":37,"value":918},{"type":32,"tag":208,"props":998,"children":999},{"style":352},[1000],{"type":37,"value":1001},"\u002F* Client component — form, state, input del usuario *\u002F",{"type":32,"tag":208,"props":1003,"children":1004},{"style":215},[1005],{"type":37,"value":928},{"type":32,"tag":208,"props":1007,"children":1008},{"class":210,"line":418},[1009,1013,1018,1023,1027],{"type":32,"tag":208,"props":1010,"children":1011},{"style":215},[1012],{"type":37,"value":936},{"type":32,"tag":208,"props":1014,"children":1015},{"style":283},[1016],{"type":37,"value":1017},"AddToCartForm",{"type":32,"tag":208,"props":1019,"children":1020},{"style":227},[1021],{"type":37,"value":1022}," product",{"type":32,"tag":208,"props":1024,"children":1025},{"style":242},[1026],{"type":37,"value":400},{"type":32,"tag":208,"props":1028,"children":1029},{"style":215},[1030],{"type":37,"value":1031},"{product} \u002F>\n",{"type":32,"tag":208,"props":1033,"children":1034},{"class":210,"line":427},[1035,1040,1044],{"type":32,"tag":208,"props":1036,"children":1037},{"style":215},[1038],{"type":37,"value":1039},"    \u003C\u002F",{"type":32,"tag":208,"props":1041,"children":1042},{"style":221},[1043],{"type":37,"value":544},{"type":32,"tag":208,"props":1045,"children":1046},{"style":215},[1047],{"type":37,"value":235},{"type":32,"tag":208,"props":1049,"children":1050},{"class":210,"line":435},[1051],{"type":32,"tag":208,"props":1052,"children":1053},{"style":215},[1054],{"type":37,"value":1055},"  )\n",{"type":32,"tag":208,"props":1057,"children":1058},{"class":210,"line":444},[1059],{"type":32,"tag":208,"props":1060,"children":1061},{"style":215},[1062],{"type":37,"value":928},{"type":32,"tag":208,"props":1064,"children":1065},{"class":210,"line":465},[1066],{"type":32,"tag":208,"props":1067,"children":1068},{"emptyLinePlaceholder":268},[1069],{"type":37,"value":271},{"type":32,"tag":208,"props":1071,"children":1072},{"class":210,"line":483},[1073],{"type":32,"tag":208,"props":1074,"children":1075},{"style":352},[1076],{"type":37,"value":1077},"\u002F\u002F components\u002FAddToCartForm.tsx\n",{"type":32,"tag":208,"props":1079,"children":1080},{"class":210,"line":491},[1081],{"type":32,"tag":208,"props":1082,"children":1083},{"style":258},[1084],{"type":37,"value":1085},"'use client'\n",{"type":32,"tag":208,"props":1087,"children":1088},{"class":210,"line":508},[1089,1093,1098,1102],{"type":32,"tag":208,"props":1090,"children":1091},{"style":242},[1092],{"type":37,"value":245},{"type":32,"tag":208,"props":1094,"children":1095},{"style":215},[1096],{"type":37,"value":1097}," { useState } ",{"type":32,"tag":208,"props":1099,"children":1100},{"style":242},[1101],{"type":37,"value":255},{"type":32,"tag":208,"props":1103,"children":1104},{"style":258},[1105],{"type":37,"value":1106}," 'react'\n",{"type":32,"tag":208,"props":1108,"children":1109},{"class":210,"line":516},[1110],{"type":32,"tag":208,"props":1111,"children":1112},{"emptyLinePlaceholder":268},[1113],{"type":37,"value":271},{"type":32,"tag":208,"props":1115,"children":1116},{"class":210,"line":533},[1117,1121,1125,1130,1134,1138],{"type":32,"tag":208,"props":1118,"children":1119},{"style":242},[1120],{"type":37,"value":851},{"type":32,"tag":208,"props":1122,"children":1123},{"style":242},[1124],{"type":37,"value":861},{"type":32,"tag":208,"props":1126,"children":1127},{"style":227},[1128],{"type":37,"value":1129}," AddToCartForm",{"type":32,"tag":208,"props":1131,"children":1132},{"style":215},[1133],{"type":37,"value":871},{"type":32,"tag":208,"props":1135,"children":1136},{"style":874},[1137],{"type":37,"value":877},{"type":32,"tag":208,"props":1139,"children":1140},{"style":215},[1141],{"type":37,"value":882},{"type":32,"tag":208,"props":1143,"children":1144},{"class":210,"line":551},[1145,1150,1155,1160,1164,1169,1174,1178,1183,1187,1192],{"type":32,"tag":208,"props":1146,"children":1147},{"style":242},[1148],{"type":37,"value":1149},"  const",{"type":32,"tag":208,"props":1151,"children":1152},{"style":215},[1153],{"type":37,"value":1154}," [",{"type":32,"tag":208,"props":1156,"children":1157},{"style":283},[1158],{"type":37,"value":1159},"quantity",{"type":32,"tag":208,"props":1161,"children":1162},{"style":215},[1163],{"type":37,"value":703},{"type":32,"tag":208,"props":1165,"children":1166},{"style":283},[1167],{"type":37,"value":1168},"setQuantity",{"type":32,"tag":208,"props":1170,"children":1171},{"style":215},[1172],{"type":37,"value":1173},"] ",{"type":32,"tag":208,"props":1175,"children":1176},{"style":242},[1177],{"type":37,"value":400},{"type":32,"tag":208,"props":1179,"children":1180},{"style":227},[1181],{"type":37,"value":1182}," useState",{"type":32,"tag":208,"props":1184,"children":1185},{"style":215},[1186],{"type":37,"value":327},{"type":32,"tag":208,"props":1188,"children":1189},{"style":283},[1190],{"type":37,"value":1191},"1",{"type":32,"tag":208,"props":1193,"children":1194},{"style":215},[1195],{"type":37,"value":337},{"type":32,"tag":208,"props":1197,"children":1198},{"class":210,"line":560},[1199,1203,1207,1212,1216,1221,1225,1229,1233,1237,1241],{"type":32,"tag":208,"props":1200,"children":1201},{"style":242},[1202],{"type":37,"value":1149},{"type":32,"tag":208,"props":1204,"children":1205},{"style":215},[1206],{"type":37,"value":1154},{"type":32,"tag":208,"props":1208,"children":1209},{"style":283},[1210],{"type":37,"value":1211},"loading",{"type":32,"tag":208,"props":1213,"children":1214},{"style":215},[1215],{"type":37,"value":703},{"type":32,"tag":208,"props":1217,"children":1218},{"style":283},[1219],{"type":37,"value":1220},"setLoading",{"type":32,"tag":208,"props":1222,"children":1223},{"style":215},[1224],{"type":37,"value":1173},{"type":32,"tag":208,"props":1226,"children":1227},{"style":242},[1228],{"type":37,"value":400},{"type":32,"tag":208,"props":1230,"children":1231},{"style":227},[1232],{"type":37,"value":1182},{"type":32,"tag":208,"props":1234,"children":1235},{"style":215},[1236],{"type":37,"value":327},{"type":32,"tag":208,"props":1238,"children":1239},{"style":283},[1240],{"type":37,"value":332},{"type":32,"tag":208,"props":1242,"children":1243},{"style":215},[1244],{"type":37,"value":337},{"type":32,"tag":208,"props":1246,"children":1247},{"class":210,"line":593},[1248],{"type":32,"tag":208,"props":1249,"children":1250},{"emptyLinePlaceholder":268},[1251],{"type":37,"value":271},{"type":32,"tag":208,"props":1253,"children":1254},{"class":210,"line":602},[1255,1260,1264,1269],{"type":32,"tag":208,"props":1256,"children":1257},{"style":242},[1258],{"type":37,"value":1259},"  async",{"type":32,"tag":208,"props":1261,"children":1262},{"style":242},[1263],{"type":37,"value":861},{"type":32,"tag":208,"props":1265,"children":1266},{"style":227},[1267],{"type":37,"value":1268}," handleSubmit",{"type":32,"tag":208,"props":1270,"children":1271},{"style":215},[1272],{"type":37,"value":1273},"() {\n",{"type":32,"tag":208,"props":1275,"children":1276},{"class":210,"line":611},[1277,1282,1286,1291],{"type":32,"tag":208,"props":1278,"children":1279},{"style":227},[1280],{"type":37,"value":1281},"    setLoading",{"type":32,"tag":208,"props":1283,"children":1284},{"style":215},[1285],{"type":37,"value":327},{"type":32,"tag":208,"props":1287,"children":1288},{"style":283},[1289],{"type":37,"value":1290},"true",{"type":32,"tag":208,"props":1292,"children":1293},{"style":215},[1294],{"type":37,"value":337},{"type":32,"tag":208,"props":1296,"children":1297},{"class":210,"line":642},[1298,1303,1308],{"type":32,"tag":208,"props":1299,"children":1300},{"style":242},[1301],{"type":37,"value":1302},"    await",{"type":32,"tag":208,"props":1304,"children":1305},{"style":227},[1306],{"type":37,"value":1307}," addToCart",{"type":32,"tag":208,"props":1309,"children":1310},{"style":215},[1311],{"type":37,"value":1312},"(product.id, quantity)\n",{"type":32,"tag":208,"props":1314,"children":1315},{"class":210,"line":659},[1316,1320,1324,1328],{"type":32,"tag":208,"props":1317,"children":1318},{"style":227},[1319],{"type":37,"value":1281},{"type":32,"tag":208,"props":1321,"children":1322},{"style":215},[1323],{"type":37,"value":327},{"type":32,"tag":208,"props":1325,"children":1326},{"style":283},[1327],{"type":37,"value":332},{"type":32,"tag":208,"props":1329,"children":1330},{"style":215},[1331],{"type":37,"value":337},{"type":32,"tag":208,"props":1333,"children":1335},{"class":210,"line":1334},27,[1336],{"type":32,"tag":208,"props":1337,"children":1338},{"style":215},[1339],{"type":37,"value":1340},"  }\n",{"type":32,"tag":208,"props":1342,"children":1344},{"class":210,"line":1343},28,[1345],{"type":32,"tag":208,"props":1346,"children":1347},{"emptyLinePlaceholder":268},[1348],{"type":37,"value":271},{"type":32,"tag":208,"props":1350,"children":1352},{"class":210,"line":1351},29,[1353,1357],{"type":32,"tag":208,"props":1354,"children":1355},{"style":242},[1356],{"type":37,"value":890},{"type":32,"tag":208,"props":1358,"children":1359},{"style":215},[1360],{"type":37,"value":895},{"type":32,"tag":208,"props":1362,"children":1364},{"class":210,"line":1363},30,[1365,1369,1374,1379,1383],{"type":32,"tag":208,"props":1366,"children":1367},{"style":215},[1368],{"type":37,"value":566},{"type":32,"tag":208,"props":1370,"children":1371},{"style":221},[1372],{"type":37,"value":1373},"form",{"type":32,"tag":208,"props":1375,"children":1376},{"style":227},[1377],{"type":37,"value":1378}," onSubmit",{"type":32,"tag":208,"props":1380,"children":1381},{"style":242},[1382],{"type":37,"value":400},{"type":32,"tag":208,"props":1384,"children":1385},{"style":215},[1386],{"type":37,"value":1387},"{handleSubmit}>\n",{"type":32,"tag":208,"props":1389,"children":1391},{"class":210,"line":1390},31,[1392,1396,1401],{"type":32,"tag":208,"props":1393,"children":1394},{"style":215},[1395],{"type":37,"value":936},{"type":32,"tag":208,"props":1397,"children":1398},{"style":221},[1399],{"type":37,"value":1400},"input",{"type":32,"tag":208,"props":1402,"children":1403},{"style":215},[1404],{"type":37,"value":1405}," \n",{"type":32,"tag":208,"props":1407,"children":1409},{"class":210,"line":1408},32,[1410,1415,1419,1424],{"type":32,"tag":208,"props":1411,"children":1412},{"style":227},[1413],{"type":37,"value":1414},"        type",{"type":32,"tag":208,"props":1416,"children":1417},{"style":242},[1418],{"type":37,"value":400},{"type":32,"tag":208,"props":1420,"children":1421},{"style":258},[1422],{"type":37,"value":1423},"\"number\"",{"type":32,"tag":208,"props":1425,"children":1426},{"style":215},[1427],{"type":37,"value":1405},{"type":32,"tag":208,"props":1429,"children":1431},{"class":210,"line":1430},33,[1432,1437,1441],{"type":32,"tag":208,"props":1433,"children":1434},{"style":227},[1435],{"type":37,"value":1436},"        value",{"type":32,"tag":208,"props":1438,"children":1439},{"style":242},[1440],{"type":37,"value":400},{"type":32,"tag":208,"props":1442,"children":1443},{"style":215},[1444],{"type":37,"value":1445},"{quantity} \n",{"type":32,"tag":208,"props":1447,"children":1449},{"class":210,"line":1448},34,[1450,1455,1459,1464,1469,1474,1478,1483],{"type":32,"tag":208,"props":1451,"children":1452},{"style":227},[1453],{"type":37,"value":1454},"        onChange",{"type":32,"tag":208,"props":1456,"children":1457},{"style":242},[1458],{"type":37,"value":400},{"type":32,"tag":208,"props":1460,"children":1461},{"style":215},[1462],{"type":37,"value":1463},"{(",{"type":32,"tag":208,"props":1465,"children":1466},{"style":874},[1467],{"type":37,"value":1468},"e",{"type":32,"tag":208,"props":1470,"children":1471},{"style":215},[1472],{"type":37,"value":1473},") ",{"type":32,"tag":208,"props":1475,"children":1476},{"style":242},[1477],{"type":37,"value":382},{"type":32,"tag":208,"props":1479,"children":1480},{"style":227},[1481],{"type":37,"value":1482}," setQuantity",{"type":32,"tag":208,"props":1484,"children":1485},{"style":215},[1486],{"type":37,"value":1487},"(e.target.value)} \n",{"type":32,"tag":208,"props":1489,"children":1491},{"class":210,"line":1490},35,[1492],{"type":32,"tag":208,"props":1493,"children":1494},{"style":215},[1495],{"type":37,"value":1496},"      \u002F>\n",{"type":32,"tag":208,"props":1498,"children":1500},{"class":210,"line":1499},36,[1501,1505,1510,1515,1519],{"type":32,"tag":208,"props":1502,"children":1503},{"style":215},[1504],{"type":37,"value":936},{"type":32,"tag":208,"props":1506,"children":1507},{"style":221},[1508],{"type":37,"value":1509},"button",{"type":32,"tag":208,"props":1511,"children":1512},{"style":227},[1513],{"type":37,"value":1514}," disabled",{"type":32,"tag":208,"props":1516,"children":1517},{"style":242},[1518],{"type":37,"value":400},{"type":32,"tag":208,"props":1520,"children":1521},{"style":215},[1522],{"type":37,"value":1523},"{loading}>\n",{"type":32,"tag":208,"props":1525,"children":1527},{"class":210,"line":1526},37,[1528,1533,1538,1543,1548,1553],{"type":32,"tag":208,"props":1529,"children":1530},{"style":215},[1531],{"type":37,"value":1532},"        {loading ",{"type":32,"tag":208,"props":1534,"children":1535},{"style":242},[1536],{"type":37,"value":1537},"?",{"type":32,"tag":208,"props":1539,"children":1540},{"style":258},[1541],{"type":37,"value":1542}," 'Adding...'",{"type":32,"tag":208,"props":1544,"children":1545},{"style":242},[1546],{"type":37,"value":1547}," :",{"type":32,"tag":208,"props":1549,"children":1550},{"style":258},[1551],{"type":37,"value":1552}," 'Add to Cart'",{"type":32,"tag":208,"props":1554,"children":1555},{"style":215},[1556],{"type":37,"value":928},{"type":32,"tag":208,"props":1558,"children":1560},{"class":210,"line":1559},38,[1561,1566,1570],{"type":32,"tag":208,"props":1562,"children":1563},{"style":215},[1564],{"type":37,"value":1565},"      \u003C\u002F",{"type":32,"tag":208,"props":1567,"children":1568},{"style":221},[1569],{"type":37,"value":1509},{"type":32,"tag":208,"props":1571,"children":1572},{"style":215},[1573],{"type":37,"value":235},{"type":32,"tag":208,"props":1575,"children":1577},{"class":210,"line":1576},39,[1578,1582,1586],{"type":32,"tag":208,"props":1579,"children":1580},{"style":215},[1581],{"type":37,"value":1039},{"type":32,"tag":208,"props":1583,"children":1584},{"style":221},[1585],{"type":37,"value":1373},{"type":32,"tag":208,"props":1587,"children":1588},{"style":215},[1589],{"type":37,"value":235},{"type":32,"tag":208,"props":1591,"children":1593},{"class":210,"line":1592},40,[1594],{"type":32,"tag":208,"props":1595,"children":1596},{"style":215},[1597],{"type":37,"value":1055},{"type":32,"tag":208,"props":1599,"children":1601},{"class":210,"line":1600},41,[1602],{"type":32,"tag":208,"props":1603,"children":1604},{"style":215},[1605],{"type":37,"value":928},{"type":32,"tag":33,"props":1607,"children":1608},{},[1609,1611,1616],{"type":37,"value":1610},"El boundary está arriba de ",{"type":32,"tag":181,"props":1612,"children":1614},{"className":1613},[],[1615],{"type":37,"value":1017},{"type":37,"value":1617},". Las imágenes y título se renderizan en servidor — HTML amigable para SEO, cero JavaScript cliente. El formulario es client component. Impact en bundle size: solo la lógica del formulario + event handlers de React llegan al cliente, aproximadamente 8kb. Si hicieras toda la página como client component, el bundle sería 120kb — diferencia de 15×.",{"type":32,"tag":169,"props":1619,"children":1621},{"id":1620},"la-regla-de-no-anidar",[1622],{"type":37,"value":1623},"La Regla de No Anidar",{"type":32,"tag":33,"props":1625,"children":1626},{},[1627],{"type":37,"value":1628},"Error común con RSC: intentar anidar un server component dentro de uno client. React no lo permite — todo debajo de un client component va al bundle cliente. La solución es composition pattern:",{"type":32,"tag":33,"props":1630,"children":1631},{},[1632],{"type":37,"value":1633},"❌ Incorrecto:",{"type":32,"tag":198,"props":1635,"children":1637},{"code":1636,"language":830,"meta":16,"className":831,"style":16},"'use client'\nfunction ClientWrapper() {\n  return \u003CServerComponent \u002F> \u002F\u002F Error: RSC no puede estar dentro de client\n}\n",[1638],{"type":32,"tag":181,"props":1639,"children":1640},{"__ignoreMap":16},[1641,1648,1665,1692],{"type":32,"tag":208,"props":1642,"children":1643},{"class":210,"line":211},[1644],{"type":32,"tag":208,"props":1645,"children":1646},{"style":258},[1647],{"type":37,"value":1085},{"type":32,"tag":208,"props":1649,"children":1650},{"class":210,"line":238},[1651,1656,1661],{"type":32,"tag":208,"props":1652,"children":1653},{"style":242},[1654],{"type":37,"value":1655},"function",{"type":32,"tag":208,"props":1657,"children":1658},{"style":227},[1659],{"type":37,"value":1660}," ClientWrapper",{"type":32,"tag":208,"props":1662,"children":1663},{"style":215},[1664],{"type":37,"value":1273},{"type":32,"tag":208,"props":1666,"children":1667},{"class":210,"line":264},[1668,1672,1677,1682,1687],{"type":32,"tag":208,"props":1669,"children":1670},{"style":242},[1671],{"type":37,"value":890},{"type":32,"tag":208,"props":1673,"children":1674},{"style":215},[1675],{"type":37,"value":1676}," \u003C",{"type":32,"tag":208,"props":1678,"children":1679},{"style":283},[1680],{"type":37,"value":1681},"ServerComponent",{"type":32,"tag":208,"props":1683,"children":1684},{"style":215},[1685],{"type":37,"value":1686}," \u002F> ",{"type":32,"tag":208,"props":1688,"children":1689},{"style":352},[1690],{"type":37,"value":1691},"\u002F\u002F Error: RSC no puede estar dentro de client\n",{"type":32,"tag":208,"props":1693,"children":1694},{"class":210,"line":274},[1695],{"type":32,"tag":208,"props":1696,"children":1697},{"style":215},[1698],{"type":37,"value":928},{"type":32,"tag":33,"props":1700,"children":1701},{},[1702],{"type":37,"value":1703},"✅ Correcto:",{"type":32,"tag":198,"props":1705,"children":1707},{"code":1706,"language":830,"meta":16,"className":831,"style":16},"\u002F\u002F Layout (RSC)\nfunction Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CServerSidebar \u002F>\n      \u003CClientWrapper>{children}\u003C\u002FClientWrapper>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F Wrapper (client)\n'use client'\nfunction ClientWrapper({ children }) {\n  return \u003Cdiv className=\"interactive\">{children}\u003C\u002Fdiv>\n}\n",[1708],{"type":32,"tag":181,"props":1709,"children":1710},{"__ignoreMap":16},[1711,1719,1744,1755,1770,1786,1811,1826,1833,1840,1847,1855,1862,1885,1926],{"type":32,"tag":208,"props":1712,"children":1713},{"class":210,"line":211},[1714],{"type":32,"tag":208,"props":1715,"children":1716},{"style":352},[1717],{"type":37,"value":1718},"\u002F\u002F Layout (RSC)\n",{"type":32,"tag":208,"props":1720,"children":1721},{"class":210,"line":238},[1722,1726,1731,1735,1740],{"type":32,"tag":208,"props":1723,"children":1724},{"style":242},[1725],{"type":37,"value":1655},{"type":32,"tag":208,"props":1727,"children":1728},{"style":227},[1729],{"type":37,"value":1730}," Layout",{"type":32,"tag":208,"props":1732,"children":1733},{"style":215},[1734],{"type":37,"value":871},{"type":32,"tag":208,"props":1736,"children":1737},{"style":874},[1738],{"type":37,"value":1739},"children",{"type":32,"tag":208,"props":1741,"children":1742},{"style":215},[1743],{"type":37,"value":882},{"type":32,"tag":208,"props":1745,"children":1746},{"class":210,"line":264},[1747,1751],{"type":32,"tag":208,"props":1748,"children":1749},{"style":242},[1750],{"type":37,"value":890},{"type":32,"tag":208,"props":1752,"children":1753},{"style":215},[1754],{"type":37,"value":895},{"type":32,"tag":208,"props":1756,"children":1757},{"class":210,"line":274},[1758,1762,1766],{"type":32,"tag":208,"props":1759,"children":1760},{"style":215},[1761],{"type":37,"value":566},{"type":32,"tag":208,"props":1763,"children":1764},{"style":221},[1765],{"type":37,"value":544},{"type":32,"tag":208,"props":1767,"children":1768},{"style":215},[1769],{"type":37,"value":235},{"type":32,"tag":208,"props":1771,"children":1772},{"class":210,"line":304},[1773,1777,1782],{"type":32,"tag":208,"props":1774,"children":1775},{"style":215},[1776],{"type":37,"value":936},{"type":32,"tag":208,"props":1778,"children":1779},{"style":283},[1780],{"type":37,"value":1781},"ServerSidebar",{"type":32,"tag":208,"props":1783,"children":1784},{"style":215},[1785],{"type":37,"value":590},{"type":32,"tag":208,"props":1787,"children":1788},{"class":210,"line":340},[1789,1793,1798,1803,1807],{"type":32,"tag":208,"props":1790,"children":1791},{"style":215},[1792],{"type":37,"value":936},{"type":32,"tag":208,"props":1794,"children":1795},{"style":283},[1796],{"type":37,"value":1797},"ClientWrapper",{"type":32,"tag":208,"props":1799,"children":1800},{"style":215},[1801],{"type":37,"value":1802},">{children}\u003C\u002F",{"type":32,"tag":208,"props":1804,"children":1805},{"style":283},[1806],{"type":37,"value":1797},{"type":32,"tag":208,"props":1808,"children":1809},{"style":215},[1810],{"type":37,"value":235},{"type":32,"tag":208,"props":1812,"children":1813},{"class":210,"line":348},[1814,1818,1822],{"type":32,"tag":208,"props":1815,"children":1816},{"style":215},[1817],{"type":37,"value":1039},{"type":32,"tag":208,"props":1819,"children":1820},{"style":221},[1821],{"type":37,"value":544},{"type":32,"tag":208,"props":1823,"children":1824},{"style":215},[1825],{"type":37,"value":235},{"type":32,"tag":208,"props":1827,"children":1828},{"class":210,"line":358},[1829],{"type":32,"tag":208,"props":1830,"children":1831},{"style":215},[1832],{"type":37,"value":1055},{"type":32,"tag":208,"props":1834,"children":1835},{"class":210,"line":26},[1836],{"type":32,"tag":208,"props":1837,"children":1838},{"style":215},[1839],{"type":37,"value":928},{"type":32,"tag":208,"props":1841,"children":1842},{"class":210,"line":418},[1843],{"type":32,"tag":208,"props":1844,"children":1845},{"emptyLinePlaceholder":268},[1846],{"type":37,"value":271},{"type":32,"tag":208,"props":1848,"children":1849},{"class":210,"line":427},[1850],{"type":32,"tag":208,"props":1851,"children":1852},{"style":352},[1853],{"type":37,"value":1854},"\u002F\u002F Wrapper (client)\n",{"type":32,"tag":208,"props":1856,"children":1857},{"class":210,"line":435},[1858],{"type":32,"tag":208,"props":1859,"children":1860},{"style":258},[1861],{"type":37,"value":1085},{"type":32,"tag":208,"props":1863,"children":1864},{"class":210,"line":444},[1865,1869,1873,1877,1881],{"type":32,"tag":208,"props":1866,"children":1867},{"style":242},[1868],{"type":37,"value":1655},{"type":32,"tag":208,"props":1870,"children":1871},{"style":227},[1872],{"type":37,"value":1660},{"type":32,"tag":208,"props":1874,"children":1875},{"style":215},[1876],{"type":37,"value":871},{"type":32,"tag":208,"props":1878,"children":1879},{"style":874},[1880],{"type":37,"value":1739},{"type":32,"tag":208,"props":1882,"children":1883},{"style":215},[1884],{"type":37,"value":882},{"type":32,"tag":208,"props":1886,"children":1887},{"class":210,"line":465},[1888,1892,1896,1900,1905,1909,1914,1918,1922],{"type":32,"tag":208,"props":1889,"children":1890},{"style":242},[1891],{"type":37,"value":890},{"type":32,"tag":208,"props":1893,"children":1894},{"style":215},[1895],{"type":37,"value":1676},{"type":32,"tag":208,"props":1897,"children":1898},{"style":221},[1899],{"type":37,"value":544},{"type":32,"tag":208,"props":1901,"children":1902},{"style":227},[1903],{"type":37,"value":1904}," className",{"type":32,"tag":208,"props":1906,"children":1907},{"style":242},[1908],{"type":37,"value":400},{"type":32,"tag":208,"props":1910,"children":1911},{"style":258},[1912],{"type":37,"value":1913},"\"interactive\"",{"type":32,"tag":208,"props":1915,"children":1916},{"style":215},[1917],{"type":37,"value":1802},{"type":32,"tag":208,"props":1919,"children":1920},{"style":221},[1921],{"type":37,"value":544},{"type":32,"tag":208,"props":1923,"children":1924},{"style":215},[1925],{"type":37,"value":235},{"type":32,"tag":208,"props":1927,"children":1928},{"class":210,"line":483},[1929],{"type":32,"tag":208,"props":1930,"children":1931},{"style":215},[1932],{"type":37,"value":928},{"type":32,"tag":33,"props":1934,"children":1935},{},[1936,1938,1943,1945,1950],{"type":37,"value":1937},"Con este patrón, ",{"type":32,"tag":181,"props":1939,"children":1941},{"className":1940},[],[1942],{"type":37,"value":1781},{"type":37,"value":1944}," se renderiza en servidor y ",{"type":32,"tag":181,"props":1946,"children":1948},{"className":1947},[],[1949],{"type":37,"value":1797},{"type":37,"value":1951}," es solo un contenedor interactivo en cliente. El contenido de la sidebar no va al bundle.",{"type":32,"tag":40,"props":1953,"children":1955},{"id":1954},"vue-vapor-mode-el-futuro-sin-hydration",[1956],{"type":37,"value":1957},"Vue Vapor Mode: El Futuro sin Hydration",{"type":32,"tag":33,"props":1959,"children":1960},{},[1961],{"type":37,"value":1962},"Desde Vue 3.5, Vapor Mode experimental renderiza HTML servidor-side y lo hace interactivo sin hydration. El concepto: el compilador inyecta event listeners directamente en el DOM, sin Virtual DOM reconciliation. Resultado: hydration cost cero, bundle size 70% menor.",{"type":32,"tag":33,"props":1964,"children":1965},{},[1966],{"type":37,"value":1967},"Benchmark experimental (Vue team, 2026 Q1):",{"type":32,"tag":57,"props":1969,"children":1970},{},[1971,1992],{"type":32,"tag":61,"props":1972,"children":1973},{},[1974],{"type":32,"tag":65,"props":1975,"children":1976},{},[1977,1982,1987],{"type":32,"tag":69,"props":1978,"children":1979},{},[1980],{"type":37,"value":1981},"Métrica",{"type":32,"tag":69,"props":1983,"children":1984},{},[1985],{"type":37,"value":1986},"Vue 3.5 SSR",{"type":32,"tag":69,"props":1988,"children":1989},{},[1990],{"type":37,"value":1991},"Vapor Mode",{"type":32,"tag":90,"props":1993,"children":1994},{},[1995,2012,2029],{"type":32,"tag":65,"props":1996,"children":1997},{},[1998,2003,2007],{"type":32,"tag":97,"props":1999,"children":2000},{},[2001],{"type":37,"value":2002},"Bundle size",{"type":32,"tag":97,"props":2004,"children":2005},{},[2006],{"type":37,"value":129},{"type":32,"tag":97,"props":2008,"children":2009},{},[2010],{"type":37,"value":2011},"55kb",{"type":32,"tag":65,"props":2013,"children":2014},{},[2015,2020,2024],{"type":32,"tag":97,"props":2016,"children":2017},{},[2018],{"type":37,"value":2019},"Hydration time",{"type":32,"tag":97,"props":2021,"children":2022},{},[2023],{"type":37,"value":134},{"type":32,"tag":97,"props":2025,"children":2026},{},[2027],{"type":37,"value":2028},"0ms",{"type":32,"tag":65,"props":2030,"children":2031},{},[2032,2037,2042],{"type":32,"tag":97,"props":2033,"children":2034},{},[2035],{"type":37,"value":2036},"Runtime overhead",{"type":32,"tag":97,"props":2038,"children":2039},{},[2040],{"type":37,"value":2041},"4.2kb",{"type":32,"tag":97,"props":2043,"children":2044},{},[2045],{"type":37,"value":2046},"0.8kb",{"type":32,"tag":33,"props":2048,"children":2049},{},[2050],{"type":37,"value":2051},"En un POC de Roibase con headless storefront, Vapor Mode bajó TBT en product listing de 800ms a 140ms. Pero Vapor Mode aún no está listo para producción — Vue Router integration está en beta, el soporte de librerías third-party es limitado. Se espera que sea stable en 2027 Q2.",{"type":32,"tag":40,"props":2053,"children":2055},{"id":2054},"tomando-decisiones-basadas-en-números",[2056],{"type":37,"value":2057},"Tomando Decisiones Basadas en Números",{"type":32,"tag":33,"props":2059,"children":2060},{},[2061],{"type":37,"value":2062},"Para decidir si un component debe ser server o client, usa estas métricas:",{"type":32,"tag":2064,"props":2065,"children":2066},"ol",{},[2067,2077,2087,2097],{"type":32,"tag":733,"props":2068,"children":2069},{},[2070,2075],{"type":32,"tag":723,"props":2071,"children":2072},{},[2073],{"type":37,"value":2074},"Probabilidad de interactividad:",{"type":37,"value":2076}," ¿El X% de usuarios interactúa con este component en los primeros 5 segundos? Si es >60% → client component.",{"type":32,"tag":733,"props":2078,"children":2079},{},[2080,2085],{"type":32,"tag":723,"props":2081,"children":2082},{},[2083],{"type":37,"value":2084},"Impact de bundle:",{"type":37,"value":2086}," ¿Cuántos kb adicionales agrega al bundle si va a cliente? >50kb → considera RSC + lazy load.",{"type":32,"tag":733,"props":2088,"children":2089},{},[2090,2095],{"type":32,"tag":723,"props":2091,"children":2092},{},[2093],{"type":37,"value":2094},"Importancia SEO:",{"type":37,"value":2096}," ¿Necesita search engines indexar este contenido? Sí → RSC o SSR.",{"type":32,"tag":733,"props":2098,"children":2099},{},[2100,2105],{"type":32,"tag":723,"props":2101,"children":2102},{},[2103],{"type":37,"value":2104},"Freshness de datos:",{"type":37,"value":2106}," ¿Los datos cambian en cada request? No → static generation. Sí → RSC o API fetch.",{"type":32,"tag":33,"props":2108,"children":2109},{},[2110],{"type":37,"value":2111},"Matriz de decisión (proyecto Shopify de Roibase):",{"type":32,"tag":57,"props":2113,"children":2114},{},[2115,2146],{"type":32,"tag":61,"props":2116,"children":2117},{},[2118],{"type":32,"tag":65,"props":2119,"children":2120},{},[2121,2126,2131,2136,2141],{"type":32,"tag":69,"props":2122,"children":2123},{},[2124],{"type":37,"value":2125},"Component",{"type":32,"tag":69,"props":2127,"children":2128},{},[2129],{"type":37,"value":2130},"Interactividad",{"type":32,"tag":69,"props":2132,"children":2133},{},[2134],{"type":37,"value":2135},"Impact Bundle",{"type":32,"tag":69,"props":2137,"children":2138},{},[2139],{"type":37,"value":2140},"SEO",{"type":32,"tag":69,"props":2142,"children":2143},{},[2144],{"type":37,"value":2145},"Decisión",{"type":32,"tag":90,"props":2147,"children":2148},{},[2149,2177,2205,2233],{"type":32,"tag":65,"props":2150,"children":2151},{},[2152,2157,2162,2167,2172],{"type":32,"tag":97,"props":2153,"children":2154},{},[2155],{"type":37,"value":2156},"Product grid",{"type":32,"tag":97,"props":2158,"children":2159},{},[2160],{"type":37,"value":2161},"12%",{"type":32,"tag":97,"props":2163,"children":2164},{},[2165],{"type":37,"value":2166},"85kb",{"type":32,"tag":97,"props":2168,"children":2169},{},[2170],{"type":37,"value":2171},"Crítico",{"type":32,"tag":97,"props":2173,"children":2174},{},[2175],{"type":37,"value":2176},"RSC",{"type":32,"tag":65,"props":2178,"children":2179},{},[2180,2185,2190,2195,2200],{"type":32,"tag":97,"props":2181,"children":2182},{},[2183],{"type":37,"value":2184},"Add to cart",{"type":32,"tag":97,"props":2186,"children":2187},{},[2188],{"type":37,"value":2189},"78%",{"type":32,"tag":97,"props":2191,"children":2192},{},[2193],{"type":37,"value":2194},"8kb",{"type":32,"tag":97,"props":2196,"children":2197},{},[2198],{"type":37,"value":2199},"Innecesario",{"type":32,"tag":97,"props":2201,"children":2202},{},[2203],{"type":37,"value":2204},"Client",{"type":32,"tag":65,"props":2206,"children":2207},{},[2208,2213,2218,2223,2228],{"type":32,"tag":97,"props":2209,"children":2210},{},[2211],{"type":37,"value":2212},"Related products",{"type":32,"tag":97,"props":2214,"children":2215},{},[2216],{"type":37,"value":2217},"23%",{"type":32,"tag":97,"props":2219,"children":2220},{},[2221],{"type":37,"value":2222},"45kb",{"type":32,"tag":97,"props":2224,"children":2225},{},[2226],{"type":37,"value":2227},"Medio",{"type":32,"tag":97,"props":2229,"children":2230},{},[2231],{"type":37,"value":2232},"RSC + lazy",{"type":32,"tag":65,"props":2234,"children":2235},{},[2236,2241,2246,2251,2256],{"type":32,"tag":97,"props":2237,"children":2238},{},[2239],{"type":37,"value":2240},"Search modal",{"type":32,"tag":97,"props":2242,"children":2243},{},[2244],{"type":37,"value":2245},"55%",{"type":32,"tag":97,"props":2247,"children":2248},{},[2249],{"type":37,"value":2250},"62kb",{"type":32,"tag":97,"props":2252,"children":2253},{},[2254],{"type":37,"value":2255},"Bajo",{"type":32,"tag":97,"props":2257,"children":2258},{},[2259],{"type":37,"value":2260},"Client (preload)",{"type":32,"tag":33,"props":2262,"children":2263},{},[2264,2266,2272],{"type":37,"value":2265},"El search modal está por debajo del threshold crítico pero la UX es sensible. Solución: precargar el component con ",{"type":32,"tag":181,"props":2267,"children":2269},{"className":2268},[],[2270],{"type":37,"value":2271},"\u003Clink rel=\"modulepreload\">",{"type":37,"value":2273},". Latency al primer clic baja a 40ms.",{"type":32,"tag":40,"props":2275,"children":2277},{"id":2276},"aplicación-práctica-shopify-hydrogen-20",[2278],{"type":37,"value":2279},"Aplicación Práctica: Shopify Hydrogen 2.0",{"type":32,"tag":33,"props":2281,"children":2282},{},[2283],{"type":37,"value":2284},"Cómo dibujamos los boundaries en un storefront e-commerce:",{"type":32,"tag":198,"props":2286,"children":2288},{"code":2287,"language":830,"meta":16,"className":831,"style":16},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\nimport { json } from '@shopify\u002Fremix-oxygen'\nimport { useLoaderData } from '@remix-run\u002Freact'\n\nexport async function loader({ params, context }) {\n  const { collection } = await context.storefront.query(COLLECTION_QUERY, {\n    variables: { handle: params.handle }\n  })\n  return json({ collection })\n}\n\nexport default function Collection() {\n  const { collection } = useLoaderData()\n  \n  return (\n    \u003Cdiv>\n      {\u002F* Server component — metadata estática *\u002F}\n      \u003CCollectionHeader \n        title={collection.title} \n        description={collection.description} \n      \u002F>\n      \n      {\u002F* Client component — filtering, sorting *\u002F}\n      \u003CProductFilters facets={collection.facets} \u002F>\n      \n      {\u002F* Server component — product cards *\u002F}\n      \u003CProductGrid products={collection.products} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n",[2289],{"type":32,"tag":181,"props":2290,"children":2291},{"__ignoreMap":16},[2292,2300,2321,2342,2349,2392,2446,2454,2462,2479,2486,2493,2517,2549,2557,2568,2583,2599,2615,2632,2649,2656,2663,2679,2705,2712,2728,2752,2767,2774],{"type":32,"tag":208,"props":2293,"children":2294},{"class":210,"line":211},[2295],{"type":32,"tag":208,"props":2296,"children":2297},{"style":352},[2298],{"type":37,"value":2299},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":2301,"children":2302},{"class":210,"line":238},[2303,2307,2312,2316],{"type":32,"tag":208,"props":2304,"children":2305},{"style":242},[2306],{"type":37,"value":245},{"type":32,"tag":208,"props":2308,"children":2309},{"style":215},[2310],{"type":37,"value":2311}," { json } ",{"type":32,"tag":208,"props":2313,"children":2314},{"style":242},[2315],{"type":37,"value":255},{"type":32,"tag":208,"props":2317,"children":2318},{"style":258},[2319],{"type":37,"value":2320}," '@shopify\u002Fremix-oxygen'\n",{"type":32,"tag":208,"props":2322,"children":2323},{"class":210,"line":264},[2324,2328,2333,2337],{"type":32,"tag":208,"props":2325,"children":2326},{"style":242},[2327],{"type":37,"value":245},{"type":32,"tag":208,"props":2329,"children":2330},{"style":215},[2331],{"type":37,"value":2332}," { useLoaderData } ",{"type":32,"tag":208,"props":2334,"children":2335},{"style":242},[2336],{"type":37,"value":255},{"type":32,"tag":208,"props":2338,"children":2339},{"style":258},[2340],{"type":37,"value":2341}," '@remix-run\u002Freact'\n",{"type":32,"tag":208,"props":2343,"children":2344},{"class":210,"line":274},[2345],{"type":32,"tag":208,"props":2346,"children":2347},{"emptyLinePlaceholder":268},[2348],{"type":37,"value":271},{"type":32,"tag":208,"props":2350,"children":2351},{"class":210,"line":304},[2352,2356,2361,2365,2370,2374,2379,2383,2388],{"type":32,"tag":208,"props":2353,"children":2354},{"style":242},[2355],{"type":37,"value":851},{"type":32,"tag":208,"props":2357,"children":2358},{"style":242},[2359],{"type":37,"value":2360}," async",{"type":32,"tag":208,"props":2362,"children":2363},{"style":242},[2364],{"type":37,"value":861},{"type":32,"tag":208,"props":2366,"children":2367},{"style":227},[2368],{"type":37,"value":2369}," loader",{"type":32,"tag":208,"props":2371,"children":2372},{"style":215},[2373],{"type":37,"value":871},{"type":32,"tag":208,"props":2375,"children":2376},{"style":874},[2377],{"type":37,"value":2378},"params",{"type":32,"tag":208,"props":2380,"children":2381},{"style":215},[2382],{"type":37,"value":703},{"type":32,"tag":208,"props":2384,"children":2385},{"style":874},[2386],{"type":37,"value":2387},"context",{"type":32,"tag":208,"props":2389,"children":2390},{"style":215},[2391],{"type":37,"value":882},{"type":32,"tag":208,"props":2393,"children":2394},{"class":210,"line":340},[2395,2399,2404,2409,2414,2418,2422,2427,2432,2436,2441],{"type":32,"tag":208,"props":2396,"children":2397},{"style":242},[2398],{"type":37,"value":1149},{"type":32,"tag":208,"props":2400,"children":2401},{"style":215},[2402],{"type":37,"value":2403}," { ",{"type":32,"tag":208,"props":2405,"children":2406},{"style":283},[2407],{"type":37,"value":2408},"collection",{"type":32,"tag":208,"props":2410,"children":2411},{"style":215},[2412],{"type":37,"value":2413}," } ",{"type":32,"tag":208,"props":2415,"children":2416},{"style":242},[2417],{"type":37,"value":400},{"type":32,"tag":208,"props":2419,"children":2420},{"style":242},[2421],{"type":37,"value":405},{"type":32,"tag":208,"props":2423,"children":2424},{"style":215},[2425],{"type":37,"value":2426}," context.storefront.",{"type":32,"tag":208,"props":2428,"children":2429},{"style":227},[2430],{"type":37,"value":2431},"query",{"type":32,"tag":208,"props":2433,"children":2434},{"style":215},[2435],{"type":37,"value":327},{"type":32,"tag":208,"props":2437,"children":2438},{"style":283},[2439],{"type":37,"value":2440},"COLLECTION_QUERY",{"type":32,"tag":208,"props":2442,"children":2443},{"style":215},[2444],{"type":37,"value":2445},", {\n",{"type":32,"tag":208,"props":2447,"children":2448},{"class":210,"line":348},[2449],{"type":32,"tag":208,"props":2450,"children":2451},{"style":215},[2452],{"type":37,"value":2453},"    variables: { handle: params.handle }\n",{"type":32,"tag":208,"props":2455,"children":2456},{"class":210,"line":358},[2457],{"type":32,"tag":208,"props":2458,"children":2459},{"style":215},[2460],{"type":37,"value":2461},"  })\n",{"type":32,"tag":208,"props":2463,"children":2464},{"class":210,"line":26},[2465,2469,2474],{"type":32,"tag":208,"props":2466,"children":2467},{"style":242},[2468],{"type":37,"value":890},{"type":32,"tag":208,"props":2470,"children":2471},{"style":227},[2472],{"type":37,"value":2473}," json",{"type":32,"tag":208,"props":2475,"children":2476},{"style":215},[2477],{"type":37,"value":2478},"({ collection })\n",{"type":32,"tag":208,"props":2480,"children":2481},{"class":210,"line":418},[2482],{"type":32,"tag":208,"props":2483,"children":2484},{"style":215},[2485],{"type":37,"value":928},{"type":32,"tag":208,"props":2487,"children":2488},{"class":210,"line":427},[2489],{"type":32,"tag":208,"props":2490,"children":2491},{"emptyLinePlaceholder":268},[2492],{"type":37,"value":271},{"type":32,"tag":208,"props":2494,"children":2495},{"class":210,"line":435},[2496,2500,2504,2508,2513],{"type":32,"tag":208,"props":2497,"children":2498},{"style":242},[2499],{"type":37,"value":851},{"type":32,"tag":208,"props":2501,"children":2502},{"style":242},[2503],{"type":37,"value":856},{"type":32,"tag":208,"props":2505,"children":2506},{"style":242},[2507],{"type":37,"value":861},{"type":32,"tag":208,"props":2509,"children":2510},{"style":227},[2511],{"type":37,"value":2512}," Collection",{"type":32,"tag":208,"props":2514,"children":2515},{"style":215},[2516],{"type":37,"value":1273},{"type":32,"tag":208,"props":2518,"children":2519},{"class":210,"line":444},[2520,2524,2528,2532,2536,2540,2545],{"type":32,"tag":208,"props":2521,"children":2522},{"style":242},[2523],{"type":37,"value":1149},{"type":32,"tag":208,"props":2525,"children":2526},{"style":215},[2527],{"type":37,"value":2403},{"type":32,"tag":208,"props":2529,"children":2530},{"style":283},[2531],{"type":37,"value":2408},{"type":32,"tag":208,"props":2533,"children":2534},{"style":215},[2535],{"type":37,"value":2413},{"type":32,"tag":208,"props":2537,"children":2538},{"style":242},[2539],{"type":37,"value":400},{"type":32,"tag":208,"props":2541,"children":2542},{"style":227},[2543],{"type":37,"value":2544}," useLoaderData",{"type":32,"tag":208,"props":2546,"children":2547},{"style":215},[2548],{"type":37,"value":415},{"type":32,"tag":208,"props":2550,"children":2551},{"class":210,"line":465},[2552],{"type":32,"tag":208,"props":2553,"children":2554},{"style":215},[2555],{"type":37,"value":2556},"  \n",{"type":32,"tag":208,"props":2558,"children":2559},{"class":210,"line":483},[2560,2564],{"type":32,"tag":208,"props":2561,"children":2562},{"style":242},[2563],{"type":37,"value":890},{"type":32,"tag":208,"props":2565,"children":2566},{"style":215},[2567],{"type":37,"value":895},{"type":32,"tag":208,"props":2569,"children":2570},{"class":210,"line":491},[2571,2575,2579],{"type":32,"tag":208,"props":2572,"children":2573},{"style":215},[2574],{"type":37,"value":566},{"type":32,"tag":208,"props":2576,"children":2577},{"style":221},[2578],{"type":37,"value":544},{"type":32,"tag":208,"props":2580,"children":2581},{"style":215},[2582],{"type":37,"value":235},{"type":32,"tag":208,"props":2584,"children":2585},{"class":210,"line":508},[2586,2590,2595],{"type":32,"tag":208,"props":2587,"children":2588},{"style":215},[2589],{"type":37,"value":918},{"type":32,"tag":208,"props":2591,"children":2592},{"style":352},[2593],{"type":37,"value":2594},"\u002F* Server component — metadata estática *\u002F",{"type":32,"tag":208,"props":2596,"children":2597},{"style":215},[2598],{"type":37,"value":928},{"type":32,"tag":208,"props":2600,"children":2601},{"class":210,"line":516},[2602,2606,2611],{"type":32,"tag":208,"props":2603,"children":2604},{"style":215},[2605],{"type":37,"value":936},{"type":32,"tag":208,"props":2607,"children":2608},{"style":283},[2609],{"type":37,"value":2610},"CollectionHeader",{"type":32,"tag":208,"props":2612,"children":2613},{"style":215},[2614],{"type":37,"value":1405},{"type":32,"tag":208,"props":2616,"children":2617},{"class":210,"line":533},[2618,2623,2627],{"type":32,"tag":208,"props":2619,"children":2620},{"style":227},[2621],{"type":37,"value":2622},"        title",{"type":32,"tag":208,"props":2624,"children":2625},{"style":242},[2626],{"type":37,"value":400},{"type":32,"tag":208,"props":2628,"children":2629},{"style":215},[2630],{"type":37,"value":2631},"{collection.title} \n",{"type":32,"tag":208,"props":2633,"children":2634},{"class":210,"line":551},[2635,2640,2644],{"type":32,"tag":208,"props":2636,"children":2637},{"style":227},[2638],{"type":37,"value":2639},"        description",{"type":32,"tag":208,"props":2641,"children":2642},{"style":242},[2643],{"type":37,"value":400},{"type":32,"tag":208,"props":2645,"children":2646},{"style":215},[2647],{"type":37,"value":2648},"{collection.description} \n",{"type":32,"tag":208,"props":2650,"children":2651},{"class":210,"line":560},[2652],{"type":32,"tag":208,"props":2653,"children":2654},{"style":215},[2655],{"type":37,"value":1496},{"type":32,"tag":208,"props":2657,"children":2658},{"class":210,"line":593},[2659],{"type":32,"tag":208,"props":2660,"children":2661},{"style":215},[2662],{"type":37,"value":989},{"type":32,"tag":208,"props":2664,"children":2665},{"class":210,"line":602},[2666,2670,2675],{"type":32,"tag":208,"props":2667,"children":2668},{"style":215},[2669],{"type":37,"value":918},{"type":32,"tag":208,"props":2671,"children":2672},{"style":352},[2673],{"type":37,"value":2674},"\u002F* Client component — filtering, sorting *\u002F",{"type":32,"tag":208,"props":2676,"children":2677},{"style":215},[2678],{"type":37,"value":928},{"type":32,"tag":208,"props":2680,"children":2681},{"class":210,"line":611},[2682,2686,2691,2696,2700],{"type":32,"tag":208,"props":2683,"children":2684},{"style":215},[2685],{"type":37,"value":936},{"type":32,"tag":208,"props":2687,"children":2688},{"style":283},[2689],{"type":37,"value":2690},"ProductFilters",{"type":32,"tag":208,"props":2692,"children":2693},{"style":227},[2694],{"type":37,"value":2695}," facets",{"type":32,"tag":208,"props":2697,"children":2698},{"style":242},[2699],{"type":37,"value":400},{"type":32,"tag":208,"props":2701,"children":2702},{"style":215},[2703],{"type":37,"value":2704},"{collection.facets} \u002F>\n",{"type":32,"tag":208,"props":2706,"children":2707},{"class":210,"line":642},[2708],{"type":32,"tag":208,"props":2709,"children":2710},{"style":215},[2711],{"type":37,"value":989},{"type":32,"tag":208,"props":2713,"children":2714},{"class":210,"line":659},[2715,2719,2724],{"type":32,"tag":208,"props":2716,"children":2717},{"style":215},[2718],{"type":37,"value":918},{"type":32,"tag":208,"props":2720,"children":2721},{"style":352},[2722],{"type":37,"value":2723},"\u002F* Server component — product cards *\u002F",{"type":32,"tag":208,"props":2725,"children":2726},{"style":215},[2727],{"type":37,"value":928},{"type":32,"tag":208,"props":2729,"children":2730},{"class":210,"line":1334},[2731,2735,2739,2743,2747],{"type":32,"tag":208,"props":2732,"children":2733},{"style":215},[2734],{"type":37,"value":936},{"type":32,"tag":208,"props":2736,"children":2737},{"style":283},[2738],{"type":37,"value":571},{"type":32,"tag":208,"props":2740,"children":2741},{"style":227},[2742],{"type":37,"value":286},{"type":32,"tag":208,"props":2744,"children":2745},{"style":242},[2746],{"type":37,"value":400},{"type":32,"tag":208,"props":2748,"children":2749},{"style":215},[2750],{"type":37,"value":2751},"{collection.products} \u002F>\n",{"type":32,"tag":208,"props":2753,"children":2754},{"class":210,"line":1343},[2755,2759,2763],{"type":32,"tag":208,"props":2756,"children":2757},{"style":215},[2758],{"type":37,"value":1039},{"type":32,"tag":208,"props":2760,"children":2761},{"style":221},[2762],{"type":37,"value":544},{"type":32,"tag":208,"props":2764,"children":2765},{"style":215},[2766],{"type":37,"value":235},{"type":32,"tag":208,"props":2768,"children":2769},{"class":210,"line":1351},[2770],{"type":32,"tag":208,"props":2771,"children":2772},{"style":215},[2773],{"type":37,"value":1055},{"type":32,"tag":208,"props":2775,"children":2776},{"class":210,"line":1363},[2777],{"type":32,"tag":208,"props":2778,"children":2779},{"style":215},[2780],{"type":37,"value":928},{"type":32,"tag":33,"props":2782,"children":2783},{},[2784],{"type":37,"value":2785},"Con esta arquitectura:",{"type":32,"tag":729,"props":2787,"children":2788},{},[2789,2794,2799,2804,2809],{"type":32,"tag":733,"props":2790,"children":2791},{},[2792],{"type":37,"value":2793},"Metadata de collection y product cards se renderizan en servidor → SEO-friendly, bundle pequeño",{"type":32,"tag":733,"props":2795,"children":2796},{},[2797],{"type":37,"value":2798},"Filter UI es client component → interactivo, gestiona state",{"type":32,"tag":733,"props":2800,"children":2801},{},[2802],{"type":37,"value":2803},"Bundle inicial: 72kb (filters + event handlers)",{"type":32,"tag":733,"props":2805,"children":2806},{},[2807],{"type":37,"value":2808},"Hydration time: 160ms",{"type":32,"tag":733,"props":2810,"children":2811},{},[2812],{"type":37,"value":2813},"TBT: 240ms",{"type":32,"tag":33,"props":2815,"children":2816},{},[2817],{"type":37,"value":2818},"Si hicieras toda la página como CSR, el bundle sería 210kb, TBT 1100ms. Impact en conversion: +4.2% (A\u002FB test, 14 días, n=48,000).",{"type":32,"tag":33,"props":2820,"children":2821},{},[2822,2824,2831],{"type":37,"value":2823},"La decisión se toma a nivel de component — el tradeoff entre bundle size e interactivity latency es medible. Esta arquitectura alimenta también nuestro ",{"type":32,"tag":780,"props":2825,"children":2828},{"href":2826,"rel":2827},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fui-ux",[784],[2829],{"type":37,"value":2830},"proceso de UI\u002FUX",{"type":37,"value":2832},", generando una matriz de prioridad de components basada en behavioral data — qué elemento debe estar en cliente, cuál debe entregarse vía RSC.",{"type":32,"tag":2834,"props":2835,"children":2836},"style",{},[2837],{"type":37,"value":2838},"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":264,"depth":264,"links":2840},[2841,2844,2845,2848,2849,2850],{"id":42,"depth":238,"text":45,"children":2842},[2843],{"id":171,"depth":264,"text":174},{"id":687,"depth":238,"text":690},{"id":805,"depth":238,"text":808,"children":2846},[2847],{"id":1620,"depth":264,"text":1623},{"id":1954,"depth":238,"text":1957},{"id":2054,"depth":238,"text":2057},{"id":2276,"depth":238,"text":2279},"markdown","content:es:tech:server-components-vs-client-dibujar-la-linea-correcta-en-2026.md","content","es\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026.md","es\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026","md",1785103519687]