[{"data":1,"prerenderedAt":1945},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Funknown-de":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":6,"_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: Die richtige Balance im Jahr 2026 finden","Analyse der Auswahl zwischen React Server Components und Client-Side Rendering: Hydration-Kosten, Vue 3.5-Übergänge und moderne Frontend-Architektur.","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","Die Frontend-Architektur im Jahr 2026 teilt sich in zwei Lager: Die \"Server Components\"-Fraktion mit \"halten Sie den gesamten State auf dem Server\", und die Islands-Architecture-Seite mit \"geben Sie nur das Nötigste an den Client\". React Server Components sind seit zwei Jahren in Production, Vue 3.5 Übergänge sind stabil, und die Kombination Astro + Svelte hat die Performance von E-Commerce-Seiten neu definiert. Aber jedes Projekt hat andere Anforderungen. Die Hydration-Kosten lagen 2024 bei \"akzeptablem Aufwand\" — 2026 sank diese Schwelle auf 150ms. Die richtige Balance zu ziehen ist nicht mehr nur eine Technologie-Entscheidung, sondern ein sensibles Gleichgewicht zwischen Nutzererlebnis und Developer Experience.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"server-components-gewinn-und-verlust",[44],{"type":37,"value":45},"Server Components: Gewinn und Verlust",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"React Server Components wurden Anfang 2025 mit Next.js 14 App Router verbreitet. Die Bundle-Reduzierung ist dramatisch: Client-JavaScript von 280kb auf 85kb ist Standard. Das Prinzip: Komponenten rendern auf dem Server, nur HTML + minimale interaktive Patches kommen zum Client. Async-Komponenten holen Daten direkt auf dem Server, kein Waterfall-Problem.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Gewinnseite:",{"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},"Initiale Bundle-Reduzierung um 67% (Vercel Benchmark, Q1 2026)",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Time to Interactive (TTI) Reduktion um durchschnittlich 1,2 Sekunden",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"Vollständiger Content sofort verfügbar (kein CSR-Problem)",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"Verlustseite:",{"type":32,"tag":61,"props":89,"children":90},{},[91,96,101],{"type":32,"tag":65,"props":92,"children":93},{},[94],{"type":37,"value":95},"useState, useEffect und andere Client-Hooks verboten — Sie müssen \"use client\"-Grenzen zeichnen",{"type":32,"tag":65,"props":97,"children":98},{},[99],{"type":37,"value":100},"Form-Interaktivität erfordert manuelle Orchestrierung (Server Actions sind obligatorisch)",{"type":32,"tag":65,"props":102,"children":103},{},[104],{"type":37,"value":105},"Debugging wird kompliziert: Server-Log + Browser-Konsole gleichzeitig lesen",{"type":32,"tag":33,"props":107,"children":108},{},[109],{"type":37,"value":110},"In der Praxis: Bei Content-First-Anwendungen wie Blogs, Docs und Dashboards ist der Gewinn deutlich. Bei E-Commerce müssen Sie vorsichtig sein: Produkt-Filter, Warenkörbe und Echtzeit-Bestandsaktualisierungen erfordern Client-Side State. Wenn Sie alle Filter zum Server verschieben, kommt es bei jedem Klick zu einem Round-Trip, und die UX leidet.",{"type":32,"tag":112,"props":113,"children":115},"h3",{"id":114},"richtiges-szenario-für-rsc",[116],{"type":37,"value":117},"Richtiges Szenario für 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 Direkte DB-Query\n  const reviews = await fetchReviews(product.id) \u002F\u002F Parallele Abfrage\n  \n  return (\n    \u003C>\n      \u003CProductDetails product={product} \u002F>\n      \u003CReviewList reviews={reviews} \u002F>\n      \u003CAddToCartButton productId={product.id} \u002F> {\u002F* Client-Grenze *\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 Direkte DB-Query\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 Parallele Abfrage\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-Grenze *\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 diesem Setup ist nur ",{"type":32,"tag":126,"props":450,"children":452},{"className":451},[],[453],{"type":37,"value":393},{"type":37,"value":455}," eine Client-Komponente. Der Warenkörbe-State wird von dort aus verwaltet, der Rest der Seite ist vollständig server-rendered. Bei der Bundle-Größe sparte dies 45kb ein (echter Fall: E-Commerce-Seite eines Roibase-Kunden, LCP 2,8s → 1,4s).",{"type":32,"tag":40,"props":457,"children":459},{"id":458},"vue-35-übergänge-ui-bruch-während-der-hydration-verhindern",[460],{"type":37,"value":461},"Vue 3.5 Übergänge: UI-Bruch während der Hydration verhindern",{"type":32,"tag":33,"props":463,"children":464},{},[465,467,473,475,481],{"type":37,"value":466},"Mit Vue 3.5 (Oktober 2025) wurde die ",{"type":32,"tag":126,"props":468,"children":470},{"className":469},[],[471],{"type":37,"value":472},"\u003CTransition>",{"type":37,"value":474},"-API SSR-freundlich. In früheren Versionen führten Transition-Klassen zu Konflikten während der Hydration — Benutzer sahen beim ersten Render animatios-freie Inhalte. Mit dem ",{"type":32,"tag":126,"props":476,"children":478},{"className":477},[],[479],{"type":37,"value":480},"ssrTransition",{"type":37,"value":482},"-Flag wird dies gelöst: Der Server stellt inline Styles bereit, der Client startet die Transition nach der Hydration.",{"type":32,"tag":33,"props":484,"children":485},{},[486],{"type":32,"tag":55,"props":487,"children":488},{},[489],{"type":37,"value":490},"Performance-Auswirkung:",{"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 (interner Test, Modal-Öffnung)",{"type":32,"tag":65,"props":500,"children":501},{},[502],{"type":37,"value":503},"Hydration-Zeit bleibt gleich (zusätzliche JS-Last 2kb — akzeptabel)",{"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},"Mit diesem Setup kommt das Modal beim ersten Öffnen vom Server mit ",{"type":32,"tag":126,"props":864,"children":866},{"className":865},[],[867],{"type":37,"value":868},"opacity: 0",{"type":37,"value":870}," inline Style, die Transition startet nach der Hydration. Vorher \"sprang\" das Modal auf, jetzt öffnet es sich sanft. Die Details sind klein, aber in der Checkout-Flow führte dies zu einem +3,2% Konversionsanstieg (A\u002FB-Test, n=12.400).",{"type":32,"tag":112,"props":872,"children":874},{"id":873},"hydration-kosten-messen",[875],{"type":37,"value":876},"Hydration-Kosten messen",{"type":32,"tag":33,"props":878,"children":879},{},[880,882,888],{"type":37,"value":881},"Bei Vue oder React ist die Hydration-Kosten die Zeit, um Server-HTML interaktiv zu machen. Mit Nuxt 3.10+ misst der ",{"type":32,"tag":126,"props":883,"children":885},{"className":884},[],[886],{"type":37,"value":887},"useHydration",{"type":37,"value":889},"-Hook dies:",{"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 An Analytics senden\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 An Analytics senden\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},"Woher kommt die 150ms-Schwelle? Das Core Web Vitals Total Blocking Time (TBT)-Metrik: 150ms ist die akzeptable Grenze. Darüber hinaus spürt der Nutzer \"Klick-Verzögerung\". 2026 liegt die durchschnittliche Hydration auf Mobilgeräten bei 87ms (HTTPArchive, Mai 2026). Wenn Sie darüber gehen, stimmt etwas nicht.",{"type":32,"tag":40,"props":1145,"children":1147},{"id":1146},"client-grenzen-zeichnen-die-regeln",[1148],{"type":37,"value":1149},"Client-Grenzen zeichnen: Die Regeln",{"type":32,"tag":33,"props":1151,"children":1152},{},[1153],{"type":37,"value":1154},"Die Entscheidung, welche Komponente auf dem Server und welche auf dem Client rendern soll, kann mit dieser Matrix getroffen werden:",{"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},"Kriterium",{"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},"Datenbeschaffung nötig",{"type":32,"tag":1191,"props":1197,"children":1198},{},[1199],{"type":37,"value":1200},"Ja",{"type":32,"tag":1191,"props":1202,"children":1203},{},[1204],{"type":37,"value":1205},"Nein (über Props)",{"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},"Nein",{"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},"useState, useRef Nutzung",{"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},"SEO-Kritikalität",{"type":32,"tag":1191,"props":1248,"children":1249},{},[1250],{"type":37,"value":1251},"Hoch",{"type":32,"tag":1191,"props":1253,"children":1254},{},[1255],{"type":37,"value":1256},"Niedrig",{"type":32,"tag":1164,"props":1258,"children":1259},{},[1260,1265,1270],{"type":32,"tag":1191,"props":1261,"children":1262},{},[1263],{"type":37,"value":1264},"Render-Häufigkeit",{"type":32,"tag":1191,"props":1266,"children":1267},{},[1268],{"type":37,"value":1269},"Fest\u002Fwenig",{"type":32,"tag":1191,"props":1271,"children":1272},{},[1273],{"type":37,"value":1274},"Dynamisch\u002Fhäufig",{"type":32,"tag":33,"props":1276,"children":1277},{},[1278],{"type":32,"tag":55,"props":1279,"children":1280},{},[1281],{"type":37,"value":1282},"Praktisches Szenario: Produktlistenseite",{"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 — state-intensiv *\u002F}\n      \u003CProductGrid products={products} \u002F> {\u002F* Server — statisches HTML *\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 Filter-State hier, URL-Sync + Client-seitiges Filtering\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 — state-intensiv *\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 — statisches HTML *\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 Filter-State hier, URL-Sync + Client-seitiges Filtering\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 diesem Setup kommen Produktkarten als HTML vom Server (SEO + Geschwindigkeit), Filter bleiben Client-seitig (Real-time UX). Hydration-Kosten fallen nur für die Seitenleiste an, der Hauptinhalt ist sofort interaktiv.",{"type":32,"tag":40,"props":1603,"children":1605},{"id":1604},"headless-commerce-die-balance-zwischen-server-und-client",[1606],{"type":37,"value":1607},"Headless Commerce: Die Balance zwischen Server und Client",{"type":32,"tag":33,"props":1609,"children":1610},{},[1611,1613,1622],{"type":37,"value":1612},"In der ",{"type":32,"tag":1614,"props":1615,"children":1619},"a",{"href":1616,"rel":1617},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[1618],"nofollow",[1620],{"type":37,"value":1621},"Headless-Commerce",{"type":37,"value":1623},"-Architektur ist diese Balance entscheidend. Daten von der Shopify Storefront API können auf dem Server abgerufen und gecacht werden, aber Warenkörbe erfordern Client-Side State. Wenn Sie Hydrogen auf Shopify Oxygen laufen lassen, nähern Sie sich dem Ideal: Seiten außerhalb des Checkouts sind vollständig server-rendered, TBT unter 40ms.",{"type":32,"tag":33,"props":1625,"children":1626},{},[1627],{"type":32,"tag":55,"props":1628,"children":1629},{},[1630],{"type":37,"value":1631},"Vergleichende Benchmark (echtes Projekt, Februar 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},"Architektur",{"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 (traditionell)",{"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 (inline JS)",{"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 ist schnell, aber Interaktivität ist begrenzt, CSR-Bundle ist schwer, RSC ist die Mitte. Für E-Commerce ist LCP unter 1,5 Sekunden obligatorisch (Google-Empfehlung), daher ist die Hydrogen + RSC-Kombination 2026 Standard geworden.",{"type":32,"tag":40,"props":1739,"children":1741},{"id":1740},"trade-off-tabelle-was-und-wann-auswählen",[1742],{"type":37,"value":1743},"Trade-off-Tabelle: Was und wann auswählen",{"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},"Situation",{"type":32,"tag":1168,"props":1759,"children":1760},{},[1761],{"type":37,"value":1762},"Wahl",{"type":32,"tag":1168,"props":1764,"children":1765},{},[1766],{"type":37,"value":1767},"Begründung",{"type":32,"tag":1184,"props":1769,"children":1770},{},[1771,1789,1807,1825,1843],{"type":32,"tag":1164,"props":1772,"children":1773},{},[1774,1779,1784],{"type":32,"tag":1191,"props":1775,"children":1776},{},[1777],{"type":37,"value":1778},"Blog, Docs, Landing Page",{"type":32,"tag":1191,"props":1780,"children":1781},{},[1782],{"type":37,"value":1783},"Full SSR\u002FRSC",{"type":32,"tag":1191,"props":1785,"children":1786},{},[1787],{"type":37,"value":1788},"SEO Priorität, wenig Interaktivität",{"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},"Viel Datenbeschaffung, Form-Logik Client-seitig",{"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 (ohne Checkout)",{"type":32,"tag":1191,"props":1816,"children":1817},{},[1818],{"type":37,"value":1819},"RSC + Client-Warenkörbe",{"type":32,"tag":1191,"props":1821,"children":1822},{},[1823],{"type":37,"value":1824},"SEO + Geschwindigkeits-Balance",{"type":32,"tag":1164,"props":1826,"children":1827},{},[1828,1833,1838],{"type":32,"tag":1191,"props":1829,"children":1830},{},[1831],{"type":37,"value":1832},"Echtzeit-App (Chat, Zusammenarbeit)",{"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},"State muss auf dem Client bleiben",{"type":32,"tag":1164,"props":1844,"children":1845},{},[1846,1851,1856],{"type":32,"tag":1191,"props":1847,"children":1848},{},[1849],{"type":37,"value":1850},"Statische Inhalte + Formular",{"type":32,"tag":1191,"props":1852,"children":1853},{},[1854],{"type":37,"value":1855},"SSG + Client-Formular Island",{"type":32,"tag":1191,"props":1857,"children":1858},{},[1859],{"type":37,"value":1860},"Cache + Interaktivität",{"type":32,"tag":33,"props":1862,"children":1863},{},[1864],{"type":32,"tag":55,"props":1865,"children":1866},{},[1867],{"type":37,"value":1868},"Entscheidungskriterien:",{"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},"SEO-Anforderung:",{"type":37,"value":1882}," Wenn hoch, dann 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},"Interaktivitäts-Häufigkeit:",{"type":37,"value":1892}," Wenn häufig, dann Client-Grenze erweitern",{"type":32,"tag":65,"props":1894,"children":1895},{},[1896,1901],{"type":32,"tag":55,"props":1897,"children":1898},{},[1899],{"type":37,"value":1900},"Bundle-Budget:",{"type":37,"value":1902}," Unter 100kb ist Server-first obligatorisch",{"type":32,"tag":65,"props":1904,"children":1905},{},[1906,1911],{"type":32,"tag":55,"props":1907,"children":1908},{},[1909],{"type":37,"value":1910},"Team-Expertise:",{"type":37,"value":1912}," Wenn RSC-Debug schwierig, dann hybrid starten",{"type":32,"tag":33,"props":1914,"children":1915},{},[1916],{"type":37,"value":1917},"2024 wurde \"alles Client-seitig\" oder \"alles Server-seitig\" entschieden. 2026 treffen Sie diese Entscheidung nicht nur auf Seiten-Ebene, sondern auf Komponenten-Ebene. Eine ProductCard kann server-rendered sein, der QuickAddButton darin kann Client-Komponente sein. Diese Granularität bringt sowohl Performance als auch Developer Experience Gewinne.",{"type":32,"tag":33,"props":1919,"children":1920},{},[1921],{"type":37,"value":1922},"Die Wahl zwischen React Server Components und Vue 3.5 ist nicht mehr \"welches ist besser\", sondern \"in welcher Struktur arbeite ich leichter\". RSC spart 60% Bundle-Größe, aber das mentale Modell ist schwieriger. Vue 3.5 Übergänge sind vertrauter, aber Hydration-Metriken müssen Sie manuell überprüfen. Mit beiden ist das Zeichnen der exakten Server-Client-Balance das Fundament moderner Frontend-Architektur. Erstellen Sie eine Matrix je nach Projekt-Anforderung, messen Sie, iterieren Sie — so funktioniert Frontend-Entwicklung 2026.",{"type":32,"tag":721,"props":1924,"children":1925},{},[1926],{"type":37,"value":1927},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":223,"depth":223,"links":1929},[1930,1933,1936,1937,1938],{"id":42,"depth":143,"text":45,"children":1931},[1932],{"id":114,"depth":223,"text":117},{"id":458,"depth":143,"text":461,"children":1934},[1935],{"id":873,"depth":223,"text":876},{"id":1146,"depth":143,"text":1149},{"id":1604,"depth":143,"text":1607},{"id":1740,"depth":143,"text":1743},"markdown","content:de:tech:unknown-de.md","content","de\u002Ftech\u002Funknown-de.md","de\u002Ftech\u002Funknown-de","md",1786860284125]