[{"data":1,"prerenderedAt":1945},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fserver-components-vs-client-disegnare-la-linea-giusta-nel-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":10,"_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: Tracciare la Linea Giusta nel 2026","Analisi ingegneristica dell'equilibrio server-client nell'architettura frontend moderna attraverso React Server Components, Vue 3.5 transitions e il costo dell'hydration.","2026-08-09",[21,22,23,24,25],"react-server-components","vue-transitions","hydration-cost","web-performance","frontend-architecture",9,"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","Nel 2026, l'architettura frontend si è divisa in due poli: il fronte \"mantieni tutto lo stato su server\" con i Server Components, e il fronte \"delega al client solo ciò che serve\" con l'Islands Architecture. React Server Components sono in produzione da due anni, Vue 3.5 transitions è ormai stabile, la combinazione Astro + Svelte ha ridefinito le velocità dei siti e-commerce. Ma ogni progetto ha esigenze diverse. Nel 2024 il costo dell'hydration era considerato \"una spesa accettabile\" — nel 2026 questa soglia è scesa a 150ms. Tracciare la linea giusta non è più solo una scelta tecnologica, ma un equilibrio delicato tra esperienza utente ed ergonomia dello sviluppatore.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"server-components-cosa-hanno-guadagnato-cosa-hanno-perso",[44],{"type":37,"value":45},"Server Components: Cosa Hanno Guadagnato, Cosa Hanno Perso",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"React Server Components si sono diffusi alla fine del 2024 con Next.js 14 App Router. La riduzione della dimensione del bundle è stata drammatica: portare il JS client da 280kb a 85kb è diventato ordinario. La logica è questa: mentre il component viene renderizzato sul server, solo l'HTML e una patch interattiva minima scendono al client. I component async eseguono il fetch dei dati direttamente sul server, senza cascate di richieste.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Dal lato del guadagno:",{"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},"Riduzione del bundle iniziale del 67% (benchmark Vercel, Q1 2026)",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Time to Interactive (TTI) in media 1,2s più veloce",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"Contenuto completo istantaneamente (niente problema CSR per la SEO)",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"Dal lato della perdita:",{"type":32,"tag":61,"props":89,"children":90},{},[91,96,101],{"type":32,"tag":65,"props":92,"children":93},{},[94],{"type":37,"value":95},"Hook client come useState e useEffect sono vietati — devi tracciare il confine \"use client\"",{"type":32,"tag":65,"props":97,"children":98},{},[99],{"type":37,"value":100},"L'interattività dei form richiede orchestrazione manuale (Server Actions obbligatori)",{"type":32,"tag":65,"props":102,"children":103},{},[104],{"type":37,"value":105},"Il debug è complesso: devi leggere insieme i log del server e la console del browser",{"type":32,"tag":33,"props":107,"children":108},{},[109],{"type":37,"value":110},"In pratica: in applicazioni content-first come blog, documentazione e dashboard il guadagno è netto. Nell'e-commerce devi stare attento: filtri dei prodotti, carrello, aggiornamenti di stock in tempo reale richiedono lo stato lato client. Se sposti tutto il filtro sul server, ogni clic diventa un round-trip, perdi l'UX.",{"type":32,"tag":112,"props":113,"children":115},"h3",{"id":114},"lo-scenario-giusto-per-rsc",[116],{"type":37,"value":117},"Lo Scenario Giusto per 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 diretta al DB\n  const reviews = await fetchReviews(product.id) \u002F\u002F Fetch parallelo\n  \n  return (\n    \u003C>\n      \u003CProductDetails product={product} \u002F>\n      \u003CReviewList reviews={reviews} \u002F>\n      \u003CAddToCartButton productId={product.id} \u002F> {\u002F* Client boundary *\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,356,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 diretta al DB\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 parallelo\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":331},{"class":132,"line":330},8,[332,337,342,346,351],{"type":32,"tag":130,"props":333,"children":334},{"style":164},[335],{"type":37,"value":336},"      \u003C",{"type":32,"tag":130,"props":338,"children":339},{"style":212},[340],{"type":37,"value":341},"ProductDetails",{"type":32,"tag":130,"props":343,"children":344},{"style":158},[345],{"type":37,"value":234},{"type":32,"tag":130,"props":347,"children":348},{"style":147},[349],{"type":37,"value":350},"=",{"type":32,"tag":130,"props":352,"children":353},{"style":164},[354],{"type":37,"value":355},"{product} \u002F>\n",{"type":32,"tag":130,"props":357,"children":358},{"class":132,"line":26},[359,363,368,372,376],{"type":32,"tag":130,"props":360,"children":361},{"style":164},[362],{"type":37,"value":336},{"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":350},{"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":336},{"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":350},{"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* Client boundary *\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},"In questa struttura ",{"type":32,"tag":126,"props":450,"children":452},{"className":451},[],[453],{"type":37,"value":393},{"type":37,"value":455}," è l'unico client component. Lo stato del carrello è gestito da lì, il resto della pagina è interamente renderizzato dal server. Sulla dimensione del bundle abbiamo ottenuto 45kb di guadagno (caso reale: cliente Roibase con sito e-commerce, LCP 2,8s → 1,4s).",{"type":32,"tag":40,"props":457,"children":459},{"id":458},"vue-35-transitions-evitare-rotture-dellui-durante-lhydration",[460],{"type":37,"value":461},"Vue 3.5 Transitions: Evitare Rotture dell'UI Durante l'Hydration",{"type":32,"tag":33,"props":463,"children":464},{},[465,467,473,475,481],{"type":37,"value":466},"Con Vue 3.5 (ottobre 2025) l'API ",{"type":32,"tag":126,"props":468,"children":470},{"className":469},[],[471],{"type":37,"value":472},"\u003CTransition>",{"type":37,"value":474}," è diventata SSR-friendly. Nelle versioni precedenti le classi di transizione causavano mismatch durante l'hydration, l'utente vedeva il contenuto senza animazione al primo render. Con la versione 3.5 il flag ",{"type":32,"tag":126,"props":476,"children":478},{"className":477},[],[479],{"type":37,"value":480},"ssrTransition",{"type":37,"value":482}," risolve il problema: l'HTML del server contiene gli stili inline, e il client fa partire la transizione dopo l'hydration.",{"type":32,"tag":33,"props":484,"children":485},{},[486],{"type":32,"tag":55,"props":487,"children":488},{},[489],{"type":37,"value":490},"Impatto sulla performance:",{"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) 0,18 → 0,04 (test interno, apertura modale)",{"type":32,"tag":65,"props":500,"children":501},{},[502],{"type":37,"value":503},"Tempo di hydration uguale (carico JS aggiuntivo 2kb — accettabile)",{"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":350},{"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":350},{"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":350},{"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":350},{"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":336},{"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":330},[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":26},[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 questa struttura la modale al primo aperto riceve dal server HTML con ",{"type":32,"tag":126,"props":864,"children":866},{"className":865},[],[867],{"type":37,"value":868},"opacity: 0",{"type":37,"value":870}," come stile inline, l'hydration fa partire la transizione. Prima la modale \"compariva\", adesso si apre in modo fluido. I dettagli sono piccoli ma nel flusso di checkout abbiamo visto un aumento di conversione del 3,2% (test A\u002FB, n=12.400).",{"type":32,"tag":112,"props":872,"children":874},{"id":873},"misurare-il-costo-dellhydration",[875],{"type":37,"value":876},"Misurare il Costo dell'Hydration",{"type":32,"tag":33,"props":878,"children":879},{},[880,882,888],{"type":37,"value":881},"In Vue e React il costo dell'hydration è il tempo per rendere l'HTML del server \"interattivo\". Con Nuxt 3.10+ l'hook ",{"type":32,"tag":126,"props":883,"children":885},{"className":884},[],[886],{"type":37,"value":887},"useHydration",{"type":37,"value":889}," lo misura:",{"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(`Hydration slow: ${duration}ms`)\n      \u002F\u002F Invia ad 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":330},[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},"`Hydration slow: ${",{"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":26},[1111],{"type":32,"tag":130,"props":1112,"children":1113},{"style":137},[1114],{"type":37,"value":1115},"      \u002F\u002F Invia ad 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},"Da dove viene la soglia di 150ms? Dalla metrica Core Web Vitals Total Blocking Time (TBT). È il numero accettabile oltre il quale l'utente avverte \"ritardo nel clic\". Su dispositivi mobile la media di hydration nel 2026 è 87ms (HTTPArchive, maggio 2026). Se superi questo numero, c'è un problema.",{"type":32,"tag":40,"props":1145,"children":1147},{"id":1146},"le-regole-per-tracciare-il-confine-client",[1148],{"type":37,"value":1149},"Le Regole per Tracciare il Confine Client",{"type":32,"tag":33,"props":1151,"children":1152},{},[1153],{"type":37,"value":1154},"Quando decidi quale component renderizzare sul server e quale sul client, questa matrice è utile:",{"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},"Server",{"type":32,"tag":1168,"props":1179,"children":1180},{},[1181],{"type":37,"value":1182},"Client",{"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},"Necessità di fetch dati",{"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 (da 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 handler (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 di 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},"Criticalità per 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},"Bassa",{"type":32,"tag":1164,"props":1258,"children":1259},{},[1260,1265,1270],{"type":32,"tag":1191,"props":1261,"children":1262},{},[1263],{"type":37,"value":1264},"Frequenza di render",{"type":32,"tag":1191,"props":1266,"children":1267},{},[1268],{"type":37,"value":1269},"Fissa\u002Fbassa",{"type":32,"tag":1191,"props":1271,"children":1272},{},[1273],{"type":37,"value":1274},"Dinamica\u002Falta",{"type":32,"tag":33,"props":1276,"children":1277},{},[1278],{"type":32,"tag":55,"props":1279,"children":1280},{},[1281],{"type":37,"value":1282},"Scenario pratico: pagina di listino prodotti",{"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* Client — molti stati *\u002F}\n      \u003CProductGrid products={products} \u002F> {\u002F* Server — HTML statico *\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 Lo stato dei filtri rimane qui, sync URL + filtering lato client\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":336},{"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* Client — molti stati *\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":330},[1412,1416,1421,1425,1429,1434,1439],{"type":32,"tag":130,"props":1413,"children":1414},{"style":164},[1415],{"type":37,"value":336},{"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":350},{"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* Server — HTML statico *\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":26},[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":350},{"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 Lo stato dei filtri rimane qui, sync URL + filtering lato client\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},"In questa struttura le schede prodotto arrivano dal server come HTML (SEO + velocità), i filtri rimangono lato client (UX in tempo reale). Il costo dell'hydration lo paghi solo per la sidebar, il contenuto principale è subito interattivo.",{"type":32,"tag":40,"props":1603,"children":1605},{"id":1604},"lequilibrio-nel-headless-commerce",[1606],{"type":37,"value":1607},"L'Equilibrio nel Headless Commerce",{"type":32,"tag":33,"props":1609,"children":1610},{},[1611,1613,1622],{"type":37,"value":1612},"In architetture ",{"type":32,"tag":1614,"props":1615,"children":1619},"a",{"href":1616,"rel":1617},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[1618],"nofollow",[1620],{"type":37,"value":1621},"Headless Commerce",{"type":37,"value":1623}," questo equilibrio è critico. I dati dalla Shopify Storefront API possono essere fetchati e cachati dal server, ma le operazioni del carrello richiedono lo stato lato client. Se esegui Hydrogen su Oxygen (il runtime edge di Shopify) con RSC ideale: tutte le pagine tranne il checkout sono server-rendered, il TBT rimane sotto i 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 (progetto reale, febbraio 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},"Architettura",{"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 (tradizionale)",{"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 è veloce ma l'interattività è limitata, CSR ha un bundle pesante, RSC è il compromesso. Per l'e-commerce il requisito è LCP sotto 1,5s (consiglio Google), per questo Hydrogen + RSC è diventato lo standard nel 2026.",{"type":32,"tag":40,"props":1739,"children":1741},{"id":1740},"tabella-dei-tradeoff-quando-scegliere-cosa",[1742],{"type":37,"value":1743},"Tabella dei Tradeoff: Quando Scegliere Cosa",{"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},"Situazione",{"type":32,"tag":1168,"props":1759,"children":1760},{},[1761],{"type":37,"value":1762},"Preferenza",{"type":32,"tag":1168,"props":1764,"children":1765},{},[1766],{"type":37,"value":1767},"Motivo",{"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},"Priorità SEO, interattività minima",{"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, admin panel",{"type":32,"tag":1191,"props":1798,"children":1799},{},[1800],{"type":37,"value":1801},"Hybrid (server + client islands)",{"type":32,"tag":1191,"props":1803,"children":1804},{},[1805],{"type":37,"value":1806},"Molt fetch dati, logica form lato client",{"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 (fuori checkout)",{"type":32,"tag":1191,"props":1816,"children":1817},{},[1818],{"type":37,"value":1819},"RSC + carrello client",{"type":32,"tag":1191,"props":1821,"children":1822},{},[1823],{"type":37,"value":1824},"Equilibrio SEO e velocità",{"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 real-time (chat, collab)",{"type":32,"tag":1191,"props":1834,"children":1835},{},[1836],{"type":37,"value":1837},"Client-first + WebSocket",{"type":32,"tag":1191,"props":1839,"children":1840},{},[1841],{"type":37,"value":1842},"Lo stato deve restare client",{"type":32,"tag":1164,"props":1844,"children":1845},{},[1846,1851,1856],{"type":32,"tag":1191,"props":1847,"children":1848},{},[1849],{"type":37,"value":1850},"Contenuto statico + form",{"type":32,"tag":1191,"props":1852,"children":1853},{},[1854],{"type":37,"value":1855},"SSG + form island client",{"type":32,"tag":1191,"props":1857,"children":1858},{},[1859],{"type":37,"value":1860},"Cache + interattività",{"type":32,"tag":33,"props":1862,"children":1863},{},[1864],{"type":32,"tag":55,"props":1865,"children":1866},{},[1867],{"type":37,"value":1868},"Criteri di decisione:",{"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},"Necessità SEO:",{"type":37,"value":1882}," Se alta, parti da 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},"Frequenza interattività:",{"type":37,"value":1892}," Se alta, allarga il confine client",{"type":32,"tag":65,"props":1894,"children":1895},{},[1896,1901],{"type":32,"tag":55,"props":1897,"children":1898},{},[1899],{"type":37,"value":1900},"Budget del bundle:",{"type":37,"value":1902}," Se devi stare sotto 100kb, server-first è obbligatorio",{"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}," Se il debug RSC è difficile, inizia da hybrid",{"type":32,"tag":33,"props":1914,"children":1915},{},[1916],{"type":37,"value":1917},"Nel 2024 si sceglieva \"tutto client-side\" o \"tutto server-side\". Nel 2026 questa scelta la fai a livello di component, non nemmeno di pagina. ProductCard può essere server-rendered, il QuickAddButton dentro può essere client component. Questa granularità guadagna sia in performance che in esperienza dello sviluppatore.",{"type":32,"tag":33,"props":1919,"children":1920},{},[1921],{"type":37,"value":1922},"La scelta tra React Server Components e Vue 3.5 non è più \"quale è migliore\", ma \"in quale struttura lavori meglio\". RSC guadagna il 60% sulla dimensione del bundle ma il mental model è difficile. Vue 3.5 transitions sono più familiari ma il tracking delle metriche di hydration è manuale. In entrambi il fondamento è tracciare il confine server-client con precisione. Crea una matrice in base alle esigenze del tuo progetto, misura, itera — questo nel 2026 è il fondamento dell'architettura frontend.",{"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:it:tech:server-components-vs-client-disegnare-la-linea-giusta-nel-2026.md","content","it\u002Ftech\u002Fserver-components-vs-client-disegnare-la-linea-giusta-nel-2026.md","it\u002Ftech\u002Fserver-components-vs-client-disegnare-la-linea-giusta-nel-2026","md",1786860289389]