[{"data":1,"prerenderedAt":2571},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fserver-components-vs-client-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fen\u002Ftech\u002Fserver-components-vs-client-2026-drawing-the-right-line","\u002Fes\u002Ftech\u002Fserver-components-vs-client-2026","\u002Ffr\u002Ftech\u002Fcomponents-client-vs-serveur-2026","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026-dogrumu-cizgi-cizmek","\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":2565,"_id":2566,"_source":2567,"_file":2568,"_stem":2569,"_extension":2570},"tech",false,"","Server Components vs Client: Die richtige Trennlinie 2026","React Server Components und Vue 3.5 zur Hydration-Optimierung. Wie Architektur-Entscheidungen Bundle Size, TBT und FCP beeinflussen.","2026-05-24",[21,22,23,24,25],"react-server-components","vue-hydration","web-performance","headless-architecture","frontend-optimization",9,"Roibase",{"type":29,"children":30,"toc":2553},"root",[31,39,46,51,65,70,863,868,874,895,908,1059,1086,1102,1108,1113,1242,1247,1252,1258,1263,1268,1421,1426,1431,1631,1636,1642,1647,1703,1724,2083,2103,2109,2114,2119,2142,2147,2314,2319,2325,2493,2498,2504,2509,2514,2542,2547],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","React Server Components wurden 2024 zum Standard. Nach Vue 3.5 im Jahr 2025 verbreiteten sich ähnliche Patterns im Nuxt-Ökosystem. Mitte 2026 sehen sich neue Projekte einer zentralen Frage gegenüber: „Welche Components rendern auf dem Server, welche auf dem Client?\" Diese Entscheidung wirkt sich direkt auf Bundle Size, Time to Interactive (TTI) und First Contentful Paint (FCP) aus. Bei Headless-Commerce-Projekten ist sie besonders kritisch: Der Checkout muss interaktiv sein, aber die Produktliste könnte die Hydration-Kosten überflüssig machen.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"wo-die-runtime-kosten-von-server-components-entstehen",[44],{"type":37,"value":45},"Wo die Runtime-Kosten von Server Components entstehen",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Server Component bedeutet nicht automatisch leichter. Wenn der Server-gerendertes HTML beim Client ankommt und interaktive Teile enthält, beginnt der Hydration-Prozess. Dabei bindet die React- oder Vue-Runtime Event-Listener an das DOM, ohne es neu zu konstruieren. Das Problem: Eine große Component-Tree zu hydratisieren blockiert den JavaScript-Main-Thread.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,63],{"type":37,"value":55},"Laut Chrome User Experience Report Q1 2026 liegt die mediane TBT (Total Blocking Time) von E-Commerce-Seiten bei 320ms. Hydration trägt durchschnittlich 180–240ms dazu bei. Das bedeutet: 60–75% der TBT entstehen durch Hydration. Mit Nuxt 3.12+ und Next.js 15+ ist selective Hydration aktiv, aber wenn Sie jeder Component ",{"type":32,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":37,"value":62},"client:load",{"type":37,"value":64}," zuweisen, landen Sie wieder im gleichen Problem.",{"type":32,"tag":33,"props":66,"children":67},{},[68],{"type":37,"value":69},"Beispiel-Szenario: Eine Kategorieseite mit 120 Produkten. Jede Produktkarte enthält ein lazy-geladenes Bild, Preisinformation und einen „Zum Warenkorb hinzufügen\"-Button. Wenn alle Karten Client-Components sind, beträgt das initiale Bundle 340KB (gzipped). Die Hydration dauert durchschnittlich 420ms (iPhone 13, 4G). Aber 80% der Produktkarte ist statisch – nur der Button ist interaktiv. Wenn Sie die Karte zu einer Server Component konvertieren und nur den Button mit einer Client-Direktive markieren, sinkt das Bundle auf 95KB und die Hydration auf 120ms.",{"type":32,"tag":71,"props":72,"children":76},"pre",{"className":73,"code":74,"language":75,"meta":16,"style":16},"language-jsx shiki shiki-themes github-dark","\u002F\u002F ❌ Gesamte Karte client-seitig\n'use client'\nexport default function ProductCard({ product }) {\n  const [inCart, setInCart] = useState(false)\n  return (\n    \u003Cdiv className=\"card\">\n      \u003Cimg src={product.image} loading=\"lazy\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003Cp>{product.price}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setInCart(true)}>Zum Warenkorb\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F ✅ Nur Button client-seitig\n\u002F\u002F ProductCard.server.jsx\nexport default function ProductCard({ product }) {\n  return (\n    \u003Cdiv className=\"card\">\n      \u003Cimg src={product.image} loading=\"lazy\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003Cp>{product.price}\u003C\u002Fp>\n      \u003CAddToCartButton productId={product.id} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F AddToCartButton.client.jsx\n'use client'\nexport default function AddToCartButton({ productId }) {\n  const [inCart, setInCart] = useState(false)\n  return \u003Cbutton onClick={() => setInCart(true)}>Zum Warenkorb\u003C\u002Fbutton>\n}\n","jsx",[77],{"type":32,"tag":57,"props":78,"children":79},{"__ignoreMap":16},[80,92,102,145,205,219,253,300,326,350,409,426,435,444,454,463,472,504,516,544,584,608,632,659,675,683,691,699,708,716,750,798,855],{"type":32,"tag":81,"props":82,"children":85},"span",{"class":83,"line":84},"line",1,[86],{"type":32,"tag":81,"props":87,"children":89},{"style":88},"--shiki-default:#6A737D",[90],{"type":37,"value":91},"\u002F\u002F ❌ Gesamte Karte client-seitig\n",{"type":32,"tag":81,"props":93,"children":95},{"class":83,"line":94},2,[96],{"type":32,"tag":81,"props":97,"children":99},{"style":98},"--shiki-default:#9ECBFF",[100],{"type":37,"value":101},"'use client'\n",{"type":32,"tag":81,"props":103,"children":105},{"class":83,"line":104},3,[106,112,117,122,128,134,140],{"type":32,"tag":81,"props":107,"children":109},{"style":108},"--shiki-default:#F97583",[110],{"type":37,"value":111},"export",{"type":32,"tag":81,"props":113,"children":114},{"style":108},[115],{"type":37,"value":116}," default",{"type":32,"tag":81,"props":118,"children":119},{"style":108},[120],{"type":37,"value":121}," function",{"type":32,"tag":81,"props":123,"children":125},{"style":124},"--shiki-default:#B392F0",[126],{"type":37,"value":127}," ProductCard",{"type":32,"tag":81,"props":129,"children":131},{"style":130},"--shiki-default:#E1E4E8",[132],{"type":37,"value":133},"({ ",{"type":32,"tag":81,"props":135,"children":137},{"style":136},"--shiki-default:#FFAB70",[138],{"type":37,"value":139},"product",{"type":32,"tag":81,"props":141,"children":142},{"style":130},[143],{"type":37,"value":144}," }) {\n",{"type":32,"tag":81,"props":146,"children":148},{"class":83,"line":147},4,[149,154,159,165,170,175,180,185,190,195,200],{"type":32,"tag":81,"props":150,"children":151},{"style":108},[152],{"type":37,"value":153},"  const",{"type":32,"tag":81,"props":155,"children":156},{"style":130},[157],{"type":37,"value":158}," [",{"type":32,"tag":81,"props":160,"children":162},{"style":161},"--shiki-default:#79B8FF",[163],{"type":37,"value":164},"inCart",{"type":32,"tag":81,"props":166,"children":167},{"style":130},[168],{"type":37,"value":169},", ",{"type":32,"tag":81,"props":171,"children":172},{"style":161},[173],{"type":37,"value":174},"setInCart",{"type":32,"tag":81,"props":176,"children":177},{"style":130},[178],{"type":37,"value":179},"] ",{"type":32,"tag":81,"props":181,"children":182},{"style":108},[183],{"type":37,"value":184},"=",{"type":32,"tag":81,"props":186,"children":187},{"style":124},[188],{"type":37,"value":189}," useState",{"type":32,"tag":81,"props":191,"children":192},{"style":130},[193],{"type":37,"value":194},"(",{"type":32,"tag":81,"props":196,"children":197},{"style":161},[198],{"type":37,"value":199},"false",{"type":32,"tag":81,"props":201,"children":202},{"style":130},[203],{"type":37,"value":204},")\n",{"type":32,"tag":81,"props":206,"children":208},{"class":83,"line":207},5,[209,214],{"type":32,"tag":81,"props":210,"children":211},{"style":108},[212],{"type":37,"value":213},"  return",{"type":32,"tag":81,"props":215,"children":216},{"style":130},[217],{"type":37,"value":218}," (\n",{"type":32,"tag":81,"props":220,"children":222},{"class":83,"line":221},6,[223,228,234,239,243,248],{"type":32,"tag":81,"props":224,"children":225},{"style":130},[226],{"type":37,"value":227},"    \u003C",{"type":32,"tag":81,"props":229,"children":231},{"style":230},"--shiki-default:#85E89D",[232],{"type":37,"value":233},"div",{"type":32,"tag":81,"props":235,"children":236},{"style":124},[237],{"type":37,"value":238}," className",{"type":32,"tag":81,"props":240,"children":241},{"style":108},[242],{"type":37,"value":184},{"type":32,"tag":81,"props":244,"children":245},{"style":98},[246],{"type":37,"value":247},"\"card\"",{"type":32,"tag":81,"props":249,"children":250},{"style":130},[251],{"type":37,"value":252},">\n",{"type":32,"tag":81,"props":254,"children":256},{"class":83,"line":255},7,[257,262,267,272,276,281,286,290,295],{"type":32,"tag":81,"props":258,"children":259},{"style":130},[260],{"type":37,"value":261},"      \u003C",{"type":32,"tag":81,"props":263,"children":264},{"style":230},[265],{"type":37,"value":266},"img",{"type":32,"tag":81,"props":268,"children":269},{"style":124},[270],{"type":37,"value":271}," src",{"type":32,"tag":81,"props":273,"children":274},{"style":108},[275],{"type":37,"value":184},{"type":32,"tag":81,"props":277,"children":278},{"style":130},[279],{"type":37,"value":280},"{product.image} ",{"type":32,"tag":81,"props":282,"children":283},{"style":124},[284],{"type":37,"value":285},"loading",{"type":32,"tag":81,"props":287,"children":288},{"style":108},[289],{"type":37,"value":184},{"type":32,"tag":81,"props":291,"children":292},{"style":98},[293],{"type":37,"value":294},"\"lazy\"",{"type":32,"tag":81,"props":296,"children":297},{"style":130},[298],{"type":37,"value":299}," \u002F>\n",{"type":32,"tag":81,"props":301,"children":303},{"class":83,"line":302},8,[304,308,313,318,322],{"type":32,"tag":81,"props":305,"children":306},{"style":130},[307],{"type":37,"value":261},{"type":32,"tag":81,"props":309,"children":310},{"style":230},[311],{"type":37,"value":312},"h3",{"type":32,"tag":81,"props":314,"children":315},{"style":130},[316],{"type":37,"value":317},">{product.title}\u003C\u002F",{"type":32,"tag":81,"props":319,"children":320},{"style":230},[321],{"type":37,"value":312},{"type":32,"tag":81,"props":323,"children":324},{"style":130},[325],{"type":37,"value":252},{"type":32,"tag":81,"props":327,"children":328},{"class":83,"line":26},[329,333,337,342,346],{"type":32,"tag":81,"props":330,"children":331},{"style":130},[332],{"type":37,"value":261},{"type":32,"tag":81,"props":334,"children":335},{"style":230},[336],{"type":37,"value":33},{"type":32,"tag":81,"props":338,"children":339},{"style":130},[340],{"type":37,"value":341},">{product.price}\u003C\u002F",{"type":32,"tag":81,"props":343,"children":344},{"style":230},[345],{"type":37,"value":33},{"type":32,"tag":81,"props":347,"children":348},{"style":130},[349],{"type":37,"value":252},{"type":32,"tag":81,"props":351,"children":353},{"class":83,"line":352},10,[354,358,363,368,372,377,382,387,391,396,401,405],{"type":32,"tag":81,"props":355,"children":356},{"style":130},[357],{"type":37,"value":261},{"type":32,"tag":81,"props":359,"children":360},{"style":230},[361],{"type":37,"value":362},"button",{"type":32,"tag":81,"props":364,"children":365},{"style":124},[366],{"type":37,"value":367}," onClick",{"type":32,"tag":81,"props":369,"children":370},{"style":108},[371],{"type":37,"value":184},{"type":32,"tag":81,"props":373,"children":374},{"style":130},[375],{"type":37,"value":376},"{() ",{"type":32,"tag":81,"props":378,"children":379},{"style":108},[380],{"type":37,"value":381},"=>",{"type":32,"tag":81,"props":383,"children":384},{"style":124},[385],{"type":37,"value":386}," setInCart",{"type":32,"tag":81,"props":388,"children":389},{"style":130},[390],{"type":37,"value":194},{"type":32,"tag":81,"props":392,"children":393},{"style":161},[394],{"type":37,"value":395},"true",{"type":32,"tag":81,"props":397,"children":398},{"style":130},[399],{"type":37,"value":400},")}>Zum Warenkorb\u003C\u002F",{"type":32,"tag":81,"props":402,"children":403},{"style":230},[404],{"type":37,"value":362},{"type":32,"tag":81,"props":406,"children":407},{"style":130},[408],{"type":37,"value":252},{"type":32,"tag":81,"props":410,"children":412},{"class":83,"line":411},11,[413,418,422],{"type":32,"tag":81,"props":414,"children":415},{"style":130},[416],{"type":37,"value":417},"    \u003C\u002F",{"type":32,"tag":81,"props":419,"children":420},{"style":230},[421],{"type":37,"value":233},{"type":32,"tag":81,"props":423,"children":424},{"style":130},[425],{"type":37,"value":252},{"type":32,"tag":81,"props":427,"children":429},{"class":83,"line":428},12,[430],{"type":32,"tag":81,"props":431,"children":432},{"style":130},[433],{"type":37,"value":434},"  )\n",{"type":32,"tag":81,"props":436,"children":438},{"class":83,"line":437},13,[439],{"type":32,"tag":81,"props":440,"children":441},{"style":130},[442],{"type":37,"value":443},"}\n",{"type":32,"tag":81,"props":445,"children":447},{"class":83,"line":446},14,[448],{"type":32,"tag":81,"props":449,"children":451},{"emptyLinePlaceholder":450},true,[452],{"type":37,"value":453},"\n",{"type":32,"tag":81,"props":455,"children":457},{"class":83,"line":456},15,[458],{"type":32,"tag":81,"props":459,"children":460},{"style":88},[461],{"type":37,"value":462},"\u002F\u002F ✅ Nur Button client-seitig\n",{"type":32,"tag":81,"props":464,"children":466},{"class":83,"line":465},16,[467],{"type":32,"tag":81,"props":468,"children":469},{"style":88},[470],{"type":37,"value":471},"\u002F\u002F ProductCard.server.jsx\n",{"type":32,"tag":81,"props":473,"children":475},{"class":83,"line":474},17,[476,480,484,488,492,496,500],{"type":32,"tag":81,"props":477,"children":478},{"style":108},[479],{"type":37,"value":111},{"type":32,"tag":81,"props":481,"children":482},{"style":108},[483],{"type":37,"value":116},{"type":32,"tag":81,"props":485,"children":486},{"style":108},[487],{"type":37,"value":121},{"type":32,"tag":81,"props":489,"children":490},{"style":124},[491],{"type":37,"value":127},{"type":32,"tag":81,"props":493,"children":494},{"style":130},[495],{"type":37,"value":133},{"type":32,"tag":81,"props":497,"children":498},{"style":136},[499],{"type":37,"value":139},{"type":32,"tag":81,"props":501,"children":502},{"style":130},[503],{"type":37,"value":144},{"type":32,"tag":81,"props":505,"children":507},{"class":83,"line":506},18,[508,512],{"type":32,"tag":81,"props":509,"children":510},{"style":108},[511],{"type":37,"value":213},{"type":32,"tag":81,"props":513,"children":514},{"style":130},[515],{"type":37,"value":218},{"type":32,"tag":81,"props":517,"children":519},{"class":83,"line":518},19,[520,524,528,532,536,540],{"type":32,"tag":81,"props":521,"children":522},{"style":130},[523],{"type":37,"value":227},{"type":32,"tag":81,"props":525,"children":526},{"style":230},[527],{"type":37,"value":233},{"type":32,"tag":81,"props":529,"children":530},{"style":124},[531],{"type":37,"value":238},{"type":32,"tag":81,"props":533,"children":534},{"style":108},[535],{"type":37,"value":184},{"type":32,"tag":81,"props":537,"children":538},{"style":98},[539],{"type":37,"value":247},{"type":32,"tag":81,"props":541,"children":542},{"style":130},[543],{"type":37,"value":252},{"type":32,"tag":81,"props":545,"children":547},{"class":83,"line":546},20,[548,552,556,560,564,568,572,576,580],{"type":32,"tag":81,"props":549,"children":550},{"style":130},[551],{"type":37,"value":261},{"type":32,"tag":81,"props":553,"children":554},{"style":230},[555],{"type":37,"value":266},{"type":32,"tag":81,"props":557,"children":558},{"style":124},[559],{"type":37,"value":271},{"type":32,"tag":81,"props":561,"children":562},{"style":108},[563],{"type":37,"value":184},{"type":32,"tag":81,"props":565,"children":566},{"style":130},[567],{"type":37,"value":280},{"type":32,"tag":81,"props":569,"children":570},{"style":124},[571],{"type":37,"value":285},{"type":32,"tag":81,"props":573,"children":574},{"style":108},[575],{"type":37,"value":184},{"type":32,"tag":81,"props":577,"children":578},{"style":98},[579],{"type":37,"value":294},{"type":32,"tag":81,"props":581,"children":582},{"style":130},[583],{"type":37,"value":299},{"type":32,"tag":81,"props":585,"children":587},{"class":83,"line":586},21,[588,592,596,600,604],{"type":32,"tag":81,"props":589,"children":590},{"style":130},[591],{"type":37,"value":261},{"type":32,"tag":81,"props":593,"children":594},{"style":230},[595],{"type":37,"value":312},{"type":32,"tag":81,"props":597,"children":598},{"style":130},[599],{"type":37,"value":317},{"type":32,"tag":81,"props":601,"children":602},{"style":230},[603],{"type":37,"value":312},{"type":32,"tag":81,"props":605,"children":606},{"style":130},[607],{"type":37,"value":252},{"type":32,"tag":81,"props":609,"children":611},{"class":83,"line":610},22,[612,616,620,624,628],{"type":32,"tag":81,"props":613,"children":614},{"style":130},[615],{"type":37,"value":261},{"type":32,"tag":81,"props":617,"children":618},{"style":230},[619],{"type":37,"value":33},{"type":32,"tag":81,"props":621,"children":622},{"style":130},[623],{"type":37,"value":341},{"type":32,"tag":81,"props":625,"children":626},{"style":230},[627],{"type":37,"value":33},{"type":32,"tag":81,"props":629,"children":630},{"style":130},[631],{"type":37,"value":252},{"type":32,"tag":81,"props":633,"children":635},{"class":83,"line":634},23,[636,640,645,650,654],{"type":32,"tag":81,"props":637,"children":638},{"style":130},[639],{"type":37,"value":261},{"type":32,"tag":81,"props":641,"children":642},{"style":161},[643],{"type":37,"value":644},"AddToCartButton",{"type":32,"tag":81,"props":646,"children":647},{"style":124},[648],{"type":37,"value":649}," productId",{"type":32,"tag":81,"props":651,"children":652},{"style":108},[653],{"type":37,"value":184},{"type":32,"tag":81,"props":655,"children":656},{"style":130},[657],{"type":37,"value":658},"{product.id} \u002F>\n",{"type":32,"tag":81,"props":660,"children":662},{"class":83,"line":661},24,[663,667,671],{"type":32,"tag":81,"props":664,"children":665},{"style":130},[666],{"type":37,"value":417},{"type":32,"tag":81,"props":668,"children":669},{"style":230},[670],{"type":37,"value":233},{"type":32,"tag":81,"props":672,"children":673},{"style":130},[674],{"type":37,"value":252},{"type":32,"tag":81,"props":676,"children":678},{"class":83,"line":677},25,[679],{"type":32,"tag":81,"props":680,"children":681},{"style":130},[682],{"type":37,"value":434},{"type":32,"tag":81,"props":684,"children":686},{"class":83,"line":685},26,[687],{"type":32,"tag":81,"props":688,"children":689},{"style":130},[690],{"type":37,"value":443},{"type":32,"tag":81,"props":692,"children":694},{"class":83,"line":693},27,[695],{"type":32,"tag":81,"props":696,"children":697},{"emptyLinePlaceholder":450},[698],{"type":37,"value":453},{"type":32,"tag":81,"props":700,"children":702},{"class":83,"line":701},28,[703],{"type":32,"tag":81,"props":704,"children":705},{"style":88},[706],{"type":37,"value":707},"\u002F\u002F AddToCartButton.client.jsx\n",{"type":32,"tag":81,"props":709,"children":711},{"class":83,"line":710},29,[712],{"type":32,"tag":81,"props":713,"children":714},{"style":98},[715],{"type":37,"value":101},{"type":32,"tag":81,"props":717,"children":719},{"class":83,"line":718},30,[720,724,728,732,737,741,746],{"type":32,"tag":81,"props":721,"children":722},{"style":108},[723],{"type":37,"value":111},{"type":32,"tag":81,"props":725,"children":726},{"style":108},[727],{"type":37,"value":116},{"type":32,"tag":81,"props":729,"children":730},{"style":108},[731],{"type":37,"value":121},{"type":32,"tag":81,"props":733,"children":734},{"style":124},[735],{"type":37,"value":736}," AddToCartButton",{"type":32,"tag":81,"props":738,"children":739},{"style":130},[740],{"type":37,"value":133},{"type":32,"tag":81,"props":742,"children":743},{"style":136},[744],{"type":37,"value":745},"productId",{"type":32,"tag":81,"props":747,"children":748},{"style":130},[749],{"type":37,"value":144},{"type":32,"tag":81,"props":751,"children":753},{"class":83,"line":752},31,[754,758,762,766,770,774,778,782,786,790,794],{"type":32,"tag":81,"props":755,"children":756},{"style":108},[757],{"type":37,"value":153},{"type":32,"tag":81,"props":759,"children":760},{"style":130},[761],{"type":37,"value":158},{"type":32,"tag":81,"props":763,"children":764},{"style":161},[765],{"type":37,"value":164},{"type":32,"tag":81,"props":767,"children":768},{"style":130},[769],{"type":37,"value":169},{"type":32,"tag":81,"props":771,"children":772},{"style":161},[773],{"type":37,"value":174},{"type":32,"tag":81,"props":775,"children":776},{"style":130},[777],{"type":37,"value":179},{"type":32,"tag":81,"props":779,"children":780},{"style":108},[781],{"type":37,"value":184},{"type":32,"tag":81,"props":783,"children":784},{"style":124},[785],{"type":37,"value":189},{"type":32,"tag":81,"props":787,"children":788},{"style":130},[789],{"type":37,"value":194},{"type":32,"tag":81,"props":791,"children":792},{"style":161},[793],{"type":37,"value":199},{"type":32,"tag":81,"props":795,"children":796},{"style":130},[797],{"type":37,"value":204},{"type":32,"tag":81,"props":799,"children":801},{"class":83,"line":800},32,[802,806,811,815,819,823,827,831,835,839,843,847,851],{"type":32,"tag":81,"props":803,"children":804},{"style":108},[805],{"type":37,"value":213},{"type":32,"tag":81,"props":807,"children":808},{"style":130},[809],{"type":37,"value":810}," \u003C",{"type":32,"tag":81,"props":812,"children":813},{"style":230},[814],{"type":37,"value":362},{"type":32,"tag":81,"props":816,"children":817},{"style":124},[818],{"type":37,"value":367},{"type":32,"tag":81,"props":820,"children":821},{"style":108},[822],{"type":37,"value":184},{"type":32,"tag":81,"props":824,"children":825},{"style":130},[826],{"type":37,"value":376},{"type":32,"tag":81,"props":828,"children":829},{"style":108},[830],{"type":37,"value":381},{"type":32,"tag":81,"props":832,"children":833},{"style":124},[834],{"type":37,"value":386},{"type":32,"tag":81,"props":836,"children":837},{"style":130},[838],{"type":37,"value":194},{"type":32,"tag":81,"props":840,"children":841},{"style":161},[842],{"type":37,"value":395},{"type":32,"tag":81,"props":844,"children":845},{"style":130},[846],{"type":37,"value":400},{"type":32,"tag":81,"props":848,"children":849},{"style":230},[850],{"type":37,"value":362},{"type":32,"tag":81,"props":852,"children":853},{"style":130},[854],{"type":37,"value":252},{"type":32,"tag":81,"props":856,"children":858},{"class":83,"line":857},33,[859],{"type":32,"tag":81,"props":860,"children":861},{"style":130},[862],{"type":37,"value":443},{"type":32,"tag":33,"props":864,"children":865},{},[866],{"type":37,"value":867},"Bei diesem Ansatz sendet die React-Server-Components-Runtime JavaScript nur für den Button. Bild, Titel und Preis kommen als HTML – außerhalb des Hydration-Scope. TBT sinkt um 71%, FCP fällt von 1840ms auf 680ms.",{"type":32,"tag":312,"props":869,"children":871},{"id":870},"nuxt-35-und-vues-neue-payload-strategie",[872],{"type":37,"value":873},"Nuxt 3.5+ und Vues neue Payload-Strategie",{"type":32,"tag":33,"props":875,"children":876},{},[877,879,885,887,893],{"type":37,"value":878},"Eine Änderung in Vue 3.5: Die Serialisierung von ",{"type":32,"tag":57,"props":880,"children":882},{"className":881},[],[883],{"type":37,"value":884},"reactive()",{"type":37,"value":886},"- und ",{"type":32,"tag":57,"props":888,"children":890},{"className":889},[],[891],{"type":37,"value":892},"ref()",{"type":37,"value":894},"-States ist aggressiver. Server-gerendertes HTML sendet kleine JSON-Payloads an den Client, die während der Hydration rekonstruiert werden. Ähnlich wie RSC-Streaming in Next.js, aber Vues Reactivity-System ist granularer.",{"type":32,"tag":33,"props":896,"children":897},{},[898,900,906],{"type":37,"value":899},"Mit ",{"type":32,"tag":57,"props":901,"children":903},{"className":902},[],[904],{"type":37,"value":905},"experimental.payloadExtraction",{"type":37,"value":907}," in Nuxt 3.12 wird für jede Route eine separate Payload-Datei erzeugt. Diese wird gzip-komprimiert vom CDN bereitgestellt. Durchschnittliche Payload: 40–60KB, Client-seitig geparst und in den Store injiziert. Hydration verkürzt sich um 45–50%.",{"type":32,"tag":71,"props":909,"children":913},{"className":910,"code":911,"language":912,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  experimental: {\n    payloadExtraction: true,\n    componentIslands: true\n  },\n  nitro: {\n    prerender: {\n      routes: ['\u002Fproducts', '\u002Fcategories']\n    }\n  }\n})\n","typescript",[914],{"type":32,"tag":57,"props":915,"children":916},{"__ignoreMap":16},[917,925,946,954,971,984,992,1000,1008,1035,1043,1051],{"type":32,"tag":81,"props":918,"children":919},{"class":83,"line":84},[920],{"type":32,"tag":81,"props":921,"children":922},{"style":88},[923],{"type":37,"value":924},"\u002F\u002F nuxt.config.ts\n",{"type":32,"tag":81,"props":926,"children":927},{"class":83,"line":94},[928,932,936,941],{"type":32,"tag":81,"props":929,"children":930},{"style":108},[931],{"type":37,"value":111},{"type":32,"tag":81,"props":933,"children":934},{"style":108},[935],{"type":37,"value":116},{"type":32,"tag":81,"props":937,"children":938},{"style":124},[939],{"type":37,"value":940}," defineNuxtConfig",{"type":32,"tag":81,"props":942,"children":943},{"style":130},[944],{"type":37,"value":945},"({\n",{"type":32,"tag":81,"props":947,"children":948},{"class":83,"line":104},[949],{"type":32,"tag":81,"props":950,"children":951},{"style":130},[952],{"type":37,"value":953},"  experimental: {\n",{"type":32,"tag":81,"props":955,"children":956},{"class":83,"line":147},[957,962,966],{"type":32,"tag":81,"props":958,"children":959},{"style":130},[960],{"type":37,"value":961},"    payloadExtraction: ",{"type":32,"tag":81,"props":963,"children":964},{"style":161},[965],{"type":37,"value":395},{"type":32,"tag":81,"props":967,"children":968},{"style":130},[969],{"type":37,"value":970},",\n",{"type":32,"tag":81,"props":972,"children":973},{"class":83,"line":207},[974,979],{"type":32,"tag":81,"props":975,"children":976},{"style":130},[977],{"type":37,"value":978},"    componentIslands: ",{"type":32,"tag":81,"props":980,"children":981},{"style":161},[982],{"type":37,"value":983},"true\n",{"type":32,"tag":81,"props":985,"children":986},{"class":83,"line":221},[987],{"type":32,"tag":81,"props":988,"children":989},{"style":130},[990],{"type":37,"value":991},"  },\n",{"type":32,"tag":81,"props":993,"children":994},{"class":83,"line":255},[995],{"type":32,"tag":81,"props":996,"children":997},{"style":130},[998],{"type":37,"value":999},"  nitro: {\n",{"type":32,"tag":81,"props":1001,"children":1002},{"class":83,"line":302},[1003],{"type":32,"tag":81,"props":1004,"children":1005},{"style":130},[1006],{"type":37,"value":1007},"    prerender: {\n",{"type":32,"tag":81,"props":1009,"children":1010},{"class":83,"line":26},[1011,1016,1021,1025,1030],{"type":32,"tag":81,"props":1012,"children":1013},{"style":130},[1014],{"type":37,"value":1015},"      routes: [",{"type":32,"tag":81,"props":1017,"children":1018},{"style":98},[1019],{"type":37,"value":1020},"'\u002Fproducts'",{"type":32,"tag":81,"props":1022,"children":1023},{"style":130},[1024],{"type":37,"value":169},{"type":32,"tag":81,"props":1026,"children":1027},{"style":98},[1028],{"type":37,"value":1029},"'\u002Fcategories'",{"type":32,"tag":81,"props":1031,"children":1032},{"style":130},[1033],{"type":37,"value":1034},"]\n",{"type":32,"tag":81,"props":1036,"children":1037},{"class":83,"line":352},[1038],{"type":32,"tag":81,"props":1039,"children":1040},{"style":130},[1041],{"type":37,"value":1042},"    }\n",{"type":32,"tag":81,"props":1044,"children":1045},{"class":83,"line":411},[1046],{"type":32,"tag":81,"props":1047,"children":1048},{"style":130},[1049],{"type":37,"value":1050},"  }\n",{"type":32,"tag":81,"props":1052,"children":1053},{"class":83,"line":428},[1054],{"type":32,"tag":81,"props":1055,"children":1056},{"style":130},[1057],{"type":37,"value":1058},"})\n",{"type":32,"tag":33,"props":1060,"children":1061},{},[1062,1068,1070,1076,1078,1084],{"type":32,"tag":57,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":37,"value":1067},"componentIslands",{"type":37,"value":1069}," ermöglicht Server- und Client-hydrated Components im gleichen Tree. Vergleichbar mit ",{"type":32,"tag":57,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":37,"value":1075},"Suspense",{"type":37,"value":1077},"-Boundaries in React – aber in Vue umhüllen Sie das mit ",{"type":32,"tag":57,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":37,"value":1083},"\u003CNuxtIsland>",{"type":37,"value":1085},". State innerhalb einer Island ist vom Global Store getrennt, wird nur bei Bedarf hydratisiert.",{"type":32,"tag":33,"props":1087,"children":1088},{},[1089,1091,1100],{"type":37,"value":1090},"Im ",{"type":32,"tag":1092,"props":1093,"children":1097},"a",{"href":1094,"rel":1095},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[1096],"nofollow",[1098],{"type":37,"value":1099},"Headless",{"type":37,"value":1101},"-Architektur-Pattern von Roibase funktioniert das so: Produktliste ist Server Component, Filter-UI ist Client Component. Bei Filteränderung wird nur der Query-Parameter aktualisiert, der Server gibt neues HTML zurück, die Island wird neu gemountet. Client-State bleibt nur im Filter-Dropdown, sickert nicht in Produktkarten. Bundle-Einsparung: 63%.",{"type":32,"tag":40,"props":1103,"children":1105},{"id":1104},"hydration-kosten-messen-chrome-devtools-profiler",[1106],{"type":37,"value":1107},"Hydration-Kosten messen: Chrome DevTools Profiler",{"type":32,"tag":33,"props":1109,"children":1110},{},[1111],{"type":37,"value":1112},"Theorie ist nicht genug – Sie benötigen echte Zahlen. Chrome DevTools → Performance → Profiling starten → Seite neu laden → Stoppen. Im Flame Chart das gelbe Block mit „Hydration\"-Label finden. Die Breite dieses Blocks zeigt die Hydration-Dauer an.",{"type":32,"tag":1114,"props":1115,"children":1116},"table",{},[1117,1146],{"type":32,"tag":1118,"props":1119,"children":1120},"thead",{},[1121],{"type":32,"tag":1122,"props":1123,"children":1124},"tr",{},[1125,1131,1136,1141],{"type":32,"tag":1126,"props":1127,"children":1128},"th",{},[1129],{"type":37,"value":1130},"Metrik",{"type":32,"tag":1126,"props":1132,"children":1133},{},[1134],{"type":37,"value":1135},"Vollständiger Client-Render",{"type":32,"tag":1126,"props":1137,"children":1138},{},[1139],{"type":37,"value":1140},"Selective Hydration",{"type":32,"tag":1126,"props":1142,"children":1143},{},[1144],{"type":37,"value":1145},"Nur Server (keine Hydration)",{"type":32,"tag":1147,"props":1148,"children":1149},"tbody",{},[1150,1174,1197,1219],{"type":32,"tag":1122,"props":1151,"children":1152},{},[1153,1159,1164,1169],{"type":32,"tag":1154,"props":1155,"children":1156},"td",{},[1157],{"type":37,"value":1158},"FCP",{"type":32,"tag":1154,"props":1160,"children":1161},{},[1162],{"type":37,"value":1163},"1840ms",{"type":32,"tag":1154,"props":1165,"children":1166},{},[1167],{"type":37,"value":1168},"680ms",{"type":32,"tag":1154,"props":1170,"children":1171},{},[1172],{"type":37,"value":1173},"420ms",{"type":32,"tag":1122,"props":1175,"children":1176},{},[1177,1182,1187,1192],{"type":32,"tag":1154,"props":1178,"children":1179},{},[1180],{"type":37,"value":1181},"LCP",{"type":32,"tag":1154,"props":1183,"children":1184},{},[1185],{"type":37,"value":1186},"2910ms",{"type":32,"tag":1154,"props":1188,"children":1189},{},[1190],{"type":37,"value":1191},"1350ms",{"type":32,"tag":1154,"props":1193,"children":1194},{},[1195],{"type":37,"value":1196},"890ms",{"type":32,"tag":1122,"props":1198,"children":1199},{},[1200,1205,1209,1214],{"type":32,"tag":1154,"props":1201,"children":1202},{},[1203],{"type":37,"value":1204},"TBT",{"type":32,"tag":1154,"props":1206,"children":1207},{},[1208],{"type":37,"value":1173},{"type":32,"tag":1154,"props":1210,"children":1211},{},[1212],{"type":37,"value":1213},"120ms",{"type":32,"tag":1154,"props":1215,"children":1216},{},[1217],{"type":37,"value":1218},"0ms",{"type":32,"tag":1122,"props":1220,"children":1221},{},[1222,1227,1232,1237],{"type":32,"tag":1154,"props":1223,"children":1224},{},[1225],{"type":37,"value":1226},"Initial JS",{"type":32,"tag":1154,"props":1228,"children":1229},{},[1230],{"type":37,"value":1231},"340KB",{"type":32,"tag":1154,"props":1233,"children":1234},{},[1235],{"type":37,"value":1236},"95KB",{"type":32,"tag":1154,"props":1238,"children":1239},{},[1240],{"type":37,"value":1241},"18KB",{"type":32,"tag":33,"props":1243,"children":1244},{},[1245],{"type":37,"value":1246},"Diese Tabelle stammt aus einem echten Shopify-Hydrogen-2.0-Projekt (Roibase Test-Repository, Februar 2026). Die Zeile „Nur Server\" ist reines statisches HTML + minimales Client-Script (außer Warenkorb und Checkout). „Selective Hydration\" behält nur interaktive Buttons als Client Components. „Vollständiger Client-Render\" ist der alte Next.js-13-Pages-Router-Ansatz.",{"type":32,"tag":33,"props":1248,"children":1249},{},[1250],{"type":37,"value":1251},"TBT von null klingt perfekt, hat aber Trade-offs: Der Server muss jede Request vollständig rendern. Bei Personalisierung (benutzerspezifische Preise, Lagerstatus) wird die Cache-Strategie komplex. Per-User-Cache an der Edge erhöht die CDN-Kosten. Die richtige Balance: Statische Inhalte vorrendern, dynamische Teile Client-seitig abrufen.",{"type":32,"tag":312,"props":1253,"children":1255},{"id":1254},"incremental-static-regeneration-isr-vs-on-demand-revalidation",[1256],{"type":37,"value":1257},"Incremental Static Regeneration (ISR) vs On-Demand Revalidation",{"type":32,"tag":33,"props":1259,"children":1260},{},[1261],{"type":37,"value":1262},"Next.js 14+ und Nuxt 3.10+ unterstützen beide. ISR: Seiten werden in regelmäßigen Abständen im Hintergrund neu gebaut. On-Demand Revalidation: Durch Webhook ausgelöst (z. B. bei Shopify-Produktupdate).",{"type":32,"tag":33,"props":1264,"children":1265},{},[1266],{"type":37,"value":1267},"ISR-Setup:",{"type":32,"tag":71,"props":1269,"children":1271},{"className":910,"code":1270,"language":912,"meta":16,"style":16},"\u002F\u002F Next.js app\u002Fproducts\u002F[slug]\u002Fpage.tsx\nexport const revalidate = 3600 \u002F\u002F 1 Stunde\n\nexport async function generateStaticParams() {\n  const products = await fetchAllProducts()\n  return products.map(p => ({ slug: p.slug }))\n}\n",[1272],{"type":32,"tag":57,"props":1273,"children":1274},{"__ignoreMap":16},[1275,1283,1315,1322,1348,1379,1414],{"type":32,"tag":81,"props":1276,"children":1277},{"class":83,"line":84},[1278],{"type":32,"tag":81,"props":1279,"children":1280},{"style":88},[1281],{"type":37,"value":1282},"\u002F\u002F Next.js app\u002Fproducts\u002F[slug]\u002Fpage.tsx\n",{"type":32,"tag":81,"props":1284,"children":1285},{"class":83,"line":94},[1286,1290,1295,1300,1305,1310],{"type":32,"tag":81,"props":1287,"children":1288},{"style":108},[1289],{"type":37,"value":111},{"type":32,"tag":81,"props":1291,"children":1292},{"style":108},[1293],{"type":37,"value":1294}," const",{"type":32,"tag":81,"props":1296,"children":1297},{"style":161},[1298],{"type":37,"value":1299}," revalidate",{"type":32,"tag":81,"props":1301,"children":1302},{"style":108},[1303],{"type":37,"value":1304}," =",{"type":32,"tag":81,"props":1306,"children":1307},{"style":161},[1308],{"type":37,"value":1309}," 3600",{"type":32,"tag":81,"props":1311,"children":1312},{"style":88},[1313],{"type":37,"value":1314}," \u002F\u002F 1 Stunde\n",{"type":32,"tag":81,"props":1316,"children":1317},{"class":83,"line":104},[1318],{"type":32,"tag":81,"props":1319,"children":1320},{"emptyLinePlaceholder":450},[1321],{"type":37,"value":453},{"type":32,"tag":81,"props":1323,"children":1324},{"class":83,"line":147},[1325,1329,1334,1338,1343],{"type":32,"tag":81,"props":1326,"children":1327},{"style":108},[1328],{"type":37,"value":111},{"type":32,"tag":81,"props":1330,"children":1331},{"style":108},[1332],{"type":37,"value":1333}," async",{"type":32,"tag":81,"props":1335,"children":1336},{"style":108},[1337],{"type":37,"value":121},{"type":32,"tag":81,"props":1339,"children":1340},{"style":124},[1341],{"type":37,"value":1342}," generateStaticParams",{"type":32,"tag":81,"props":1344,"children":1345},{"style":130},[1346],{"type":37,"value":1347},"() {\n",{"type":32,"tag":81,"props":1349,"children":1350},{"class":83,"line":207},[1351,1355,1360,1364,1369,1374],{"type":32,"tag":81,"props":1352,"children":1353},{"style":108},[1354],{"type":37,"value":153},{"type":32,"tag":81,"props":1356,"children":1357},{"style":161},[1358],{"type":37,"value":1359}," products",{"type":32,"tag":81,"props":1361,"children":1362},{"style":108},[1363],{"type":37,"value":1304},{"type":32,"tag":81,"props":1365,"children":1366},{"style":108},[1367],{"type":37,"value":1368}," await",{"type":32,"tag":81,"props":1370,"children":1371},{"style":124},[1372],{"type":37,"value":1373}," fetchAllProducts",{"type":32,"tag":81,"props":1375,"children":1376},{"style":130},[1377],{"type":37,"value":1378},"()\n",{"type":32,"tag":81,"props":1380,"children":1381},{"class":83,"line":221},[1382,1386,1391,1396,1400,1404,1409],{"type":32,"tag":81,"props":1383,"children":1384},{"style":108},[1385],{"type":37,"value":213},{"type":32,"tag":81,"props":1387,"children":1388},{"style":130},[1389],{"type":37,"value":1390}," products.",{"type":32,"tag":81,"props":1392,"children":1393},{"style":124},[1394],{"type":37,"value":1395},"map",{"type":32,"tag":81,"props":1397,"children":1398},{"style":130},[1399],{"type":37,"value":194},{"type":32,"tag":81,"props":1401,"children":1402},{"style":136},[1403],{"type":37,"value":33},{"type":32,"tag":81,"props":1405,"children":1406},{"style":108},[1407],{"type":37,"value":1408}," =>",{"type":32,"tag":81,"props":1410,"children":1411},{"style":130},[1412],{"type":37,"value":1413}," ({ slug: p.slug }))\n",{"type":32,"tag":81,"props":1415,"children":1416},{"class":83,"line":255},[1417],{"type":32,"tag":81,"props":1418,"children":1419},{"style":130},[1420],{"type":37,"value":443},{"type":32,"tag":33,"props":1422,"children":1423},{},[1424],{"type":37,"value":1425},"Bei diesem Ansatz wird die Produktseite auf dem Server gerendert und 1 Stunde lang aus dem Cache bereitgestellt. Keine Hydration, minimales JavaScript. LCP 420ms, TBT 0ms. Trade-off: Lagerstatus kann bis zu 1 Stunde veraltet sein. Im E-Commerce riskant.",{"type":32,"tag":33,"props":1427,"children":1428},{},[1429],{"type":37,"value":1430},"On-Demand Revalidation:",{"type":32,"tag":71,"props":1432,"children":1434},{"className":910,"code":1433,"language":912,"meta":16,"style":16},"\u002F\u002F app\u002Fapi\u002Frevalidate\u002Froute.ts\nimport { revalidatePath } from 'next\u002Fcache'\n\nexport async function POST(request: Request) {\n  const { slug } = await request.json()\n  revalidatePath(`\u002Fproducts\u002F${slug}`)\n  return Response.json({ revalidated: true })\n}\n",[1435],{"type":32,"tag":57,"props":1436,"children":1437},{"__ignoreMap":16},[1438,1446,1469,1476,1520,1564,1594,1624],{"type":32,"tag":81,"props":1439,"children":1440},{"class":83,"line":84},[1441],{"type":32,"tag":81,"props":1442,"children":1443},{"style":88},[1444],{"type":37,"value":1445},"\u002F\u002F app\u002Fapi\u002Frevalidate\u002Froute.ts\n",{"type":32,"tag":81,"props":1447,"children":1448},{"class":83,"line":94},[1449,1454,1459,1464],{"type":32,"tag":81,"props":1450,"children":1451},{"style":108},[1452],{"type":37,"value":1453},"import",{"type":32,"tag":81,"props":1455,"children":1456},{"style":130},[1457],{"type":37,"value":1458}," { revalidatePath } ",{"type":32,"tag":81,"props":1460,"children":1461},{"style":108},[1462],{"type":37,"value":1463},"from",{"type":32,"tag":81,"props":1465,"children":1466},{"style":98},[1467],{"type":37,"value":1468}," 'next\u002Fcache'\n",{"type":32,"tag":81,"props":1470,"children":1471},{"class":83,"line":104},[1472],{"type":32,"tag":81,"props":1473,"children":1474},{"emptyLinePlaceholder":450},[1475],{"type":37,"value":453},{"type":32,"tag":81,"props":1477,"children":1478},{"class":83,"line":147},[1479,1483,1487,1491,1496,1500,1505,1510,1515],{"type":32,"tag":81,"props":1480,"children":1481},{"style":108},[1482],{"type":37,"value":111},{"type":32,"tag":81,"props":1484,"children":1485},{"style":108},[1486],{"type":37,"value":1333},{"type":32,"tag":81,"props":1488,"children":1489},{"style":108},[1490],{"type":37,"value":121},{"type":32,"tag":81,"props":1492,"children":1493},{"style":124},[1494],{"type":37,"value":1495}," POST",{"type":32,"tag":81,"props":1497,"children":1498},{"style":130},[1499],{"type":37,"value":194},{"type":32,"tag":81,"props":1501,"children":1502},{"style":136},[1503],{"type":37,"value":1504},"request",{"type":32,"tag":81,"props":1506,"children":1507},{"style":108},[1508],{"type":37,"value":1509},":",{"type":32,"tag":81,"props":1511,"children":1512},{"style":124},[1513],{"type":37,"value":1514}," Request",{"type":32,"tag":81,"props":1516,"children":1517},{"style":130},[1518],{"type":37,"value":1519},") {\n",{"type":32,"tag":81,"props":1521,"children":1522},{"class":83,"line":207},[1523,1527,1532,1537,1542,1546,1550,1555,1560],{"type":32,"tag":81,"props":1524,"children":1525},{"style":108},[1526],{"type":37,"value":153},{"type":32,"tag":81,"props":1528,"children":1529},{"style":130},[1530],{"type":37,"value":1531}," { ",{"type":32,"tag":81,"props":1533,"children":1534},{"style":161},[1535],{"type":37,"value":1536},"slug",{"type":32,"tag":81,"props":1538,"children":1539},{"style":130},[1540],{"type":37,"value":1541}," } ",{"type":32,"tag":81,"props":1543,"children":1544},{"style":108},[1545],{"type":37,"value":184},{"type":32,"tag":81,"props":1547,"children":1548},{"style":108},[1549],{"type":37,"value":1368},{"type":32,"tag":81,"props":1551,"children":1552},{"style":130},[1553],{"type":37,"value":1554}," request.",{"type":32,"tag":81,"props":1556,"children":1557},{"style":124},[1558],{"type":37,"value":1559},"json",{"type":32,"tag":81,"props":1561,"children":1562},{"style":130},[1563],{"type":37,"value":1378},{"type":32,"tag":81,"props":1565,"children":1566},{"class":83,"line":221},[1567,1572,1576,1581,1585,1590],{"type":32,"tag":81,"props":1568,"children":1569},{"style":124},[1570],{"type":37,"value":1571},"  revalidatePath",{"type":32,"tag":81,"props":1573,"children":1574},{"style":130},[1575],{"type":37,"value":194},{"type":32,"tag":81,"props":1577,"children":1578},{"style":98},[1579],{"type":37,"value":1580},"`\u002Fproducts\u002F${",{"type":32,"tag":81,"props":1582,"children":1583},{"style":130},[1584],{"type":37,"value":1536},{"type":32,"tag":81,"props":1586,"children":1587},{"style":98},[1588],{"type":37,"value":1589},"}`",{"type":32,"tag":81,"props":1591,"children":1592},{"style":130},[1593],{"type":37,"value":204},{"type":32,"tag":81,"props":1595,"children":1596},{"class":83,"line":255},[1597,1601,1606,1610,1615,1619],{"type":32,"tag":81,"props":1598,"children":1599},{"style":108},[1600],{"type":37,"value":213},{"type":32,"tag":81,"props":1602,"children":1603},{"style":130},[1604],{"type":37,"value":1605}," Response.",{"type":32,"tag":81,"props":1607,"children":1608},{"style":124},[1609],{"type":37,"value":1559},{"type":32,"tag":81,"props":1611,"children":1612},{"style":130},[1613],{"type":37,"value":1614},"({ revalidated: ",{"type":32,"tag":81,"props":1616,"children":1617},{"style":161},[1618],{"type":37,"value":395},{"type":32,"tag":81,"props":1620,"children":1621},{"style":130},[1622],{"type":37,"value":1623}," })\n",{"type":32,"tag":81,"props":1625,"children":1626},{"class":83,"line":302},[1627],{"type":32,"tag":81,"props":1628,"children":1629},{"style":130},[1630],{"type":37,"value":443},{"type":32,"tag":33,"props":1632,"children":1633},{},[1634],{"type":37,"value":1635},"Der Shopify-Webhook sendet eine Anfrage an diesen Endpoint, Next.js baut die Seite sofort neu. Lagerstatus-Update wird in 2–5 Sekunden reflektiert. Noch immer keine Hydration, TBT 0ms. Optimales Szenario.",{"type":32,"tag":40,"props":1637,"children":1639},{"id":1638},"wann-client-components-unvermeidlich-sind",[1640],{"type":37,"value":1641},"Wann Client Components unvermeidlich sind",{"type":32,"tag":33,"props":1643,"children":1644},{},[1645],{"type":37,"value":1646},"Nicht alles kann auf dem Server geschehen. Diese Fälle zwingen zu Client Components:",{"type":32,"tag":1648,"props":1649,"children":1650},"ol",{},[1651,1663,1673,1683,1693],{"type":32,"tag":1652,"props":1653,"children":1654},"li",{},[1655,1661],{"type":32,"tag":1656,"props":1657,"children":1658},"strong",{},[1659],{"type":37,"value":1660},"Formularvalidierung",{"type":37,"value":1662}," – Echtzeit-Feedback, Fehlermeldung bei jedem Tastendruck",{"type":32,"tag":1652,"props":1664,"children":1665},{},[1666,1671],{"type":32,"tag":1656,"props":1667,"children":1668},{},[1669],{"type":37,"value":1670},"Unendliches Scrollen",{"type":37,"value":1672}," – Intersection Observer API läuft Client-seitig",{"type":32,"tag":1652,"props":1674,"children":1675},{},[1676,1681],{"type":32,"tag":1656,"props":1677,"children":1678},{},[1679],{"type":37,"value":1680},"Warenkorbzustand",{"type":37,"value":1682}," – Session Storage oder Zustand Global Store erforderlich",{"type":32,"tag":1652,"props":1684,"children":1685},{},[1686,1691],{"type":32,"tag":1656,"props":1687,"children":1688},{},[1689],{"type":37,"value":1690},"A\u002FB-Test-Rendering",{"type":37,"value":1692}," – Cookie auslesen und unterschiedliche UI rendern",{"type":32,"tag":1652,"props":1694,"children":1695},{},[1696,1701],{"type":32,"tag":1656,"props":1697,"children":1698},{},[1699],{"type":37,"value":1700},"Third-Party-Widgets",{"type":37,"value":1702}," – z. B. Klaviyo-Email-Popup, Client-seitiges Script",{"type":32,"tag":33,"props":1704,"children":1705},{},[1706,1708,1714,1716,1722],{"type":37,"value":1707},"In diesen Fällen ist selective Hydration Pflicht. In React die ",{"type":32,"tag":57,"props":1709,"children":1711},{"className":1710},[],[1712],{"type":37,"value":1713},"use client",{"type":37,"value":1715},"-Direktive, in Vue der ",{"type":32,"tag":57,"props":1717,"children":1719},{"className":1718},[],[1720],{"type":37,"value":1721},"\u003CClientOnly>",{"type":37,"value":1723},"-Wrapper. Aber Vorsicht: Wenn diese Components tief in der Hierarchie liegen, werden Parent-Components ebenfalls Client Components. Das heißt „Client Boundary Leakage\".",{"type":32,"tag":71,"props":1725,"children":1727},{"className":73,"code":1726,"language":75,"meta":16,"style":16},"\u002F\u002F ❌ Falsch: Gesamtes Layout wird Client\n'use client'\nexport default function Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CHeader \u002F>\n      {children}\n      \u003CNewsletterPopup \u002F> {\u002F* Deshalb 'use client' *\u002F}\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F ✅ Richtig: Nur Popup ist Client\nexport default function Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CHeader \u002F>\n      {children}\n      \u003CNewsletterPopup \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F NewsletterPopup.tsx\n'use client'\nexport default function NewsletterPopup() {\n  \u002F\u002F Klaviyo-Script hier\n}\n",[1728],{"type":32,"tag":57,"props":1729,"children":1730},{"__ignoreMap":16},[1731,1739,1746,1779,1790,1805,1821,1829,1855,1870,1877,1884,1891,1899,1930,1941,1956,1971,1978,1993,2008,2015,2022,2029,2037,2044,2068,2076],{"type":32,"tag":81,"props":1732,"children":1733},{"class":83,"line":84},[1734],{"type":32,"tag":81,"props":1735,"children":1736},{"style":88},[1737],{"type":37,"value":1738},"\u002F\u002F ❌ Falsch: Gesamtes Layout wird Client\n",{"type":32,"tag":81,"props":1740,"children":1741},{"class":83,"line":94},[1742],{"type":32,"tag":81,"props":1743,"children":1744},{"style":98},[1745],{"type":37,"value":101},{"type":32,"tag":81,"props":1747,"children":1748},{"class":83,"line":104},[1749,1753,1757,1761,1766,1770,1775],{"type":32,"tag":81,"props":1750,"children":1751},{"style":108},[1752],{"type":37,"value":111},{"type":32,"tag":81,"props":1754,"children":1755},{"style":108},[1756],{"type":37,"value":116},{"type":32,"tag":81,"props":1758,"children":1759},{"style":108},[1760],{"type":37,"value":121},{"type":32,"tag":81,"props":1762,"children":1763},{"style":124},[1764],{"type":37,"value":1765}," Layout",{"type":32,"tag":81,"props":1767,"children":1768},{"style":130},[1769],{"type":37,"value":133},{"type":32,"tag":81,"props":1771,"children":1772},{"style":136},[1773],{"type":37,"value":1774},"children",{"type":32,"tag":81,"props":1776,"children":1777},{"style":130},[1778],{"type":37,"value":144},{"type":32,"tag":81,"props":1780,"children":1781},{"class":83,"line":147},[1782,1786],{"type":32,"tag":81,"props":1783,"children":1784},{"style":108},[1785],{"type":37,"value":213},{"type":32,"tag":81,"props":1787,"children":1788},{"style":130},[1789],{"type":37,"value":218},{"type":32,"tag":81,"props":1791,"children":1792},{"class":83,"line":207},[1793,1797,1801],{"type":32,"tag":81,"props":1794,"children":1795},{"style":130},[1796],{"type":37,"value":227},{"type":32,"tag":81,"props":1798,"children":1799},{"style":230},[1800],{"type":37,"value":233},{"type":32,"tag":81,"props":1802,"children":1803},{"style":130},[1804],{"type":37,"value":252},{"type":32,"tag":81,"props":1806,"children":1807},{"class":83,"line":221},[1808,1812,1817],{"type":32,"tag":81,"props":1809,"children":1810},{"style":130},[1811],{"type":37,"value":261},{"type":32,"tag":81,"props":1813,"children":1814},{"style":161},[1815],{"type":37,"value":1816},"Header",{"type":32,"tag":81,"props":1818,"children":1819},{"style":130},[1820],{"type":37,"value":299},{"type":32,"tag":81,"props":1822,"children":1823},{"class":83,"line":255},[1824],{"type":32,"tag":81,"props":1825,"children":1826},{"style":130},[1827],{"type":37,"value":1828},"      {children}\n",{"type":32,"tag":81,"props":1830,"children":1831},{"class":83,"line":302},[1832,1836,1841,1846,1851],{"type":32,"tag":81,"props":1833,"children":1834},{"style":130},[1835],{"type":37,"value":261},{"type":32,"tag":81,"props":1837,"children":1838},{"style":161},[1839],{"type":37,"value":1840},"NewsletterPopup",{"type":32,"tag":81,"props":1842,"children":1843},{"style":130},[1844],{"type":37,"value":1845}," \u002F> {",{"type":32,"tag":81,"props":1847,"children":1848},{"style":88},[1849],{"type":37,"value":1850},"\u002F* Deshalb 'use client' *\u002F",{"type":32,"tag":81,"props":1852,"children":1853},{"style":130},[1854],{"type":37,"value":443},{"type":32,"tag":81,"props":1856,"children":1857},{"class":83,"line":26},[1858,1862,1866],{"type":32,"tag":81,"props":1859,"children":1860},{"style":130},[1861],{"type":37,"value":417},{"type":32,"tag":81,"props":1863,"children":1864},{"style":230},[1865],{"type":37,"value":233},{"type":32,"tag":81,"props":1867,"children":1868},{"style":130},[1869],{"type":37,"value":252},{"type":32,"tag":81,"props":1871,"children":1872},{"class":83,"line":352},[1873],{"type":32,"tag":81,"props":1874,"children":1875},{"style":130},[1876],{"type":37,"value":434},{"type":32,"tag":81,"props":1878,"children":1879},{"class":83,"line":411},[1880],{"type":32,"tag":81,"props":1881,"children":1882},{"style":130},[1883],{"type":37,"value":443},{"type":32,"tag":81,"props":1885,"children":1886},{"class":83,"line":428},[1887],{"type":32,"tag":81,"props":1888,"children":1889},{"emptyLinePlaceholder":450},[1890],{"type":37,"value":453},{"type":32,"tag":81,"props":1892,"children":1893},{"class":83,"line":437},[1894],{"type":32,"tag":81,"props":1895,"children":1896},{"style":88},[1897],{"type":37,"value":1898},"\u002F\u002F ✅ Richtig: Nur Popup ist Client\n",{"type":32,"tag":81,"props":1900,"children":1901},{"class":83,"line":446},[1902,1906,1910,1914,1918,1922,1926],{"type":32,"tag":81,"props":1903,"children":1904},{"style":108},[1905],{"type":37,"value":111},{"type":32,"tag":81,"props":1907,"children":1908},{"style":108},[1909],{"type":37,"value":116},{"type":32,"tag":81,"props":1911,"children":1912},{"style":108},[1913],{"type":37,"value":121},{"type":32,"tag":81,"props":1915,"children":1916},{"style":124},[1917],{"type":37,"value":1765},{"type":32,"tag":81,"props":1919,"children":1920},{"style":130},[1921],{"type":37,"value":133},{"type":32,"tag":81,"props":1923,"children":1924},{"style":136},[1925],{"type":37,"value":1774},{"type":32,"tag":81,"props":1927,"children":1928},{"style":130},[1929],{"type":37,"value":144},{"type":32,"tag":81,"props":1931,"children":1932},{"class":83,"line":456},[1933,1937],{"type":32,"tag":81,"props":1934,"children":1935},{"style":108},[1936],{"type":37,"value":213},{"type":32,"tag":81,"props":1938,"children":1939},{"style":130},[1940],{"type":37,"value":218},{"type":32,"tag":81,"props":1942,"children":1943},{"class":83,"line":465},[1944,1948,1952],{"type":32,"tag":81,"props":1945,"children":1946},{"style":130},[1947],{"type":37,"value":227},{"type":32,"tag":81,"props":1949,"children":1950},{"style":230},[1951],{"type":37,"value":233},{"type":32,"tag":81,"props":1953,"children":1954},{"style":130},[1955],{"type":37,"value":252},{"type":32,"tag":81,"props":1957,"children":1958},{"class":83,"line":474},[1959,1963,1967],{"type":32,"tag":81,"props":1960,"children":1961},{"style":130},[1962],{"type":37,"value":261},{"type":32,"tag":81,"props":1964,"children":1965},{"style":161},[1966],{"type":37,"value":1816},{"type":32,"tag":81,"props":1968,"children":1969},{"style":130},[1970],{"type":37,"value":299},{"type":32,"tag":81,"props":1972,"children":1973},{"class":83,"line":506},[1974],{"type":32,"tag":81,"props":1975,"children":1976},{"style":130},[1977],{"type":37,"value":1828},{"type":32,"tag":81,"props":1979,"children":1980},{"class":83,"line":518},[1981,1985,1989],{"type":32,"tag":81,"props":1982,"children":1983},{"style":130},[1984],{"type":37,"value":261},{"type":32,"tag":81,"props":1986,"children":1987},{"style":161},[1988],{"type":37,"value":1840},{"type":32,"tag":81,"props":1990,"children":1991},{"style":130},[1992],{"type":37,"value":299},{"type":32,"tag":81,"props":1994,"children":1995},{"class":83,"line":546},[1996,2000,2004],{"type":32,"tag":81,"props":1997,"children":1998},{"style":130},[1999],{"type":37,"value":417},{"type":32,"tag":81,"props":2001,"children":2002},{"style":230},[2003],{"type":37,"value":233},{"type":32,"tag":81,"props":2005,"children":2006},{"style":130},[2007],{"type":37,"value":252},{"type":32,"tag":81,"props":2009,"children":2010},{"class":83,"line":586},[2011],{"type":32,"tag":81,"props":2012,"children":2013},{"style":130},[2014],{"type":37,"value":434},{"type":32,"tag":81,"props":2016,"children":2017},{"class":83,"line":610},[2018],{"type":32,"tag":81,"props":2019,"children":2020},{"style":130},[2021],{"type":37,"value":443},{"type":32,"tag":81,"props":2023,"children":2024},{"class":83,"line":634},[2025],{"type":32,"tag":81,"props":2026,"children":2027},{"emptyLinePlaceholder":450},[2028],{"type":37,"value":453},{"type":32,"tag":81,"props":2030,"children":2031},{"class":83,"line":661},[2032],{"type":32,"tag":81,"props":2033,"children":2034},{"style":88},[2035],{"type":37,"value":2036},"\u002F\u002F NewsletterPopup.tsx\n",{"type":32,"tag":81,"props":2038,"children":2039},{"class":83,"line":677},[2040],{"type":32,"tag":81,"props":2041,"children":2042},{"style":98},[2043],{"type":37,"value":101},{"type":32,"tag":81,"props":2045,"children":2046},{"class":83,"line":685},[2047,2051,2055,2059,2064],{"type":32,"tag":81,"props":2048,"children":2049},{"style":108},[2050],{"type":37,"value":111},{"type":32,"tag":81,"props":2052,"children":2053},{"style":108},[2054],{"type":37,"value":116},{"type":32,"tag":81,"props":2056,"children":2057},{"style":108},[2058],{"type":37,"value":121},{"type":32,"tag":81,"props":2060,"children":2061},{"style":124},[2062],{"type":37,"value":2063}," NewsletterPopup",{"type":32,"tag":81,"props":2065,"children":2066},{"style":130},[2067],{"type":37,"value":1347},{"type":32,"tag":81,"props":2069,"children":2070},{"class":83,"line":693},[2071],{"type":32,"tag":81,"props":2072,"children":2073},{"style":88},[2074],{"type":37,"value":2075},"  \u002F\u002F Klaviyo-Script hier\n",{"type":32,"tag":81,"props":2077,"children":2078},{"class":83,"line":701},[2079],{"type":32,"tag":81,"props":2080,"children":2081},{"style":130},[2082],{"type":37,"value":443},{"type":32,"tag":33,"props":2084,"children":2085},{},[2086,2088,2094,2096,2101],{"type":37,"value":2087},"Im zweiten Beispiel bleibt ",{"type":32,"tag":57,"props":2089,"children":2091},{"className":2090},[],[2092],{"type":37,"value":2093},"Layout",{"type":37,"value":2095}," eine Server Component, nur ",{"type":32,"tag":57,"props":2097,"children":2099},{"className":2098},[],[2100],{"type":37,"value":1840},{"type":37,"value":2102}," wird hydratisiert. Bundle-Size-Unterschied: 280KB → 45KB.",{"type":32,"tag":40,"props":2104,"children":2106},{"id":2105},"edge-rendering-und-geolocation-basierte-personalisierung",[2107],{"type":37,"value":2108},"Edge-Rendering und geolocation-basierte Personalisierung",{"type":32,"tag":33,"props":2110,"children":2111},{},[2112],{"type":37,"value":2113},"2026 sind Cloudflare Workers, Vercel Edge Functions und Netlify Edge etabliert. Diese Plattformen laufen auf V8 Isolates, Cold Start \u003C5ms. Server Components an der Edge zu rendern ist schnell und günstig. Aber es gibt Grenzen: Datenbankabfragen und externe API-Aufrufe verlangsamen.",{"type":32,"tag":33,"props":2115,"children":2116},{},[2117],{"type":37,"value":2118},"Beispiel: Preis basierend auf Benutzerland anzeigen. Wenn der Preis aus der Datenbank kommt, kostet der Round-Trip von Edge zu Origin 80–120ms. Zwei Strategien:",{"type":32,"tag":1648,"props":2120,"children":2121},{},[2122,2132],{"type":32,"tag":1652,"props":2123,"children":2124},{},[2125,2130],{"type":32,"tag":1656,"props":2126,"children":2127},{},[2128],{"type":37,"value":2129},"Preise in Edge KV-Store halten",{"type":37,"value":2131}," – Ideal für Read-Heavy-Daten, Write ist selten (1–2 Preisupdate täglich)",{"type":32,"tag":1652,"props":2133,"children":2134},{},[2135,2140],{"type":32,"tag":1656,"props":2136,"children":2137},{},[2138],{"type":37,"value":2139},"Preis-Component Client-seitig abrufen",{"type":37,"value":2141}," – Initiales HTML zeigt allgemeinen Preis, JavaScript lädt echten Preis nach",{"type":32,"tag":33,"props":2143,"children":2144},{},[2145],{"type":37,"value":2146},"Die zweite Methode ist einfacher, aber CLS (Cumulative Layout Shift) ist ein Risiko. Platzieren Sie einen 120px-Platzhalter für den Preis, zeigen Sie einen Skeleton Loader und ersetzen Sie ihn, wenn der Abruf abgeschlossen ist.",{"type":32,"tag":71,"props":2148,"children":2150},{"className":910,"code":2149,"language":912,"meta":16,"style":16},"\u002F\u002F Cloudflare Workers + Nuxt 3.12\nexport default defineEventHandler(async (event) => {\n  const country = event.node.req.headers['cf-ipcountry']\n  const prices = await env.PRICES_KV.get(country, { type: 'json' })\n  return { prices }\n})\n",[2151],{"type":32,"tag":57,"props":2152,"children":2153},{"__ignoreMap":16},[2154,2162,2211,2241,2295,2307],{"type":32,"tag":81,"props":2155,"children":2156},{"class":83,"line":84},[2157],{"type":32,"tag":81,"props":2158,"children":2159},{"style":88},[2160],{"type":37,"value":2161},"\u002F\u002F Cloudflare Workers + Nuxt 3.12\n",{"type":32,"tag":81,"props":2163,"children":2164},{"class":83,"line":94},[2165,2169,2173,2178,2182,2187,2192,2197,2202,2206],{"type":32,"tag":81,"props":2166,"children":2167},{"style":108},[2168],{"type":37,"value":111},{"type":32,"tag":81,"props":2170,"children":2171},{"style":108},[2172],{"type":37,"value":116},{"type":32,"tag":81,"props":2174,"children":2175},{"style":124},[2176],{"type":37,"value":2177}," defineEventHandler",{"type":32,"tag":81,"props":2179,"children":2180},{"style":130},[2181],{"type":37,"value":194},{"type":32,"tag":81,"props":2183,"children":2184},{"style":108},[2185],{"type":37,"value":2186},"async",{"type":32,"tag":81,"props":2188,"children":2189},{"style":130},[2190],{"type":37,"value":2191}," (",{"type":32,"tag":81,"props":2193,"children":2194},{"style":136},[2195],{"type":37,"value":2196},"event",{"type":32,"tag":81,"props":2198,"children":2199},{"style":130},[2200],{"type":37,"value":2201},") ",{"type":32,"tag":81,"props":2203,"children":2204},{"style":108},[2205],{"type":37,"value":381},{"type":32,"tag":81,"props":2207,"children":2208},{"style":130},[2209],{"type":37,"value":2210}," {\n",{"type":32,"tag":81,"props":2212,"children":2213},{"class":83,"line":104},[2214,2218,2223,2227,2232,2237],{"type":32,"tag":81,"props":2215,"children":2216},{"style":108},[2217],{"type":37,"value":153},{"type":32,"tag":81,"props":2219,"children":2220},{"style":161},[2221],{"type":37,"value":2222}," country",{"type":32,"tag":81,"props":2224,"children":2225},{"style":108},[2226],{"type":37,"value":1304},{"type":32,"tag":81,"props":2228,"children":2229},{"style":130},[2230],{"type":37,"value":2231}," event.node.req.headers[",{"type":32,"tag":81,"props":2233,"children":2234},{"style":98},[2235],{"type":37,"value":2236},"'cf-ipcountry'",{"type":32,"tag":81,"props":2238,"children":2239},{"style":130},[2240],{"type":37,"value":1034},{"type":32,"tag":81,"props":2242,"children":2243},{"class":83,"line":147},[2244,2248,2253,2257,2261,2266,2271,2276,2281,2286,2291],{"type":32,"tag":81,"props":2245,"children":2246},{"style":108},[2247],{"type":37,"value":153},{"type":32,"tag":81,"props":2249,"children":2250},{"style":161},[2251],{"type":37,"value":2252}," prices",{"type":32,"tag":81,"props":2254,"children":2255},{"style":108},[2256],{"type":37,"value":1304},{"type":32,"tag":81,"props":2258,"children":2259},{"style":108},[2260],{"type":37,"value":1368},{"type":32,"tag":81,"props":2262,"children":2263},{"style":130},[2264],{"type":37,"value":2265}," env.",{"type":32,"tag":81,"props":2267,"children":2268},{"style":161},[2269],{"type":37,"value":2270},"PRICES_KV",{"type":32,"tag":81,"props":2272,"children":2273},{"style":130},[2274],{"type":37,"value":2275},".",{"type":32,"tag":81,"props":2277,"children":2278},{"style":124},[2279],{"type":37,"value":2280},"get",{"type":32,"tag":81,"props":2282,"children":2283},{"style":130},[2284],{"type":37,"value":2285},"(country, { type: ",{"type":32,"tag":81,"props":2287,"children":2288},{"style":98},[2289],{"type":37,"value":2290},"'json'",{"type":32,"tag":81,"props":2292,"children":2293},{"style":130},[2294],{"type":37,"value":1623},{"type":32,"tag":81,"props":2296,"children":2297},{"class":83,"line":207},[2298,2302],{"type":32,"tag":81,"props":2299,"children":2300},{"style":108},[2301],{"type":37,"value":213},{"type":32,"tag":81,"props":2303,"children":2304},{"style":130},[2305],{"type":37,"value":2306}," { prices }\n",{"type":32,"tag":81,"props":2308,"children":2309},{"class":83,"line":221},[2310],{"type":32,"tag":81,"props":2311,"children":2312},{"style":130},[2313],{"type":37,"value":1058},{"type":32,"tag":33,"props":2315,"children":2316},{},[2317],{"type":37,"value":2318},"Cloudflare KV Read Latency liegt durchschnittlich bei 30ms. Preis wird zurückgegeben, ohne Origin Database zu treffen. Mit diesem Ansatz kann die Produktseite vollständig Server Component sein, keine Hydration, TBT 0ms.",{"type":32,"tag":40,"props":2320,"children":2322},{"id":2321},"trade-off-matrix-wann-welches-pattern",[2323],{"type":37,"value":2324},"Trade-off-Matrix: Wann welches Pattern",{"type":32,"tag":1114,"props":2326,"children":2327},{},[2328,2358],{"type":32,"tag":1118,"props":2329,"children":2330},{},[2331],{"type":32,"tag":1122,"props":2332,"children":2333},{},[2334,2339,2344,2349,2353],{"type":32,"tag":1126,"props":2335,"children":2336},{},[2337],{"type":37,"value":2338},"Szenario",{"type":32,"tag":1126,"props":2340,"children":2341},{},[2342],{"type":37,"value":2343},"Empfohlenes Pattern",{"type":32,"tag":1126,"props":2345,"children":2346},{},[2347],{"type":37,"value":2348},"Bundle",{"type":32,"tag":1126,"props":2350,"children":2351},{},[2352],{"type":37,"value":1204},{"type":32,"tag":1126,"props":2354,"children":2355},{},[2356],{"type":37,"value":2357},"Trade-off",{"type":32,"tag":1147,"props":2359,"children":2360},{},[2361,2387,2412,2437,2465],{"type":32,"tag":1122,"props":2362,"children":2363},{},[2364,2369,2374,2378,2382],{"type":32,"tag":1154,"props":2365,"children":2366},{},[2367],{"type":37,"value":2368},"Statischer Blog, Dokumentation",{"type":32,"tag":1154,"props":2370,"children":2371},{},[2372],{"type":37,"value":2373},"Nur Server",{"type":32,"tag":1154,"props":2375,"children":2376},{},[2377],{"type":37,"value":1241},{"type":32,"tag":1154,"props":2379,"children":2380},{},[2381],{"type":37,"value":1218},{"type":32,"tag":1154,"props":2383,"children":2384},{},[2385],{"type":37,"value":2386},"Keine interaktiven Elemente",{"type":32,"tag":1122,"props":2388,"children":2389},{},[2390,2395,2399,2403,2407],{"type":32,"tag":1154,"props":2391,"children":2392},{},[2393],{"type":37,"value":2394},"E-Commerce-Produktliste",{"type":32,"tag":1154,"props":2396,"children":2397},{},[2398],{"type":37,"value":1140},{"type":32,"tag":1154,"props":2400,"children":2401},{},[2402],{"type":37,"value":1236},{"type":32,"tag":1154,"props":2404,"children":2405},{},[2406],{"type":37,"value":1213},{"type":32,"tag":1154,"props":2408,"children":2409},{},[2410],{"type":37,"value":2411},"Nur Buttons hydratisiert",{"type":32,"tag":1122,"props":2413,"children":2414},{},[2415,2420,2424,2428,2432],{"type":32,"tag":1154,"props":2416,"children":2417},{},[2418],{"type":37,"value":2419},"Dashboard, Admin-Panel",{"type":32,"tag":1154,"props":2421,"children":2422},{},[2423],{"type":37,"value":1135},{"type":32,"tag":1154,"props":2425,"children":2426},{},[2427],{"type":37,"value":1231},{"type":32,"tag":1154,"props":2429,"children":2430},{},[2431],{"type":37,"value":1173},{"type":32,"tag":1154,"props":2433,"children":2434},{},[2435],{"type":37,"value":2436},"Alle Daten dynamisch, kein Cache",{"type":32,"tag":1122,"props":2438,"children":2439},{},[2440,2445,2450,2455,2460],{"type":32,"tag":1154,"props":2441,"children":2442},{},[2443],{"type":37,"value":2444},"Landing Page + Formular",{"type":32,"tag":1154,"props":2446,"children":2447},{},[2448],{"type":37,"value":2449},"Server + Client-Formular",{"type":32,"tag":1154,"props":2451,"children":2452},{},[2453],{"type":37,"value":2454},"60KB",{"type":32,"tag":1154,"props":2456,"children":2457},{},[2458],{"type":37,"value":2459},"80ms",{"type":32,"tag":1154,"props":2461,"children":2462},{},[2463],{"type":37,"value":2464},"Formularvalidierung Client-seitig",{"type":32,"tag":1122,"props":2466,"children":2467},{},[2468,2473,2478,2483,2488],{"type":32,"tag":1154,"props":2469,"children":2470},{},[2471],{"type":37,"value":2472},"Geolocation-basierte Preisgestaltung",{"type":32,"tag":1154,"props":2474,"children":2475},{},[2476],{"type":37,"value":2477},"Edge SSR + KV",{"type":32,"tag":1154,"props":2479,"children":2480},{},[2481],{"type":37,"value":2482},"30KB",{"type":32,"tag":1154,"props":2484,"children":2485},{},[2486],{"type":37,"value":2487},"20ms",{"type":32,"tag":1154,"props":2489,"children":2490},{},[2491],{"type":37,"value":2492},"KV Write-Limitierungen",{"type":32,"tag":33,"props":2494,"children":2495},{},[2496],{"type":37,"value":2497},"Bei Roibase-Projekten nutzen wir typischerweise „Selective Hydration\". Denn die meisten E-Commerce-Seiten enthalten sowohl statische Inhalte (Produktbeschreibung, Bilder) als auch interaktive Elemente (Warenkorb, Filter). Vollständiger Server-Render ist im E-Commerce nicht praktisch, vollständiger Client-Render schadet Core Web Vitals.",{"type":32,"tag":40,"props":2499,"children":2501},{"id":2500},"was-sie-jetzt-in-ihrem-projekt-tun-sollten",[2502],{"type":37,"value":2503},"Was Sie jetzt in Ihrem Projekt tun sollten",{"type":32,"tag":33,"props":2505,"children":2506},{},[2507],{"type":37,"value":2508},"Läuft Ihr aktuelles Projekt noch auf Next.js Pages Router oder Nuxt 2, ist ein Rewrite nicht dringend. Aber nutzen Sie beim Hinzufügen neuer Features App Router (Next 15+) oder Nuxt 3.12+. Ein hybrider Ansatz funktioniert: Migrieren Sie kritische Seiten (Checkout, Produktdetail) zur neuen Architektur, lassen Sie Blog oder statische Seiten im Alten.",{"type":32,"tag":33,"props":2510,"children":2511},{},[2512],{"type":37,"value":2513},"Für neue Projekte:",{"type":32,"tag":1648,"props":2515,"children":2516},{},[2517,2522,2527,2532,2537],{"type":32,"tag":1652,"props":2518,"children":2519},{},[2520],{"type":37,"value":2521},"Component-Inventur erstellen – Was ist interaktiv, was statisch?",{"type":32,"tag":1652,"props":2523,"children":2524},{},[2525],{"type":37,"value":2526},"Interaktive als Client Components markieren",{"type":32,"tag":1652,"props":2528,"children":2529},{},[2530],{"type":37,"value":2531},"Alles andere als Server Component",{"type":32,"tag":1652,"props":2533,"children":2534},{},[2535],{"type":37,"value":2536},"Chrome DevTools Profiler nutzen, TBT messen, Ziel \u003C200ms",{"type":32,"tag":1652,"props":2538,"children":2539},{},[2540],{"type":37,"value":2541},"Wenn TBT noch hoch ist, State in Client Components verkleinern",{"type":32,"tag":33,"props":2543,"children":2544},{},[2545],{"type":37,"value":2546},"In einer Headless-Commerce-Architektur sind diese Entsch",{"type":32,"tag":2548,"props":2549,"children":2550},"style",{},[2551],{"type":37,"value":2552},"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":104,"depth":104,"links":2554},[2555,2558,2561,2562,2563,2564],{"id":42,"depth":94,"text":45,"children":2556},[2557],{"id":870,"depth":104,"text":873},{"id":1104,"depth":94,"text":1107,"children":2559},[2560],{"id":1254,"depth":104,"text":1257},{"id":1638,"depth":94,"text":1641},{"id":2105,"depth":94,"text":2108},{"id":2321,"depth":94,"text":2324},{"id":2500,"depth":94,"text":2503},"markdown","content:de:tech:server-components-vs-client-2026.md","content","de\u002Ftech\u002Fserver-components-vs-client-2026.md","de\u002Ftech\u002Fserver-components-vs-client-2026","md",1780898612907]