[{"data":1,"prerenderedAt":2849},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio":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":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":2843,"_id":2844,"_source":2845,"_file":2846,"_stem":2847,"_extension":2848},"tech",false,"","Server Components vs Client: Nel 2026, Dove Tracciare la Linea","Dove tracciare il confine tra React Server Components e il rendering lato client? Costi di hydration, dimensioni bundle e tradeoff di runtime: una guida concreta.","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":2831},"root",[31,39,46,51,56,163,168,175,197,673,685,691,719,728,748,756,769,774,790,798,803,809,814,819,1598,1610,1616,1621,1626,1691,1696,1925,1944,1950,1955,1960,2039,2044,2050,2055,2099,2104,2253,2266,2272,2277,2773,2778,2806,2811,2825],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Nel 2024, React Server Components è entrato in production. Nel 2025, Vue 3.5 ha stabilizzato i transition hooks. Nel 2026, le domande rimangono identiche: quale component deve essere renderizzato sul server, quale sul client? La griglia di prodotti della tua vetrina Shopify deve essere RSC o un component Vue Vapor? La risposta è \"dipende dal contesto\", ma come si misura il contesto? Questo articolo offre un framework che quantifica il costo di hydration, la dimensione del bundle e la latenza di interattività — decisioni basate su attribution, non su supposizioni.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"costo-di-hydration-i-numeri-reali",[44],{"type":37,"value":45},"Costo di Hydration: I Numeri Reali",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"L'hydration è il processo di \"animazione\" dell'HTML renderizzato lato server con JavaScript lato client. Prima di Vue 3.5, il costo di full hydration era mediamente 200-800ms (Chrome 120, Android mid-tier). React 18 con Suspense ha ridotto questo dato a 100-400ms tramite chunked hydration, ma non è zero. Next.js 15 con App Router, utilizzando RSC, ha diminuito il bundle client del 40-60% per le pagine — il costo di hydration è calato linearmente.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"I numeri osservati nei nostri progetti Shopify presso Roibase:",{"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},"Scenario",{"type":32,"tag":69,"props":75,"children":76},{},[77],{"type":37,"value":78},"Dimensione Bundle",{"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},"Questa tabella riflette i field data su Android mid-tier (Moto G Power, 4GB RAM). Una pagina di product listing in full CSR blocca il main thread per 680ms durante l'hydration — l'utente clicca su un filtro ma l'UI non risponde. Con RSC, la stessa pagina renderizza le product card sul server e invia solo il component filtro interattivo al client: l'hydration scende a 140ms, il TBT a 220ms.",{"type":32,"tag":169,"props":170,"children":172},"h3",{"id":171},"selective-hydration-con-vue-35-transition-hooks",[173],{"type":37,"value":174},"Selective Hydration con Vue 3.5 Transition Hooks",{"type":32,"tag":33,"props":176,"children":177},{},[178,180,187,189,195],{"type":37,"value":179},"Vue 3.5 ha stabilizzato i hook ",{"type":32,"tag":181,"props":182,"children":184},"code",{"className":183},[],[185],{"type":37,"value":186},"onBeforeMount",{"type":37,"value":188}," e ",{"type":32,"tag":181,"props":190,"children":192},{"className":191},[],[193],{"type":37,"value":194},"onServerPrefetch",{"type":37,"value":196},". Questo permette di separare la parte del component renderizzata sul server da quella hydrata sul client:",{"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 Eseguito sul server, saltato sul client\nonServerPrefetch(async () => {\n  products.value = await fetchProducts()\n})\n\n\u002F\u002F Eseguito sul client, saltato sul server\nonBeforeMount(() => {\n  isClient.value = true\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Contenuto statico, non hydratato -->\n    \u003CProductGrid :products=\"products\" \u002F>\n    \n    \u003C!-- Component interattivo caricato solo sul client -->\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 Eseguito sul server, saltato sul client\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 Eseguito sul client, saltato sul server\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!-- Contenuto statico, non hydratato -->\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 interattivo caricato solo sul client -->\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},"Questo pattern ha ridotto la dimensione del bundle da 180kb a 110kb — il component ",{"type":32,"tag":181,"props":679,"children":681},{"className":680},[],[682],{"type":37,"value":621},{"type":37,"value":684}," viene lazy-caricato. Il costo di hydration è sceso da 420ms a 180ms perché solo la parte interattiva viene hydrata.",{"type":32,"tag":40,"props":686,"children":688},{"id":687},"tradeoff-dimensione-bundle-vs-latenza-di-interattività",[689],{"type":37,"value":690},"Tradeoff Dimensione Bundle vs Latenza di Interattività",{"type":32,"tag":33,"props":692,"children":693},{},[694,696,702,704,710,711,717],{"type":37,"value":695},"RSC non risolve tutti i problemi. Un server component non può reagire alle azioni dell'utente — non può usare ",{"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},". Se l'utente deve cliccare su un prodotto per aprire un modale, quel modale deve essere un component client. È qui che il tradeoff inizia:",{"type":32,"tag":33,"props":720,"children":721},{},[722],{"type":32,"tag":723,"props":724,"children":725},"strong",{},[726],{"type":37,"value":727},"Scenario 1: Product card RSC + modale 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 iniziale: 95kb",{"type":32,"tag":733,"props":739,"children":740},{},[741],{"type":37,"value":742},"Bundle del modale lazy-caricato: 45kb",{"type":32,"tag":733,"props":744,"children":745},{},[746],{"type":37,"value":747},"Latenza del primo clic: 300ms (download 45kb + parsing)",{"type":32,"tag":33,"props":749,"children":750},{},[751],{"type":32,"tag":723,"props":752,"children":753},{},[754],{"type":37,"value":755},"Scenario 2: Card intera + modale 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 iniziale: 185kb",{"type":32,"tag":733,"props":765,"children":766},{},[767],{"type":37,"value":768},"Latenza del primo clic: 80ms (il codice è già presente)",{"type":32,"tag":33,"props":770,"children":771},{},[772],{"type":37,"value":773},"Analisi del conversion rate (Roibase field study 2025): il 78% degli utenti clicca sul primo prodotto entro 3 secondi. Nello Scenario 1, il primo clic è penalizzato da 300ms di delay — il modale non si apre, l'utente clicca di nuovo, frustrazione. Nello Scenario 2, i 90kb aggiuntivi di bundle rappresentano il costo di hydration nel caricamento iniziale della pagina, ma la latenza di interattività è zero.",{"type":32,"tag":33,"props":775,"children":776},{},[777,779,788],{"type":37,"value":778},"Abbiamo risolto questo tradeoff nella nostra ",{"type":32,"tag":780,"props":781,"children":785},"a",{"href":782,"rel":783},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[784],"nofollow",[786],{"type":37,"value":787},"architettura di headless commerce",{"type":37,"value":789}," con questa formula:",{"type":32,"tag":198,"props":791,"children":793},{"code":792},"Probabilità del primo clic × numero di utenti > 60% → client component\nAltrimenti → 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},"Le product card ricevono il 78% dei clic → client component. L'accordeon \"Opzioni di consegna\" viene aperto il 12% delle volte → RSC + lazy load.",{"type":32,"tag":40,"props":804,"children":806},{"id":805},"server-component-boundary-dove-tracciare-la-linea",[807],{"type":37,"value":808},"Server Component Boundary: Dove Tracciare la Linea",{"type":32,"tag":33,"props":810,"children":811},{},[812],{"type":37,"value":813},"React Server Components usa la direttiva \"use client\" per stabilire il boundary. Ogni component sopra il boundary viene renderizzato sul server, tutto ciò che sta sotto entra nel bundle client. Se tracci male il boundary, invii codice client non necessario oppure non riesci a gestire lo state sul server.",{"type":32,"tag":33,"props":815,"children":816},{},[817],{"type":37,"value":818},"Il pattern osservato nei progetti Shopify Hydrogen 2.0:",{"type":32,"tag":198,"props":820,"children":824},{"code":821,"language":822,"meta":16,"className":823,"style":16},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\nexport default function ProductPage({ product }) {\n  return (\n    \u003Cdiv>\n      {\u002F* Server component — dati dinamici ma non interattivo *\u002F}\n      \u003CProductImages images={product.images} \u002F>\n      \u003CProductTitle title={product.title} \u002F>\n      \n      {\u002F* Client component — form, state, input dell'utente *\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",[825],{"type":32,"tag":181,"props":826,"children":827},{"__ignoreMap":16},[828,836,875,888,903,921,948,974,982,998,1024,1040,1048,1055,1062,1070,1078,1099,1106,1134,1188,1237,1244,1266,1287,1305,1324,1333,1341,1353,1380,1398,1420,1438,1480,1489,1516,1549,1566,1582,1590],{"type":32,"tag":208,"props":829,"children":830},{"class":210,"line":211},[831],{"type":32,"tag":208,"props":832,"children":833},{"style":352},[834],{"type":37,"value":835},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":837,"children":838},{"class":210,"line":238},[839,844,849,854,859,864,870],{"type":32,"tag":208,"props":840,"children":841},{"style":242},[842],{"type":37,"value":843},"export",{"type":32,"tag":208,"props":845,"children":846},{"style":242},[847],{"type":37,"value":848}," default",{"type":32,"tag":208,"props":850,"children":851},{"style":242},[852],{"type":37,"value":853}," function",{"type":32,"tag":208,"props":855,"children":856},{"style":227},[857],{"type":37,"value":858}," ProductPage",{"type":32,"tag":208,"props":860,"children":861},{"style":215},[862],{"type":37,"value":863},"({ ",{"type":32,"tag":208,"props":865,"children":867},{"style":866},"--shiki-default:#FFAB70",[868],{"type":37,"value":869},"product",{"type":32,"tag":208,"props":871,"children":872},{"style":215},[873],{"type":37,"value":874}," }) {\n",{"type":32,"tag":208,"props":876,"children":877},{"class":210,"line":264},[878,883],{"type":32,"tag":208,"props":879,"children":880},{"style":242},[881],{"type":37,"value":882},"  return",{"type":32,"tag":208,"props":884,"children":885},{"style":215},[886],{"type":37,"value":887}," (\n",{"type":32,"tag":208,"props":889,"children":890},{"class":210,"line":274},[891,895,899],{"type":32,"tag":208,"props":892,"children":893},{"style":215},[894],{"type":37,"value":566},{"type":32,"tag":208,"props":896,"children":897},{"style":221},[898],{"type":37,"value":544},{"type":32,"tag":208,"props":900,"children":901},{"style":215},[902],{"type":37,"value":235},{"type":32,"tag":208,"props":904,"children":905},{"class":210,"line":304},[906,911,916],{"type":32,"tag":208,"props":907,"children":908},{"style":215},[909],{"type":37,"value":910},"      {",{"type":32,"tag":208,"props":912,"children":913},{"style":352},[914],{"type":37,"value":915},"\u002F* Server component — dati dinamici ma non interattivo *\u002F",{"type":32,"tag":208,"props":917,"children":918},{"style":215},[919],{"type":37,"value":920},"}\n",{"type":32,"tag":208,"props":922,"children":923},{"class":210,"line":340},[924,929,934,939,943],{"type":32,"tag":208,"props":925,"children":926},{"style":215},[927],{"type":37,"value":928},"      \u003C",{"type":32,"tag":208,"props":930,"children":931},{"style":283},[932],{"type":37,"value":933},"ProductImages",{"type":32,"tag":208,"props":935,"children":936},{"style":227},[937],{"type":37,"value":938}," images",{"type":32,"tag":208,"props":940,"children":941},{"style":242},[942],{"type":37,"value":400},{"type":32,"tag":208,"props":944,"children":945},{"style":215},[946],{"type":37,"value":947},"{product.images} \u002F>\n",{"type":32,"tag":208,"props":949,"children":950},{"class":210,"line":348},[951,955,960,965,969],{"type":32,"tag":208,"props":952,"children":953},{"style":215},[954],{"type":37,"value":928},{"type":32,"tag":208,"props":956,"children":957},{"style":283},[958],{"type":37,"value":959},"ProductTitle",{"type":32,"tag":208,"props":961,"children":962},{"style":227},[963],{"type":37,"value":964}," title",{"type":32,"tag":208,"props":966,"children":967},{"style":242},[968],{"type":37,"value":400},{"type":32,"tag":208,"props":970,"children":971},{"style":215},[972],{"type":37,"value":973},"{product.title} \u002F>\n",{"type":32,"tag":208,"props":975,"children":976},{"class":210,"line":358},[977],{"type":32,"tag":208,"props":978,"children":979},{"style":215},[980],{"type":37,"value":981},"      \n",{"type":32,"tag":208,"props":983,"children":984},{"class":210,"line":26},[985,989,994],{"type":32,"tag":208,"props":986,"children":987},{"style":215},[988],{"type":37,"value":910},{"type":32,"tag":208,"props":990,"children":991},{"style":352},[992],{"type":37,"value":993},"\u002F* Client component — form, state, input dell'utente *\u002F",{"type":32,"tag":208,"props":995,"children":996},{"style":215},[997],{"type":37,"value":920},{"type":32,"tag":208,"props":999,"children":1000},{"class":210,"line":418},[1001,1005,1010,1015,1019],{"type":32,"tag":208,"props":1002,"children":1003},{"style":215},[1004],{"type":37,"value":928},{"type":32,"tag":208,"props":1006,"children":1007},{"style":283},[1008],{"type":37,"value":1009},"AddToCartForm",{"type":32,"tag":208,"props":1011,"children":1012},{"style":227},[1013],{"type":37,"value":1014}," product",{"type":32,"tag":208,"props":1016,"children":1017},{"style":242},[1018],{"type":37,"value":400},{"type":32,"tag":208,"props":1020,"children":1021},{"style":215},[1022],{"type":37,"value":1023},"{product} \u002F>\n",{"type":32,"tag":208,"props":1025,"children":1026},{"class":210,"line":427},[1027,1032,1036],{"type":32,"tag":208,"props":1028,"children":1029},{"style":215},[1030],{"type":37,"value":1031},"    \u003C\u002F",{"type":32,"tag":208,"props":1033,"children":1034},{"style":221},[1035],{"type":37,"value":544},{"type":32,"tag":208,"props":1037,"children":1038},{"style":215},[1039],{"type":37,"value":235},{"type":32,"tag":208,"props":1041,"children":1042},{"class":210,"line":435},[1043],{"type":32,"tag":208,"props":1044,"children":1045},{"style":215},[1046],{"type":37,"value":1047},"  )\n",{"type":32,"tag":208,"props":1049,"children":1050},{"class":210,"line":444},[1051],{"type":32,"tag":208,"props":1052,"children":1053},{"style":215},[1054],{"type":37,"value":920},{"type":32,"tag":208,"props":1056,"children":1057},{"class":210,"line":465},[1058],{"type":32,"tag":208,"props":1059,"children":1060},{"emptyLinePlaceholder":268},[1061],{"type":37,"value":271},{"type":32,"tag":208,"props":1063,"children":1064},{"class":210,"line":483},[1065],{"type":32,"tag":208,"props":1066,"children":1067},{"style":352},[1068],{"type":37,"value":1069},"\u002F\u002F components\u002FAddToCartForm.tsx\n",{"type":32,"tag":208,"props":1071,"children":1072},{"class":210,"line":491},[1073],{"type":32,"tag":208,"props":1074,"children":1075},{"style":258},[1076],{"type":37,"value":1077},"'use client'\n",{"type":32,"tag":208,"props":1079,"children":1080},{"class":210,"line":508},[1081,1085,1090,1094],{"type":32,"tag":208,"props":1082,"children":1083},{"style":242},[1084],{"type":37,"value":245},{"type":32,"tag":208,"props":1086,"children":1087},{"style":215},[1088],{"type":37,"value":1089}," { useState } ",{"type":32,"tag":208,"props":1091,"children":1092},{"style":242},[1093],{"type":37,"value":255},{"type":32,"tag":208,"props":1095,"children":1096},{"style":258},[1097],{"type":37,"value":1098}," 'react'\n",{"type":32,"tag":208,"props":1100,"children":1101},{"class":210,"line":516},[1102],{"type":32,"tag":208,"props":1103,"children":1104},{"emptyLinePlaceholder":268},[1105],{"type":37,"value":271},{"type":32,"tag":208,"props":1107,"children":1108},{"class":210,"line":533},[1109,1113,1117,1122,1126,1130],{"type":32,"tag":208,"props":1110,"children":1111},{"style":242},[1112],{"type":37,"value":843},{"type":32,"tag":208,"props":1114,"children":1115},{"style":242},[1116],{"type":37,"value":853},{"type":32,"tag":208,"props":1118,"children":1119},{"style":227},[1120],{"type":37,"value":1121}," AddToCartForm",{"type":32,"tag":208,"props":1123,"children":1124},{"style":215},[1125],{"type":37,"value":863},{"type":32,"tag":208,"props":1127,"children":1128},{"style":866},[1129],{"type":37,"value":869},{"type":32,"tag":208,"props":1131,"children":1132},{"style":215},[1133],{"type":37,"value":874},{"type":32,"tag":208,"props":1135,"children":1136},{"class":210,"line":551},[1137,1142,1147,1152,1156,1161,1166,1170,1175,1179,1184],{"type":32,"tag":208,"props":1138,"children":1139},{"style":242},[1140],{"type":37,"value":1141},"  const",{"type":32,"tag":208,"props":1143,"children":1144},{"style":215},[1145],{"type":37,"value":1146}," [",{"type":32,"tag":208,"props":1148,"children":1149},{"style":283},[1150],{"type":37,"value":1151},"quantity",{"type":32,"tag":208,"props":1153,"children":1154},{"style":215},[1155],{"type":37,"value":703},{"type":32,"tag":208,"props":1157,"children":1158},{"style":283},[1159],{"type":37,"value":1160},"setQuantity",{"type":32,"tag":208,"props":1162,"children":1163},{"style":215},[1164],{"type":37,"value":1165},"] ",{"type":32,"tag":208,"props":1167,"children":1168},{"style":242},[1169],{"type":37,"value":400},{"type":32,"tag":208,"props":1171,"children":1172},{"style":227},[1173],{"type":37,"value":1174}," useState",{"type":32,"tag":208,"props":1176,"children":1177},{"style":215},[1178],{"type":37,"value":327},{"type":32,"tag":208,"props":1180,"children":1181},{"style":283},[1182],{"type":37,"value":1183},"1",{"type":32,"tag":208,"props":1185,"children":1186},{"style":215},[1187],{"type":37,"value":337},{"type":32,"tag":208,"props":1189,"children":1190},{"class":210,"line":560},[1191,1195,1199,1204,1208,1213,1217,1221,1225,1229,1233],{"type":32,"tag":208,"props":1192,"children":1193},{"style":242},[1194],{"type":37,"value":1141},{"type":32,"tag":208,"props":1196,"children":1197},{"style":215},[1198],{"type":37,"value":1146},{"type":32,"tag":208,"props":1200,"children":1201},{"style":283},[1202],{"type":37,"value":1203},"loading",{"type":32,"tag":208,"props":1205,"children":1206},{"style":215},[1207],{"type":37,"value":703},{"type":32,"tag":208,"props":1209,"children":1210},{"style":283},[1211],{"type":37,"value":1212},"setLoading",{"type":32,"tag":208,"props":1214,"children":1215},{"style":215},[1216],{"type":37,"value":1165},{"type":32,"tag":208,"props":1218,"children":1219},{"style":242},[1220],{"type":37,"value":400},{"type":32,"tag":208,"props":1222,"children":1223},{"style":227},[1224],{"type":37,"value":1174},{"type":32,"tag":208,"props":1226,"children":1227},{"style":215},[1228],{"type":37,"value":327},{"type":32,"tag":208,"props":1230,"children":1231},{"style":283},[1232],{"type":37,"value":332},{"type":32,"tag":208,"props":1234,"children":1235},{"style":215},[1236],{"type":37,"value":337},{"type":32,"tag":208,"props":1238,"children":1239},{"class":210,"line":593},[1240],{"type":32,"tag":208,"props":1241,"children":1242},{"emptyLinePlaceholder":268},[1243],{"type":37,"value":271},{"type":32,"tag":208,"props":1245,"children":1246},{"class":210,"line":602},[1247,1252,1256,1261],{"type":32,"tag":208,"props":1248,"children":1249},{"style":242},[1250],{"type":37,"value":1251},"  async",{"type":32,"tag":208,"props":1253,"children":1254},{"style":242},[1255],{"type":37,"value":853},{"type":32,"tag":208,"props":1257,"children":1258},{"style":227},[1259],{"type":37,"value":1260}," handleSubmit",{"type":32,"tag":208,"props":1262,"children":1263},{"style":215},[1264],{"type":37,"value":1265},"() {\n",{"type":32,"tag":208,"props":1267,"children":1268},{"class":210,"line":611},[1269,1274,1278,1283],{"type":32,"tag":208,"props":1270,"children":1271},{"style":227},[1272],{"type":37,"value":1273},"    setLoading",{"type":32,"tag":208,"props":1275,"children":1276},{"style":215},[1277],{"type":37,"value":327},{"type":32,"tag":208,"props":1279,"children":1280},{"style":283},[1281],{"type":37,"value":1282},"true",{"type":32,"tag":208,"props":1284,"children":1285},{"style":215},[1286],{"type":37,"value":337},{"type":32,"tag":208,"props":1288,"children":1289},{"class":210,"line":642},[1290,1295,1300],{"type":32,"tag":208,"props":1291,"children":1292},{"style":242},[1293],{"type":37,"value":1294},"    await",{"type":32,"tag":208,"props":1296,"children":1297},{"style":227},[1298],{"type":37,"value":1299}," addToCart",{"type":32,"tag":208,"props":1301,"children":1302},{"style":215},[1303],{"type":37,"value":1304},"(product.id, quantity)\n",{"type":32,"tag":208,"props":1306,"children":1307},{"class":210,"line":659},[1308,1312,1316,1320],{"type":32,"tag":208,"props":1309,"children":1310},{"style":227},[1311],{"type":37,"value":1273},{"type":32,"tag":208,"props":1313,"children":1314},{"style":215},[1315],{"type":37,"value":327},{"type":32,"tag":208,"props":1317,"children":1318},{"style":283},[1319],{"type":37,"value":332},{"type":32,"tag":208,"props":1321,"children":1322},{"style":215},[1323],{"type":37,"value":337},{"type":32,"tag":208,"props":1325,"children":1327},{"class":210,"line":1326},27,[1328],{"type":32,"tag":208,"props":1329,"children":1330},{"style":215},[1331],{"type":37,"value":1332},"  }\n",{"type":32,"tag":208,"props":1334,"children":1336},{"class":210,"line":1335},28,[1337],{"type":32,"tag":208,"props":1338,"children":1339},{"emptyLinePlaceholder":268},[1340],{"type":37,"value":271},{"type":32,"tag":208,"props":1342,"children":1344},{"class":210,"line":1343},29,[1345,1349],{"type":32,"tag":208,"props":1346,"children":1347},{"style":242},[1348],{"type":37,"value":882},{"type":32,"tag":208,"props":1350,"children":1351},{"style":215},[1352],{"type":37,"value":887},{"type":32,"tag":208,"props":1354,"children":1356},{"class":210,"line":1355},30,[1357,1361,1366,1371,1375],{"type":32,"tag":208,"props":1358,"children":1359},{"style":215},[1360],{"type":37,"value":566},{"type":32,"tag":208,"props":1362,"children":1363},{"style":221},[1364],{"type":37,"value":1365},"form",{"type":32,"tag":208,"props":1367,"children":1368},{"style":227},[1369],{"type":37,"value":1370}," onSubmit",{"type":32,"tag":208,"props":1372,"children":1373},{"style":242},[1374],{"type":37,"value":400},{"type":32,"tag":208,"props":1376,"children":1377},{"style":215},[1378],{"type":37,"value":1379},"{handleSubmit}>\n",{"type":32,"tag":208,"props":1381,"children":1383},{"class":210,"line":1382},31,[1384,1388,1393],{"type":32,"tag":208,"props":1385,"children":1386},{"style":215},[1387],{"type":37,"value":928},{"type":32,"tag":208,"props":1389,"children":1390},{"style":221},[1391],{"type":37,"value":1392},"input",{"type":32,"tag":208,"props":1394,"children":1395},{"style":215},[1396],{"type":37,"value":1397}," \n",{"type":32,"tag":208,"props":1399,"children":1401},{"class":210,"line":1400},32,[1402,1407,1411,1416],{"type":32,"tag":208,"props":1403,"children":1404},{"style":227},[1405],{"type":37,"value":1406},"        type",{"type":32,"tag":208,"props":1408,"children":1409},{"style":242},[1410],{"type":37,"value":400},{"type":32,"tag":208,"props":1412,"children":1413},{"style":258},[1414],{"type":37,"value":1415},"\"number\"",{"type":32,"tag":208,"props":1417,"children":1418},{"style":215},[1419],{"type":37,"value":1397},{"type":32,"tag":208,"props":1421,"children":1423},{"class":210,"line":1422},33,[1424,1429,1433],{"type":32,"tag":208,"props":1425,"children":1426},{"style":227},[1427],{"type":37,"value":1428},"        value",{"type":32,"tag":208,"props":1430,"children":1431},{"style":242},[1432],{"type":37,"value":400},{"type":32,"tag":208,"props":1434,"children":1435},{"style":215},[1436],{"type":37,"value":1437},"{quantity} \n",{"type":32,"tag":208,"props":1439,"children":1441},{"class":210,"line":1440},34,[1442,1447,1451,1456,1461,1466,1470,1475],{"type":32,"tag":208,"props":1443,"children":1444},{"style":227},[1445],{"type":37,"value":1446},"        onChange",{"type":32,"tag":208,"props":1448,"children":1449},{"style":242},[1450],{"type":37,"value":400},{"type":32,"tag":208,"props":1452,"children":1453},{"style":215},[1454],{"type":37,"value":1455},"{(",{"type":32,"tag":208,"props":1457,"children":1458},{"style":866},[1459],{"type":37,"value":1460},"e",{"type":32,"tag":208,"props":1462,"children":1463},{"style":215},[1464],{"type":37,"value":1465},") ",{"type":32,"tag":208,"props":1467,"children":1468},{"style":242},[1469],{"type":37,"value":382},{"type":32,"tag":208,"props":1471,"children":1472},{"style":227},[1473],{"type":37,"value":1474}," setQuantity",{"type":32,"tag":208,"props":1476,"children":1477},{"style":215},[1478],{"type":37,"value":1479},"(e.target.value)} \n",{"type":32,"tag":208,"props":1481,"children":1483},{"class":210,"line":1482},35,[1484],{"type":32,"tag":208,"props":1485,"children":1486},{"style":215},[1487],{"type":37,"value":1488},"      \u002F>\n",{"type":32,"tag":208,"props":1490,"children":1492},{"class":210,"line":1491},36,[1493,1497,1502,1507,1511],{"type":32,"tag":208,"props":1494,"children":1495},{"style":215},[1496],{"type":37,"value":928},{"type":32,"tag":208,"props":1498,"children":1499},{"style":221},[1500],{"type":37,"value":1501},"button",{"type":32,"tag":208,"props":1503,"children":1504},{"style":227},[1505],{"type":37,"value":1506}," disabled",{"type":32,"tag":208,"props":1508,"children":1509},{"style":242},[1510],{"type":37,"value":400},{"type":32,"tag":208,"props":1512,"children":1513},{"style":215},[1514],{"type":37,"value":1515},"{loading}>\n",{"type":32,"tag":208,"props":1517,"children":1519},{"class":210,"line":1518},37,[1520,1525,1530,1535,1540,1545],{"type":32,"tag":208,"props":1521,"children":1522},{"style":215},[1523],{"type":37,"value":1524},"        {loading ",{"type":32,"tag":208,"props":1526,"children":1527},{"style":242},[1528],{"type":37,"value":1529},"?",{"type":32,"tag":208,"props":1531,"children":1532},{"style":258},[1533],{"type":37,"value":1534}," 'Adding...'",{"type":32,"tag":208,"props":1536,"children":1537},{"style":242},[1538],{"type":37,"value":1539}," :",{"type":32,"tag":208,"props":1541,"children":1542},{"style":258},[1543],{"type":37,"value":1544}," 'Add to Cart'",{"type":32,"tag":208,"props":1546,"children":1547},{"style":215},[1548],{"type":37,"value":920},{"type":32,"tag":208,"props":1550,"children":1552},{"class":210,"line":1551},38,[1553,1558,1562],{"type":32,"tag":208,"props":1554,"children":1555},{"style":215},[1556],{"type":37,"value":1557},"      \u003C\u002F",{"type":32,"tag":208,"props":1559,"children":1560},{"style":221},[1561],{"type":37,"value":1501},{"type":32,"tag":208,"props":1563,"children":1564},{"style":215},[1565],{"type":37,"value":235},{"type":32,"tag":208,"props":1567,"children":1569},{"class":210,"line":1568},39,[1570,1574,1578],{"type":32,"tag":208,"props":1571,"children":1572},{"style":215},[1573],{"type":37,"value":1031},{"type":32,"tag":208,"props":1575,"children":1576},{"style":221},[1577],{"type":37,"value":1365},{"type":32,"tag":208,"props":1579,"children":1580},{"style":215},[1581],{"type":37,"value":235},{"type":32,"tag":208,"props":1583,"children":1585},{"class":210,"line":1584},40,[1586],{"type":32,"tag":208,"props":1587,"children":1588},{"style":215},[1589],{"type":37,"value":1047},{"type":32,"tag":208,"props":1591,"children":1593},{"class":210,"line":1592},41,[1594],{"type":32,"tag":208,"props":1595,"children":1596},{"style":215},[1597],{"type":37,"value":920},{"type":32,"tag":33,"props":1599,"children":1600},{},[1601,1603,1608],{"type":37,"value":1602},"In questo esempio, il boundary è sopra il component ",{"type":32,"tag":181,"props":1604,"children":1606},{"className":1605},[],[1607],{"type":37,"value":1009},{"type":37,"value":1609},". Le immagini e il titolo del prodotto vengono renderizzati sul server — HTML friendly per SEO, zero JavaScript client. Il form è interattivo, quindi client component. Impatto sulla dimensione del bundle: solo la logica del form + il codice dei gestori di eventi React finiscono nel client, circa 8kb. Se avessi reso client l'intera pagina, il bundle sarebbe 120kb — una differenza di 15×.",{"type":32,"tag":169,"props":1611,"children":1613},{"id":1612},"regola-del-non-annidamento",[1614],{"type":37,"value":1615},"Regola del Non-Annidamento",{"type":32,"tag":33,"props":1617,"children":1618},{},[1619],{"type":37,"value":1620},"Un errore comune con RSC: annidare un server component dentro un component client. React non lo permette — tutto ciò che sta sotto un component client finisce nel bundle client. La soluzione: il pattern di composizione.",{"type":32,"tag":33,"props":1622,"children":1623},{},[1624],{"type":37,"value":1625},"❌ Sbagliato:",{"type":32,"tag":198,"props":1627,"children":1629},{"code":1628,"language":822,"meta":16,"className":823,"style":16},"'use client'\nfunction ClientWrapper() {\n  return \u003CServerComponent \u002F> \u002F\u002F Errore: RSC non può stare dentro client\n}\n",[1630],{"type":32,"tag":181,"props":1631,"children":1632},{"__ignoreMap":16},[1633,1640,1657,1684],{"type":32,"tag":208,"props":1634,"children":1635},{"class":210,"line":211},[1636],{"type":32,"tag":208,"props":1637,"children":1638},{"style":258},[1639],{"type":37,"value":1077},{"type":32,"tag":208,"props":1641,"children":1642},{"class":210,"line":238},[1643,1648,1653],{"type":32,"tag":208,"props":1644,"children":1645},{"style":242},[1646],{"type":37,"value":1647},"function",{"type":32,"tag":208,"props":1649,"children":1650},{"style":227},[1651],{"type":37,"value":1652}," ClientWrapper",{"type":32,"tag":208,"props":1654,"children":1655},{"style":215},[1656],{"type":37,"value":1265},{"type":32,"tag":208,"props":1658,"children":1659},{"class":210,"line":264},[1660,1664,1669,1674,1679],{"type":32,"tag":208,"props":1661,"children":1662},{"style":242},[1663],{"type":37,"value":882},{"type":32,"tag":208,"props":1665,"children":1666},{"style":215},[1667],{"type":37,"value":1668}," \u003C",{"type":32,"tag":208,"props":1670,"children":1671},{"style":283},[1672],{"type":37,"value":1673},"ServerComponent",{"type":32,"tag":208,"props":1675,"children":1676},{"style":215},[1677],{"type":37,"value":1678}," \u002F> ",{"type":32,"tag":208,"props":1680,"children":1681},{"style":352},[1682],{"type":37,"value":1683},"\u002F\u002F Errore: RSC non può stare dentro client\n",{"type":32,"tag":208,"props":1685,"children":1686},{"class":210,"line":274},[1687],{"type":32,"tag":208,"props":1688,"children":1689},{"style":215},[1690],{"type":37,"value":920},{"type":32,"tag":33,"props":1692,"children":1693},{},[1694],{"type":37,"value":1695},"✅ Corretto:",{"type":32,"tag":198,"props":1697,"children":1699},{"code":1698,"language":822,"meta":16,"className":823,"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",[1700],{"type":32,"tag":181,"props":1701,"children":1702},{"__ignoreMap":16},[1703,1711,1736,1747,1762,1778,1803,1818,1825,1832,1839,1847,1854,1877,1918],{"type":32,"tag":208,"props":1704,"children":1705},{"class":210,"line":211},[1706],{"type":32,"tag":208,"props":1707,"children":1708},{"style":352},[1709],{"type":37,"value":1710},"\u002F\u002F Layout (RSC)\n",{"type":32,"tag":208,"props":1712,"children":1713},{"class":210,"line":238},[1714,1718,1723,1727,1732],{"type":32,"tag":208,"props":1715,"children":1716},{"style":242},[1717],{"type":37,"value":1647},{"type":32,"tag":208,"props":1719,"children":1720},{"style":227},[1721],{"type":37,"value":1722}," Layout",{"type":32,"tag":208,"props":1724,"children":1725},{"style":215},[1726],{"type":37,"value":863},{"type":32,"tag":208,"props":1728,"children":1729},{"style":866},[1730],{"type":37,"value":1731},"children",{"type":32,"tag":208,"props":1733,"children":1734},{"style":215},[1735],{"type":37,"value":874},{"type":32,"tag":208,"props":1737,"children":1738},{"class":210,"line":264},[1739,1743],{"type":32,"tag":208,"props":1740,"children":1741},{"style":242},[1742],{"type":37,"value":882},{"type":32,"tag":208,"props":1744,"children":1745},{"style":215},[1746],{"type":37,"value":887},{"type":32,"tag":208,"props":1748,"children":1749},{"class":210,"line":274},[1750,1754,1758],{"type":32,"tag":208,"props":1751,"children":1752},{"style":215},[1753],{"type":37,"value":566},{"type":32,"tag":208,"props":1755,"children":1756},{"style":221},[1757],{"type":37,"value":544},{"type":32,"tag":208,"props":1759,"children":1760},{"style":215},[1761],{"type":37,"value":235},{"type":32,"tag":208,"props":1763,"children":1764},{"class":210,"line":304},[1765,1769,1774],{"type":32,"tag":208,"props":1766,"children":1767},{"style":215},[1768],{"type":37,"value":928},{"type":32,"tag":208,"props":1770,"children":1771},{"style":283},[1772],{"type":37,"value":1773},"ServerSidebar",{"type":32,"tag":208,"props":1775,"children":1776},{"style":215},[1777],{"type":37,"value":590},{"type":32,"tag":208,"props":1779,"children":1780},{"class":210,"line":340},[1781,1785,1790,1795,1799],{"type":32,"tag":208,"props":1782,"children":1783},{"style":215},[1784],{"type":37,"value":928},{"type":32,"tag":208,"props":1786,"children":1787},{"style":283},[1788],{"type":37,"value":1789},"ClientWrapper",{"type":32,"tag":208,"props":1791,"children":1792},{"style":215},[1793],{"type":37,"value":1794},">{children}\u003C\u002F",{"type":32,"tag":208,"props":1796,"children":1797},{"style":283},[1798],{"type":37,"value":1789},{"type":32,"tag":208,"props":1800,"children":1801},{"style":215},[1802],{"type":37,"value":235},{"type":32,"tag":208,"props":1804,"children":1805},{"class":210,"line":348},[1806,1810,1814],{"type":32,"tag":208,"props":1807,"children":1808},{"style":215},[1809],{"type":37,"value":1031},{"type":32,"tag":208,"props":1811,"children":1812},{"style":221},[1813],{"type":37,"value":544},{"type":32,"tag":208,"props":1815,"children":1816},{"style":215},[1817],{"type":37,"value":235},{"type":32,"tag":208,"props":1819,"children":1820},{"class":210,"line":358},[1821],{"type":32,"tag":208,"props":1822,"children":1823},{"style":215},[1824],{"type":37,"value":1047},{"type":32,"tag":208,"props":1826,"children":1827},{"class":210,"line":26},[1828],{"type":32,"tag":208,"props":1829,"children":1830},{"style":215},[1831],{"type":37,"value":920},{"type":32,"tag":208,"props":1833,"children":1834},{"class":210,"line":418},[1835],{"type":32,"tag":208,"props":1836,"children":1837},{"emptyLinePlaceholder":268},[1838],{"type":37,"value":271},{"type":32,"tag":208,"props":1840,"children":1841},{"class":210,"line":427},[1842],{"type":32,"tag":208,"props":1843,"children":1844},{"style":352},[1845],{"type":37,"value":1846},"\u002F\u002F Wrapper (client)\n",{"type":32,"tag":208,"props":1848,"children":1849},{"class":210,"line":435},[1850],{"type":32,"tag":208,"props":1851,"children":1852},{"style":258},[1853],{"type":37,"value":1077},{"type":32,"tag":208,"props":1855,"children":1856},{"class":210,"line":444},[1857,1861,1865,1869,1873],{"type":32,"tag":208,"props":1858,"children":1859},{"style":242},[1860],{"type":37,"value":1647},{"type":32,"tag":208,"props":1862,"children":1863},{"style":227},[1864],{"type":37,"value":1652},{"type":32,"tag":208,"props":1866,"children":1867},{"style":215},[1868],{"type":37,"value":863},{"type":32,"tag":208,"props":1870,"children":1871},{"style":866},[1872],{"type":37,"value":1731},{"type":32,"tag":208,"props":1874,"children":1875},{"style":215},[1876],{"type":37,"value":874},{"type":32,"tag":208,"props":1878,"children":1879},{"class":210,"line":465},[1880,1884,1888,1892,1897,1901,1906,1910,1914],{"type":32,"tag":208,"props":1881,"children":1882},{"style":242},[1883],{"type":37,"value":882},{"type":32,"tag":208,"props":1885,"children":1886},{"style":215},[1887],{"type":37,"value":1668},{"type":32,"tag":208,"props":1889,"children":1890},{"style":221},[1891],{"type":37,"value":544},{"type":32,"tag":208,"props":1893,"children":1894},{"style":227},[1895],{"type":37,"value":1896}," className",{"type":32,"tag":208,"props":1898,"children":1899},{"style":242},[1900],{"type":37,"value":400},{"type":32,"tag":208,"props":1902,"children":1903},{"style":258},[1904],{"type":37,"value":1905},"\"interactive\"",{"type":32,"tag":208,"props":1907,"children":1908},{"style":215},[1909],{"type":37,"value":1794},{"type":32,"tag":208,"props":1911,"children":1912},{"style":221},[1913],{"type":37,"value":544},{"type":32,"tag":208,"props":1915,"children":1916},{"style":215},[1917],{"type":37,"value":235},{"type":32,"tag":208,"props":1919,"children":1920},{"class":210,"line":483},[1921],{"type":32,"tag":208,"props":1922,"children":1923},{"style":215},[1924],{"type":37,"value":920},{"type":32,"tag":33,"props":1926,"children":1927},{},[1928,1930,1935,1937,1942],{"type":37,"value":1929},"Con questo pattern, ",{"type":32,"tag":181,"props":1931,"children":1933},{"className":1932},[],[1934],{"type":37,"value":1773},{"type":37,"value":1936}," viene renderizzato sul server, ",{"type":32,"tag":181,"props":1938,"children":1940},{"className":1939},[],[1941],{"type":37,"value":1789},{"type":37,"value":1943}," agisce come container interattivo sul client. Il contenuto della sidebar non finisce nel bundle.",{"type":32,"tag":40,"props":1945,"children":1947},{"id":1946},"vue-vapor-mode-il-futuro-senza-hydration",[1948],{"type":37,"value":1949},"Vue Vapor Mode: Il Futuro Senza Hydration",{"type":32,"tag":33,"props":1951,"children":1952},{},[1953],{"type":37,"value":1954},"Dopo Vue 3.5, la modalità sperimentale Vapor rende l'HTML renderizzato lato server interattivo senza hydration. Il concetto: il compiler inietta direttamente gli event listener nel DOM, niente riconciliazione Virtual DOM. Risultato: costo di hydration zero, dimensione del bundle 70% più piccola.",{"type":32,"tag":33,"props":1956,"children":1957},{},[1958],{"type":37,"value":1959},"Benchmark sperimentale (Vue team, 2026 Q1):",{"type":32,"tag":57,"props":1961,"children":1962},{},[1963,1984],{"type":32,"tag":61,"props":1964,"children":1965},{},[1966],{"type":32,"tag":65,"props":1967,"children":1968},{},[1969,1974,1979],{"type":32,"tag":69,"props":1970,"children":1971},{},[1972],{"type":37,"value":1973},"Metrica",{"type":32,"tag":69,"props":1975,"children":1976},{},[1977],{"type":37,"value":1978},"Vue 3.5 SSR",{"type":32,"tag":69,"props":1980,"children":1981},{},[1982],{"type":37,"value":1983},"Vapor Mode",{"type":32,"tag":90,"props":1985,"children":1986},{},[1987,2004,2021],{"type":32,"tag":65,"props":1988,"children":1989},{},[1990,1995,1999],{"type":32,"tag":97,"props":1991,"children":1992},{},[1993],{"type":37,"value":1994},"Dimensione bundle",{"type":32,"tag":97,"props":1996,"children":1997},{},[1998],{"type":37,"value":129},{"type":32,"tag":97,"props":2000,"children":2001},{},[2002],{"type":37,"value":2003},"55kb",{"type":32,"tag":65,"props":2005,"children":2006},{},[2007,2012,2016],{"type":32,"tag":97,"props":2008,"children":2009},{},[2010],{"type":37,"value":2011},"Tempo di hydration",{"type":32,"tag":97,"props":2013,"children":2014},{},[2015],{"type":37,"value":134},{"type":32,"tag":97,"props":2017,"children":2018},{},[2019],{"type":37,"value":2020},"0ms",{"type":32,"tag":65,"props":2022,"children":2023},{},[2024,2029,2034],{"type":32,"tag":97,"props":2025,"children":2026},{},[2027],{"type":37,"value":2028},"Overhead a runtime",{"type":32,"tag":97,"props":2030,"children":2031},{},[2032],{"type":37,"value":2033},"4.2kb",{"type":32,"tag":97,"props":2035,"children":2036},{},[2037],{"type":37,"value":2038},"0.8kb",{"type":32,"tag":33,"props":2040,"children":2041},{},[2042],{"type":37,"value":2043},"In un POC di vetrina headless presso Roibase, Vapor Mode ha ridotto il TBT di una pagina di product listing da 800ms a 140ms. Tuttavia, Vapor Mode non è ancora pronto per la production — l'integrazione con Vue Router è in beta, il supporto per librerie di terze parti è limitato. Ci si aspetta una stabilizzazione nel Q2 2027.",{"type":32,"tag":40,"props":2045,"children":2047},{"id":2046},"su-quali-numeri-basare-la-decisione",[2048],{"type":37,"value":2049},"Su Quali Numeri Basare la Decisione?",{"type":32,"tag":33,"props":2051,"children":2052},{},[2053],{"type":37,"value":2054},"Prendi la decisione server component vs client component su queste metriche:",{"type":32,"tag":2056,"props":2057,"children":2058},"ol",{},[2059,2069,2079,2089],{"type":32,"tag":733,"props":2060,"children":2061},{},[2062,2067],{"type":32,"tag":723,"props":2063,"children":2064},{},[2065],{"type":37,"value":2066},"Probabilità di interattività:",{"type":37,"value":2068}," Il X% degli utenti interagisce con questo component nei primi 5 secondi? Oltre il 60% → client component.",{"type":32,"tag":733,"props":2070,"children":2071},{},[2072,2077],{"type":32,"tag":723,"props":2073,"children":2074},{},[2075],{"type":37,"value":2076},"Impatto sulla dimensione del bundle:",{"type":37,"value":2078}," Se il component finisce nel client, quanto cresce il bundle? Oltre 50kb → valuta RSC + lazy load.",{"type":32,"tag":733,"props":2080,"children":2081},{},[2082,2087],{"type":32,"tag":723,"props":2083,"children":2084},{},[2085],{"type":37,"value":2086},"Importanza per SEO:",{"type":37,"value":2088}," Il contenuto deve essere indicizzato dai motori di ricerca? Sì → RSC o SSR.",{"type":32,"tag":733,"props":2090,"children":2091},{},[2092,2097],{"type":32,"tag":723,"props":2093,"children":2094},{},[2095],{"type":37,"value":2096},"Freschezza dei dati:",{"type":37,"value":2098}," I dati cambiano a ogni request? No → generazione statica. Sì → RSC o fetch API.",{"type":32,"tag":33,"props":2100,"children":2101},{},[2102],{"type":37,"value":2103},"Esempio di matrice decisionale (progetto Shopify Roibase):",{"type":32,"tag":57,"props":2105,"children":2106},{},[2107,2138],{"type":32,"tag":61,"props":2108,"children":2109},{},[2110],{"type":32,"tag":65,"props":2111,"children":2112},{},[2113,2118,2123,2128,2133],{"type":32,"tag":69,"props":2114,"children":2115},{},[2116],{"type":37,"value":2117},"Component",{"type":32,"tag":69,"props":2119,"children":2120},{},[2121],{"type":37,"value":2122},"Interattività",{"type":32,"tag":69,"props":2124,"children":2125},{},[2126],{"type":37,"value":2127},"Impatto Bundle",{"type":32,"tag":69,"props":2129,"children":2130},{},[2131],{"type":37,"value":2132},"SEO",{"type":32,"tag":69,"props":2134,"children":2135},{},[2136],{"type":37,"value":2137},"Decisione",{"type":32,"tag":90,"props":2139,"children":2140},{},[2141,2169,2197,2225],{"type":32,"tag":65,"props":2142,"children":2143},{},[2144,2149,2154,2159,2164],{"type":32,"tag":97,"props":2145,"children":2146},{},[2147],{"type":37,"value":2148},"Griglia prodotti",{"type":32,"tag":97,"props":2150,"children":2151},{},[2152],{"type":37,"value":2153},"12%",{"type":32,"tag":97,"props":2155,"children":2156},{},[2157],{"type":37,"value":2158},"85kb",{"type":32,"tag":97,"props":2160,"children":2161},{},[2162],{"type":37,"value":2163},"Critica",{"type":32,"tag":97,"props":2165,"children":2166},{},[2167],{"type":37,"value":2168},"RSC",{"type":32,"tag":65,"props":2170,"children":2171},{},[2172,2177,2182,2187,2192],{"type":32,"tag":97,"props":2173,"children":2174},{},[2175],{"type":37,"value":2176},"Aggiungi al carrello",{"type":32,"tag":97,"props":2178,"children":2179},{},[2180],{"type":37,"value":2181},"78%",{"type":32,"tag":97,"props":2183,"children":2184},{},[2185],{"type":37,"value":2186},"8kb",{"type":32,"tag":97,"props":2188,"children":2189},{},[2190],{"type":37,"value":2191},"Non necessaria",{"type":32,"tag":97,"props":2193,"children":2194},{},[2195],{"type":37,"value":2196},"Client",{"type":32,"tag":65,"props":2198,"children":2199},{},[2200,2205,2210,2215,2220],{"type":32,"tag":97,"props":2201,"children":2202},{},[2203],{"type":37,"value":2204},"Prodotti correlati",{"type":32,"tag":97,"props":2206,"children":2207},{},[2208],{"type":37,"value":2209},"23%",{"type":32,"tag":97,"props":2211,"children":2212},{},[2213],{"type":37,"value":2214},"45kb",{"type":32,"tag":97,"props":2216,"children":2217},{},[2218],{"type":37,"value":2219},"Media",{"type":32,"tag":97,"props":2221,"children":2222},{},[2223],{"type":37,"value":2224},"RSC + lazy",{"type":32,"tag":65,"props":2226,"children":2227},{},[2228,2233,2238,2243,2248],{"type":32,"tag":97,"props":2229,"children":2230},{},[2231],{"type":37,"value":2232},"Modale di ricerca",{"type":32,"tag":97,"props":2234,"children":2235},{},[2236],{"type":37,"value":2237},"55%",{"type":32,"tag":97,"props":2239,"children":2240},{},[2241],{"type":37,"value":2242},"62kb",{"type":32,"tag":97,"props":2244,"children":2245},{},[2246],{"type":37,"value":2247},"Bassa",{"type":32,"tag":97,"props":2249,"children":2250},{},[2251],{"type":37,"value":2252},"Client (preload)",{"type":32,"tag":33,"props":2254,"children":2255},{},[2256,2258,2264],{"type":37,"value":2257},"Il modale di ricerca mostra il 55% di interattività — sotto la soglia critica, ma l'esperienza dell'utente è sensibile. Soluzione: precarichiamo il component del modale con ",{"type":32,"tag":181,"props":2259,"children":2261},{"className":2260},[],[2262],{"type":37,"value":2263},"\u003Clink rel=\"modulepreload\">",{"type":37,"value":2265},". La latenza del primo clic scende a 40ms.",{"type":32,"tag":40,"props":2267,"children":2269},{"id":2268},"applicazione-pratica-esempio-shopify-hydrogen-20",[2270],{"type":37,"value":2271},"Applicazione Pratica: Esempio Shopify Hydrogen 2.0",{"type":32,"tag":33,"props":2273,"children":2274},{},[2275],{"type":37,"value":2276},"Come tracciamo i confini dei component in una vetrina e-commerce:",{"type":32,"tag":198,"props":2278,"children":2280},{"code":2279,"language":822,"meta":16,"className":823,"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 statica *\u002F}\n      \u003CCollectionHeader \n        title={collection.title} \n        description={collection.description} \n      \u002F>\n      \n      {\u002F* Client component — filtri, ordinamento *\u002F}\n      \u003CProductFilters facets={collection.facets} \u002F>\n      \n      {\u002F* Server component — product card *\u002F}\n      \u003CProductGrid products={collection.products} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n",[2281],{"type":32,"tag":181,"props":2282,"children":2283},{"__ignoreMap":16},[2284,2292,2313,2334,2341,2384,2438,2446,2454,2471,2478,2485,2509,2541,2549,2560,2575,2591,2607,2624,2641,2648,2655,2671,2697,2704,2720,2744,2759,2766],{"type":32,"tag":208,"props":2285,"children":2286},{"class":210,"line":211},[2287],{"type":32,"tag":208,"props":2288,"children":2289},{"style":352},[2290],{"type":37,"value":2291},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":2293,"children":2294},{"class":210,"line":238},[2295,2299,2304,2308],{"type":32,"tag":208,"props":2296,"children":2297},{"style":242},[2298],{"type":37,"value":245},{"type":32,"tag":208,"props":2300,"children":2301},{"style":215},[2302],{"type":37,"value":2303}," { json } ",{"type":32,"tag":208,"props":2305,"children":2306},{"style":242},[2307],{"type":37,"value":255},{"type":32,"tag":208,"props":2309,"children":2310},{"style":258},[2311],{"type":37,"value":2312}," '@shopify\u002Fremix-oxygen'\n",{"type":32,"tag":208,"props":2314,"children":2315},{"class":210,"line":264},[2316,2320,2325,2329],{"type":32,"tag":208,"props":2317,"children":2318},{"style":242},[2319],{"type":37,"value":245},{"type":32,"tag":208,"props":2321,"children":2322},{"style":215},[2323],{"type":37,"value":2324}," { useLoaderData } ",{"type":32,"tag":208,"props":2326,"children":2327},{"style":242},[2328],{"type":37,"value":255},{"type":32,"tag":208,"props":2330,"children":2331},{"style":258},[2332],{"type":37,"value":2333}," '@remix-run\u002Freact'\n",{"type":32,"tag":208,"props":2335,"children":2336},{"class":210,"line":274},[2337],{"type":32,"tag":208,"props":2338,"children":2339},{"emptyLinePlaceholder":268},[2340],{"type":37,"value":271},{"type":32,"tag":208,"props":2342,"children":2343},{"class":210,"line":304},[2344,2348,2353,2357,2362,2366,2371,2375,2380],{"type":32,"tag":208,"props":2345,"children":2346},{"style":242},[2347],{"type":37,"value":843},{"type":32,"tag":208,"props":2349,"children":2350},{"style":242},[2351],{"type":37,"value":2352}," async",{"type":32,"tag":208,"props":2354,"children":2355},{"style":242},[2356],{"type":37,"value":853},{"type":32,"tag":208,"props":2358,"children":2359},{"style":227},[2360],{"type":37,"value":2361}," loader",{"type":32,"tag":208,"props":2363,"children":2364},{"style":215},[2365],{"type":37,"value":863},{"type":32,"tag":208,"props":2367,"children":2368},{"style":866},[2369],{"type":37,"value":2370},"params",{"type":32,"tag":208,"props":2372,"children":2373},{"style":215},[2374],{"type":37,"value":703},{"type":32,"tag":208,"props":2376,"children":2377},{"style":866},[2378],{"type":37,"value":2379},"context",{"type":32,"tag":208,"props":2381,"children":2382},{"style":215},[2383],{"type":37,"value":874},{"type":32,"tag":208,"props":2385,"children":2386},{"class":210,"line":340},[2387,2391,2396,2401,2406,2410,2414,2419,2424,2428,2433],{"type":32,"tag":208,"props":2388,"children":2389},{"style":242},[2390],{"type":37,"value":1141},{"type":32,"tag":208,"props":2392,"children":2393},{"style":215},[2394],{"type":37,"value":2395}," { ",{"type":32,"tag":208,"props":2397,"children":2398},{"style":283},[2399],{"type":37,"value":2400},"collection",{"type":32,"tag":208,"props":2402,"children":2403},{"style":215},[2404],{"type":37,"value":2405}," } ",{"type":32,"tag":208,"props":2407,"children":2408},{"style":242},[2409],{"type":37,"value":400},{"type":32,"tag":208,"props":2411,"children":2412},{"style":242},[2413],{"type":37,"value":405},{"type":32,"tag":208,"props":2415,"children":2416},{"style":215},[2417],{"type":37,"value":2418}," context.storefront.",{"type":32,"tag":208,"props":2420,"children":2421},{"style":227},[2422],{"type":37,"value":2423},"query",{"type":32,"tag":208,"props":2425,"children":2426},{"style":215},[2427],{"type":37,"value":327},{"type":32,"tag":208,"props":2429,"children":2430},{"style":283},[2431],{"type":37,"value":2432},"COLLECTION_QUERY",{"type":32,"tag":208,"props":2434,"children":2435},{"style":215},[2436],{"type":37,"value":2437},", {\n",{"type":32,"tag":208,"props":2439,"children":2440},{"class":210,"line":348},[2441],{"type":32,"tag":208,"props":2442,"children":2443},{"style":215},[2444],{"type":37,"value":2445},"    variables: { handle: params.handle }\n",{"type":32,"tag":208,"props":2447,"children":2448},{"class":210,"line":358},[2449],{"type":32,"tag":208,"props":2450,"children":2451},{"style":215},[2452],{"type":37,"value":2453},"  })\n",{"type":32,"tag":208,"props":2455,"children":2456},{"class":210,"line":26},[2457,2461,2466],{"type":32,"tag":208,"props":2458,"children":2459},{"style":242},[2460],{"type":37,"value":882},{"type":32,"tag":208,"props":2462,"children":2463},{"style":227},[2464],{"type":37,"value":2465}," json",{"type":32,"tag":208,"props":2467,"children":2468},{"style":215},[2469],{"type":37,"value":2470},"({ collection })\n",{"type":32,"tag":208,"props":2472,"children":2473},{"class":210,"line":418},[2474],{"type":32,"tag":208,"props":2475,"children":2476},{"style":215},[2477],{"type":37,"value":920},{"type":32,"tag":208,"props":2479,"children":2480},{"class":210,"line":427},[2481],{"type":32,"tag":208,"props":2482,"children":2483},{"emptyLinePlaceholder":268},[2484],{"type":37,"value":271},{"type":32,"tag":208,"props":2486,"children":2487},{"class":210,"line":435},[2488,2492,2496,2500,2505],{"type":32,"tag":208,"props":2489,"children":2490},{"style":242},[2491],{"type":37,"value":843},{"type":32,"tag":208,"props":2493,"children":2494},{"style":242},[2495],{"type":37,"value":848},{"type":32,"tag":208,"props":2497,"children":2498},{"style":242},[2499],{"type":37,"value":853},{"type":32,"tag":208,"props":2501,"children":2502},{"style":227},[2503],{"type":37,"value":2504}," Collection",{"type":32,"tag":208,"props":2506,"children":2507},{"style":215},[2508],{"type":37,"value":1265},{"type":32,"tag":208,"props":2510,"children":2511},{"class":210,"line":444},[2512,2516,2520,2524,2528,2532,2537],{"type":32,"tag":208,"props":2513,"children":2514},{"style":242},[2515],{"type":37,"value":1141},{"type":32,"tag":208,"props":2517,"children":2518},{"style":215},[2519],{"type":37,"value":2395},{"type":32,"tag":208,"props":2521,"children":2522},{"style":283},[2523],{"type":37,"value":2400},{"type":32,"tag":208,"props":2525,"children":2526},{"style":215},[2527],{"type":37,"value":2405},{"type":32,"tag":208,"props":2529,"children":2530},{"style":242},[2531],{"type":37,"value":400},{"type":32,"tag":208,"props":2533,"children":2534},{"style":227},[2535],{"type":37,"value":2536}," useLoaderData",{"type":32,"tag":208,"props":2538,"children":2539},{"style":215},[2540],{"type":37,"value":415},{"type":32,"tag":208,"props":2542,"children":2543},{"class":210,"line":465},[2544],{"type":32,"tag":208,"props":2545,"children":2546},{"style":215},[2547],{"type":37,"value":2548},"  \n",{"type":32,"tag":208,"props":2550,"children":2551},{"class":210,"line":483},[2552,2556],{"type":32,"tag":208,"props":2553,"children":2554},{"style":242},[2555],{"type":37,"value":882},{"type":32,"tag":208,"props":2557,"children":2558},{"style":215},[2559],{"type":37,"value":887},{"type":32,"tag":208,"props":2561,"children":2562},{"class":210,"line":491},[2563,2567,2571],{"type":32,"tag":208,"props":2564,"children":2565},{"style":215},[2566],{"type":37,"value":566},{"type":32,"tag":208,"props":2568,"children":2569},{"style":221},[2570],{"type":37,"value":544},{"type":32,"tag":208,"props":2572,"children":2573},{"style":215},[2574],{"type":37,"value":235},{"type":32,"tag":208,"props":2576,"children":2577},{"class":210,"line":508},[2578,2582,2587],{"type":32,"tag":208,"props":2579,"children":2580},{"style":215},[2581],{"type":37,"value":910},{"type":32,"tag":208,"props":2583,"children":2584},{"style":352},[2585],{"type":37,"value":2586},"\u002F* Server component — metadata statica *\u002F",{"type":32,"tag":208,"props":2588,"children":2589},{"style":215},[2590],{"type":37,"value":920},{"type":32,"tag":208,"props":2592,"children":2593},{"class":210,"line":516},[2594,2598,2603],{"type":32,"tag":208,"props":2595,"children":2596},{"style":215},[2597],{"type":37,"value":928},{"type":32,"tag":208,"props":2599,"children":2600},{"style":283},[2601],{"type":37,"value":2602},"CollectionHeader",{"type":32,"tag":208,"props":2604,"children":2605},{"style":215},[2606],{"type":37,"value":1397},{"type":32,"tag":208,"props":2608,"children":2609},{"class":210,"line":533},[2610,2615,2619],{"type":32,"tag":208,"props":2611,"children":2612},{"style":227},[2613],{"type":37,"value":2614},"        title",{"type":32,"tag":208,"props":2616,"children":2617},{"style":242},[2618],{"type":37,"value":400},{"type":32,"tag":208,"props":2620,"children":2621},{"style":215},[2622],{"type":37,"value":2623},"{collection.title} \n",{"type":32,"tag":208,"props":2625,"children":2626},{"class":210,"line":551},[2627,2632,2636],{"type":32,"tag":208,"props":2628,"children":2629},{"style":227},[2630],{"type":37,"value":2631},"        description",{"type":32,"tag":208,"props":2633,"children":2634},{"style":242},[2635],{"type":37,"value":400},{"type":32,"tag":208,"props":2637,"children":2638},{"style":215},[2639],{"type":37,"value":2640},"{collection.description} \n",{"type":32,"tag":208,"props":2642,"children":2643},{"class":210,"line":560},[2644],{"type":32,"tag":208,"props":2645,"children":2646},{"style":215},[2647],{"type":37,"value":1488},{"type":32,"tag":208,"props":2649,"children":2650},{"class":210,"line":593},[2651],{"type":32,"tag":208,"props":2652,"children":2653},{"style":215},[2654],{"type":37,"value":981},{"type":32,"tag":208,"props":2656,"children":2657},{"class":210,"line":602},[2658,2662,2667],{"type":32,"tag":208,"props":2659,"children":2660},{"style":215},[2661],{"type":37,"value":910},{"type":32,"tag":208,"props":2663,"children":2664},{"style":352},[2665],{"type":37,"value":2666},"\u002F* Client component — filtri, ordinamento *\u002F",{"type":32,"tag":208,"props":2668,"children":2669},{"style":215},[2670],{"type":37,"value":920},{"type":32,"tag":208,"props":2672,"children":2673},{"class":210,"line":611},[2674,2678,2683,2688,2692],{"type":32,"tag":208,"props":2675,"children":2676},{"style":215},[2677],{"type":37,"value":928},{"type":32,"tag":208,"props":2679,"children":2680},{"style":283},[2681],{"type":37,"value":2682},"ProductFilters",{"type":32,"tag":208,"props":2684,"children":2685},{"style":227},[2686],{"type":37,"value":2687}," facets",{"type":32,"tag":208,"props":2689,"children":2690},{"style":242},[2691],{"type":37,"value":400},{"type":32,"tag":208,"props":2693,"children":2694},{"style":215},[2695],{"type":37,"value":2696},"{collection.facets} \u002F>\n",{"type":32,"tag":208,"props":2698,"children":2699},{"class":210,"line":642},[2700],{"type":32,"tag":208,"props":2701,"children":2702},{"style":215},[2703],{"type":37,"value":981},{"type":32,"tag":208,"props":2705,"children":2706},{"class":210,"line":659},[2707,2711,2716],{"type":32,"tag":208,"props":2708,"children":2709},{"style":215},[2710],{"type":37,"value":910},{"type":32,"tag":208,"props":2712,"children":2713},{"style":352},[2714],{"type":37,"value":2715},"\u002F* Server component — product card *\u002F",{"type":32,"tag":208,"props":2717,"children":2718},{"style":215},[2719],{"type":37,"value":920},{"type":32,"tag":208,"props":2721,"children":2722},{"class":210,"line":1326},[2723,2727,2731,2735,2739],{"type":32,"tag":208,"props":2724,"children":2725},{"style":215},[2726],{"type":37,"value":928},{"type":32,"tag":208,"props":2728,"children":2729},{"style":283},[2730],{"type":37,"value":571},{"type":32,"tag":208,"props":2732,"children":2733},{"style":227},[2734],{"type":37,"value":286},{"type":32,"tag":208,"props":2736,"children":2737},{"style":242},[2738],{"type":37,"value":400},{"type":32,"tag":208,"props":2740,"children":2741},{"style":215},[2742],{"type":37,"value":2743},"{collection.products} \u002F>\n",{"type":32,"tag":208,"props":2745,"children":2746},{"class":210,"line":1335},[2747,2751,2755],{"type":32,"tag":208,"props":2748,"children":2749},{"style":215},[2750],{"type":37,"value":1031},{"type":32,"tag":208,"props":2752,"children":2753},{"style":221},[2754],{"type":37,"value":544},{"type":32,"tag":208,"props":2756,"children":2757},{"style":215},[2758],{"type":37,"value":235},{"type":32,"tag":208,"props":2760,"children":2761},{"class":210,"line":1343},[2762],{"type":32,"tag":208,"props":2763,"children":2764},{"style":215},[2765],{"type":37,"value":1047},{"type":32,"tag":208,"props":2767,"children":2768},{"class":210,"line":1355},[2769],{"type":32,"tag":208,"props":2770,"children":2771},{"style":215},[2772],{"type":37,"value":920},{"type":32,"tag":33,"props":2774,"children":2775},{},[2776],{"type":37,"value":2777},"Con questa architettura:",{"type":32,"tag":729,"props":2779,"children":2780},{},[2781,2786,2791,2796,2801],{"type":32,"tag":733,"props":2782,"children":2783},{},[2784],{"type":37,"value":2785},"I metadati della collection e le product card vengono renderizzati sul server → friendly per SEO, bundle ridotto",{"type":32,"tag":733,"props":2787,"children":2788},{},[2789],{"type":37,"value":2790},"L'interfaccia dei filtri è un component client → interattiva, gestione dello state",{"type":32,"tag":733,"props":2792,"children":2793},{},[2794],{"type":37,"value":2795},"Bundle iniziale: 72kb (filtri + gestori di eventi)",{"type":32,"tag":733,"props":2797,"children":2798},{},[2799],{"type":37,"value":2800},"Tempo di hydration: 160ms",{"type":32,"tag":733,"props":2802,"children":2803},{},[2804],{"type":37,"value":2805},"TBT: 240ms",{"type":32,"tag":33,"props":2807,"children":2808},{},[2809],{"type":37,"value":2810},"Se avessimo reso il client l'intera pagina, il bundle sarebbe 210kb, il TBT 1100ms. Impatto sul conversion rate: +4.2% (A\u002FB test, 14 giorni, n=48.000).",{"type":32,"tag":33,"props":2812,"children":2813},{},[2814,2816,2823],{"type":37,"value":2815},"La decisione viene presa a livello di component — il tradeoff tra dimensione del bundle e latenza di interattività è misurabile. Questa architettura si integra anche nei nostri ",{"type":32,"tag":780,"props":2817,"children":2820},{"href":2818,"rel":2819},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fui-ux",[784],[2821],{"type":37,"value":2822},"processi UI\u002FUX",{"type":37,"value":2824},", dove una matrice di priorità dei component basata sui dati del comportamento dell'utente determina quale elemento deve stare sul client e quale deve essere fornito tramite RSC.",{"type":32,"tag":2826,"props":2827,"children":2828},"style",{},[2829],{"type":37,"value":2830},"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":2832},[2833,2836,2837,2840,2841,2842],{"id":42,"depth":238,"text":45,"children":2834},[2835],{"id":171,"depth":264,"text":174},{"id":687,"depth":238,"text":690},{"id":805,"depth":238,"text":808,"children":2838},[2839],{"id":1612,"depth":264,"text":1615},{"id":1946,"depth":238,"text":1949},{"id":2046,"depth":238,"text":2049},{"id":2268,"depth":238,"text":2271},"markdown","content:it:tech:server-components-vs-client-2026-il-giusto-equilibrio.md","content","it\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio.md","it\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio","md",1785103522006]