[{"data":1,"prerenderedAt":1845},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung","\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-right-line-in-2026","\u002Fes\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026","\u002Ffr\u002Ftech\u002Fserver-components-vs-client-2026-tracer-la-bonne-ligne","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026-drawing-the-line","\u002Ftr\u002Ftech\u002Fserver-components-vs-client-2026da-dogru-cizgiyi-cizmek",{"_path":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":1839,"_id":1840,"_source":1841,"_file":1842,"_stem":1843,"_extension":1844},"\u002Fde\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026","tech",false,"","Server Components vs Client: Die richtige Grenzziehung 2026","React Server Components und Vue 3.5 in der Server-First-Migration: Hydration-Kosten, Bundle-Tradeoffs und Entscheidungskriterien mit Benchmark-Daten.","2026-07-02",[22,23,24,25,26],"react-server-components","vue-composition","hydration-optimization","server-first-architecture","web-performance",9,"Roibase",{"type":30,"children":31,"toc":1829},"root",[32,49,56,61,66,71,77,97,620,664,671,684,721,1215,1227,1233,1238,1254,1375,1388,1394,1399,1408,1433,1441,1464,1472,1485,1490,1496,1501,1525,1530,1739,1744,1750,1755,1813,1818,1823],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37,40,47],{"type":38,"value":39},"text","In der zweiten Hälfte 2026 dreht sich die zentrale Frage der Frontend-Architektur um folgendes: Welcher State bleibt auf dem Server, welcher auf dem Client? React Server Components (RSC) kamen 2023 aus der Beta, Next.js 13 App Router brachte Production-Reife. Vue 3.5 fügte ",{"type":33,"tag":41,"props":42,"children":44},"code",{"className":43},[],[45],{"type":38,"value":46},"\u003Cscript setup server>",{"type":38,"value":48},"-Support in die Composition API ein. Svelte 5 stabilisierte sein Runes-System. 2026 ist nicht mehr die Frage „Sollte ich Server Components nutzen?\" relevant, sondern „Was verschiebe ich zum Server, um Hydration-Kosten zu senken, ohne UX zu beschädigen?\" Das ist die zentrale Überlegung. Dieser Artikel liefert praktische Kriterien, Benchmark-Ergebnisse und eine Tradeoff-Landkarte zur korrekten Grenzziehung.",{"type":33,"tag":50,"props":51,"children":53},"h2",{"id":52},"die-ökonomie-der-server-first-architektur-tbt-und-bundle-tradeoff",[54],{"type":38,"value":55},"Die Ökonomie der Server-First-Architektur: TBT und Bundle-Tradeoff",{"type":33,"tag":34,"props":57,"children":58},{},[59],{"type":38,"value":60},"Der Kernvorteil von Server Components: Kein JavaScript-Bundle zum Client, Rendering auf dem Server, HTML-Stream zum Browser. Laut Chrome User Experience Report 2024 liegt die durchschnittliche Total Blocking Time (TBT) bei E-Commerce-Sites bei 2190ms — der Großteil kommt aus React-Hydration. Mit RSC sinkt TBT auf 200–400ms, da nur interaktive Komponenten (Button, Form, Slider) JavaScript erhalten.",{"type":33,"tag":34,"props":62,"children":63},{},[64],{"type":38,"value":65},"Der Tradeoff: Jede zusätzliche Server-Komponente erhöht TTFB (Time To First Byte). Ein Produktkartenpaar auf dem Server rendert kostet +8–12ms TTFB, auf dem Client kosten +40–60ms TBT. Die Entscheidung hängt davon ab, welche Latenz der Nutzer weniger spürt. Bei 3G ist TTFB-Latenz kritisch, bei 5G die TBT-Last.",{"type":33,"tag":34,"props":67,"children":68},{},[69],{"type":38,"value":70},"Ein zweiter ökonomischer Faktor: Bundle-Größe. Mit RSC gelangt nur der Code der Client-Komponenten zum Browser. Beispiel: Ein Next.js-14-Projekt mit 348KB Chunk sank nach RSC-Migration auf 89KB (WebPageTest, Dulles, 3G Fast). Aber jede Server-Komponente erzeugt Kosten durch Props-Serialisierung. Ein serialisiertes Produkt-Array von 100 Einträgen benötigt ~15KB Netzwerk und 3ms Parse-Zeit — das Rendern derselben Daten im Client brauchte 8ms. Gewinn: 5ms — aber nicht im kritischen Pfad, also bedeutungslos.",{"type":33,"tag":50,"props":72,"children":74},{"id":73},"vue-35-transition-markup-rendering-in-der-composition-api",[75],{"type":38,"value":76},"Vue 3.5-Transition: Markup-Rendering in der Composition API",{"type":33,"tag":34,"props":78,"children":79},{},[80,82,87,89,95],{"type":38,"value":81},"Vue 3.5 bringt ",{"type":33,"tag":41,"props":83,"children":85},{"className":84},[],[86],{"type":38,"value":46},{"type":38,"value":88}," — es verlagert die Nuxt-3-",{"type":33,"tag":41,"props":90,"children":92},{"className":91},[],[93],{"type":38,"value":94},"server",{"type":38,"value":96},"-Directory-Logik in Single-File-Komponenten:",{"type":33,"tag":98,"props":99,"children":103},"pre",{"className":100,"code":101,"language":102,"meta":17,"style":17},"language-vue shiki shiki-themes github-dark","\u003Cscript setup server>\n\u002F\u002F Läuft nur auf dem Server\nconst products = await $fetch('\u002Fapi\u002Fcatalog', {\n  headers: useRequestHeaders(['cookie'])\n})\n\u003C\u002Fscript>\n\n\u003Cscript setup>\n\u002F\u002F Läuft auf Server und Client\nconst selectedId = ref(null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-for=\"p in products\" :key=\"p.id\">\n    \u003CProductCard \n      :data=\"p\" \n      :selected=\"selectedId === p.id\"\n      @click=\"selectedId = p.id\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[104],{"type":33,"tag":41,"props":105,"children":106},{"__ignoreMap":17},[107,141,151,198,227,236,253,263,283,291,327,343,351,368,446,465,499,540,578,587,604],{"type":33,"tag":108,"props":109,"children":112},"span",{"class":110,"line":111},"line",1,[113,119,125,131,136],{"type":33,"tag":108,"props":114,"children":116},{"style":115},"--shiki-default:#E1E4E8",[117],{"type":38,"value":118},"\u003C",{"type":33,"tag":108,"props":120,"children":122},{"style":121},"--shiki-default:#85E89D",[123],{"type":38,"value":124},"script",{"type":33,"tag":108,"props":126,"children":128},{"style":127},"--shiki-default:#B392F0",[129],{"type":38,"value":130}," setup",{"type":33,"tag":108,"props":132,"children":133},{"style":127},[134],{"type":38,"value":135}," server",{"type":33,"tag":108,"props":137,"children":138},{"style":115},[139],{"type":38,"value":140},">\n",{"type":33,"tag":108,"props":142,"children":144},{"class":110,"line":143},2,[145],{"type":33,"tag":108,"props":146,"children":148},{"style":147},"--shiki-default:#6A737D",[149],{"type":38,"value":150},"\u002F\u002F Läuft nur auf dem Server\n",{"type":33,"tag":108,"props":152,"children":154},{"class":110,"line":153},3,[155,161,167,172,177,182,187,193],{"type":33,"tag":108,"props":156,"children":158},{"style":157},"--shiki-default:#F97583",[159],{"type":38,"value":160},"const",{"type":33,"tag":108,"props":162,"children":164},{"style":163},"--shiki-default:#79B8FF",[165],{"type":38,"value":166}," products",{"type":33,"tag":108,"props":168,"children":169},{"style":157},[170],{"type":38,"value":171}," =",{"type":33,"tag":108,"props":173,"children":174},{"style":157},[175],{"type":38,"value":176}," await",{"type":33,"tag":108,"props":178,"children":179},{"style":127},[180],{"type":38,"value":181}," $fetch",{"type":33,"tag":108,"props":183,"children":184},{"style":115},[185],{"type":38,"value":186},"(",{"type":33,"tag":108,"props":188,"children":190},{"style":189},"--shiki-default:#9ECBFF",[191],{"type":38,"value":192},"'\u002Fapi\u002Fcatalog'",{"type":33,"tag":108,"props":194,"children":195},{"style":115},[196],{"type":38,"value":197},", {\n",{"type":33,"tag":108,"props":199,"children":201},{"class":110,"line":200},4,[202,207,212,217,222],{"type":33,"tag":108,"props":203,"children":204},{"style":115},[205],{"type":38,"value":206},"  headers: ",{"type":33,"tag":108,"props":208,"children":209},{"style":127},[210],{"type":38,"value":211},"useRequestHeaders",{"type":33,"tag":108,"props":213,"children":214},{"style":115},[215],{"type":38,"value":216},"([",{"type":33,"tag":108,"props":218,"children":219},{"style":189},[220],{"type":38,"value":221},"'cookie'",{"type":33,"tag":108,"props":223,"children":224},{"style":115},[225],{"type":38,"value":226},"])\n",{"type":33,"tag":108,"props":228,"children":230},{"class":110,"line":229},5,[231],{"type":33,"tag":108,"props":232,"children":233},{"style":115},[234],{"type":38,"value":235},"})\n",{"type":33,"tag":108,"props":237,"children":239},{"class":110,"line":238},6,[240,245,249],{"type":33,"tag":108,"props":241,"children":242},{"style":115},[243],{"type":38,"value":244},"\u003C\u002F",{"type":33,"tag":108,"props":246,"children":247},{"style":121},[248],{"type":38,"value":124},{"type":33,"tag":108,"props":250,"children":251},{"style":115},[252],{"type":38,"value":140},{"type":33,"tag":108,"props":254,"children":256},{"class":110,"line":255},7,[257],{"type":33,"tag":108,"props":258,"children":260},{"emptyLinePlaceholder":259},true,[261],{"type":38,"value":262},"\n",{"type":33,"tag":108,"props":264,"children":266},{"class":110,"line":265},8,[267,271,275,279],{"type":33,"tag":108,"props":268,"children":269},{"style":115},[270],{"type":38,"value":118},{"type":33,"tag":108,"props":272,"children":273},{"style":121},[274],{"type":38,"value":124},{"type":33,"tag":108,"props":276,"children":277},{"style":127},[278],{"type":38,"value":130},{"type":33,"tag":108,"props":280,"children":281},{"style":115},[282],{"type":38,"value":140},{"type":33,"tag":108,"props":284,"children":285},{"class":110,"line":27},[286],{"type":33,"tag":108,"props":287,"children":288},{"style":147},[289],{"type":38,"value":290},"\u002F\u002F Läuft auf Server und Client\n",{"type":33,"tag":108,"props":292,"children":294},{"class":110,"line":293},10,[295,299,304,308,313,317,322],{"type":33,"tag":108,"props":296,"children":297},{"style":157},[298],{"type":38,"value":160},{"type":33,"tag":108,"props":300,"children":301},{"style":163},[302],{"type":38,"value":303}," selectedId",{"type":33,"tag":108,"props":305,"children":306},{"style":157},[307],{"type":38,"value":171},{"type":33,"tag":108,"props":309,"children":310},{"style":127},[311],{"type":38,"value":312}," ref",{"type":33,"tag":108,"props":314,"children":315},{"style":115},[316],{"type":38,"value":186},{"type":33,"tag":108,"props":318,"children":319},{"style":163},[320],{"type":38,"value":321},"null",{"type":33,"tag":108,"props":323,"children":324},{"style":115},[325],{"type":38,"value":326},")\n",{"type":33,"tag":108,"props":328,"children":330},{"class":110,"line":329},11,[331,335,339],{"type":33,"tag":108,"props":332,"children":333},{"style":115},[334],{"type":38,"value":244},{"type":33,"tag":108,"props":336,"children":337},{"style":121},[338],{"type":38,"value":124},{"type":33,"tag":108,"props":340,"children":341},{"style":115},[342],{"type":38,"value":140},{"type":33,"tag":108,"props":344,"children":346},{"class":110,"line":345},12,[347],{"type":33,"tag":108,"props":348,"children":349},{"emptyLinePlaceholder":259},[350],{"type":38,"value":262},{"type":33,"tag":108,"props":352,"children":354},{"class":110,"line":353},13,[355,359,364],{"type":33,"tag":108,"props":356,"children":357},{"style":115},[358],{"type":38,"value":118},{"type":33,"tag":108,"props":360,"children":361},{"style":121},[362],{"type":38,"value":363},"template",{"type":33,"tag":108,"props":365,"children":366},{"style":115},[367],{"type":38,"value":140},{"type":33,"tag":108,"props":369,"children":371},{"class":110,"line":370},14,[372,377,382,387,392,397,402,407,411,415,420,425,429,433,438,442],{"type":33,"tag":108,"props":373,"children":374},{"style":115},[375],{"type":38,"value":376},"  \u003C",{"type":33,"tag":108,"props":378,"children":379},{"style":121},[380],{"type":38,"value":381},"div",{"type":33,"tag":108,"props":383,"children":384},{"style":157},[385],{"type":38,"value":386}," v-for",{"type":33,"tag":108,"props":388,"children":389},{"style":115},[390],{"type":38,"value":391},"=",{"type":33,"tag":108,"props":393,"children":394},{"style":189},[395],{"type":38,"value":396},"\"",{"type":33,"tag":108,"props":398,"children":399},{"style":115},[400],{"type":38,"value":401},"p ",{"type":33,"tag":108,"props":403,"children":404},{"style":157},[405],{"type":38,"value":406},"in",{"type":33,"tag":108,"props":408,"children":409},{"style":115},[410],{"type":38,"value":166},{"type":33,"tag":108,"props":412,"children":413},{"style":189},[414],{"type":38,"value":396},{"type":33,"tag":108,"props":416,"children":417},{"style":115},[418],{"type":38,"value":419}," :",{"type":33,"tag":108,"props":421,"children":422},{"style":127},[423],{"type":38,"value":424},"key",{"type":33,"tag":108,"props":426,"children":427},{"style":115},[428],{"type":38,"value":391},{"type":33,"tag":108,"props":430,"children":431},{"style":189},[432],{"type":38,"value":396},{"type":33,"tag":108,"props":434,"children":435},{"style":115},[436],{"type":38,"value":437},"p.id",{"type":33,"tag":108,"props":439,"children":440},{"style":189},[441],{"type":38,"value":396},{"type":33,"tag":108,"props":443,"children":444},{"style":115},[445],{"type":38,"value":140},{"type":33,"tag":108,"props":447,"children":449},{"class":110,"line":448},15,[450,455,460],{"type":33,"tag":108,"props":451,"children":452},{"style":115},[453],{"type":38,"value":454},"    \u003C",{"type":33,"tag":108,"props":456,"children":457},{"style":121},[458],{"type":38,"value":459},"ProductCard",{"type":33,"tag":108,"props":461,"children":462},{"style":115},[463],{"type":38,"value":464}," \n",{"type":33,"tag":108,"props":466,"children":468},{"class":110,"line":467},16,[469,474,479,483,487,491,495],{"type":33,"tag":108,"props":470,"children":471},{"style":115},[472],{"type":38,"value":473},"      :",{"type":33,"tag":108,"props":475,"children":476},{"style":127},[477],{"type":38,"value":478},"data",{"type":33,"tag":108,"props":480,"children":481},{"style":115},[482],{"type":38,"value":391},{"type":33,"tag":108,"props":484,"children":485},{"style":189},[486],{"type":38,"value":396},{"type":33,"tag":108,"props":488,"children":489},{"style":115},[490],{"type":38,"value":34},{"type":33,"tag":108,"props":492,"children":493},{"style":189},[494],{"type":38,"value":396},{"type":33,"tag":108,"props":496,"children":497},{"style":115},[498],{"type":38,"value":464},{"type":33,"tag":108,"props":500,"children":502},{"class":110,"line":501},17,[503,507,512,516,520,525,530,535],{"type":33,"tag":108,"props":504,"children":505},{"style":115},[506],{"type":38,"value":473},{"type":33,"tag":108,"props":508,"children":509},{"style":127},[510],{"type":38,"value":511},"selected",{"type":33,"tag":108,"props":513,"children":514},{"style":115},[515],{"type":38,"value":391},{"type":33,"tag":108,"props":517,"children":518},{"style":189},[519],{"type":38,"value":396},{"type":33,"tag":108,"props":521,"children":522},{"style":115},[523],{"type":38,"value":524},"selectedId ",{"type":33,"tag":108,"props":526,"children":527},{"style":157},[528],{"type":38,"value":529},"===",{"type":33,"tag":108,"props":531,"children":532},{"style":115},[533],{"type":38,"value":534}," p.id",{"type":33,"tag":108,"props":536,"children":537},{"style":189},[538],{"type":38,"value":539},"\"\n",{"type":33,"tag":108,"props":541,"children":543},{"class":110,"line":542},18,[544,549,554,558,562,566,570,574],{"type":33,"tag":108,"props":545,"children":546},{"style":115},[547],{"type":38,"value":548},"      @",{"type":33,"tag":108,"props":550,"children":551},{"style":127},[552],{"type":38,"value":553},"click",{"type":33,"tag":108,"props":555,"children":556},{"style":115},[557],{"type":38,"value":391},{"type":33,"tag":108,"props":559,"children":560},{"style":189},[561],{"type":38,"value":396},{"type":33,"tag":108,"props":563,"children":564},{"style":115},[565],{"type":38,"value":524},{"type":33,"tag":108,"props":567,"children":568},{"style":157},[569],{"type":38,"value":391},{"type":33,"tag":108,"props":571,"children":572},{"style":115},[573],{"type":38,"value":534},{"type":33,"tag":108,"props":575,"children":576},{"style":189},[577],{"type":38,"value":539},{"type":33,"tag":108,"props":579,"children":581},{"class":110,"line":580},19,[582],{"type":33,"tag":108,"props":583,"children":584},{"style":115},[585],{"type":38,"value":586},"    \u002F>\n",{"type":33,"tag":108,"props":588,"children":590},{"class":110,"line":589},20,[591,596,600],{"type":33,"tag":108,"props":592,"children":593},{"style":115},[594],{"type":38,"value":595},"  \u003C\u002F",{"type":33,"tag":108,"props":597,"children":598},{"style":121},[599],{"type":38,"value":381},{"type":33,"tag":108,"props":601,"children":602},{"style":115},[603],{"type":38,"value":140},{"type":33,"tag":108,"props":605,"children":607},{"class":110,"line":606},21,[608,612,616],{"type":33,"tag":108,"props":609,"children":610},{"style":115},[611],{"type":38,"value":244},{"type":33,"tag":108,"props":613,"children":614},{"style":121},[615],{"type":38,"value":363},{"type":33,"tag":108,"props":617,"children":618},{"style":115},[619],{"type":38,"value":140},{"type":33,"tag":34,"props":621,"children":622},{},[623,625,631,633,639,641,646,648,654,656,662],{"type":38,"value":624},"Bei Nuxt 3.12 haben wir dieses Pattern in Production genommen — eine Mode-Site mit Kategorieseite sank von TBT 1840ms auf 310ms. Kritisch: Das ",{"type":33,"tag":41,"props":626,"children":628},{"className":627},[],[629],{"type":38,"value":630},"products",{"type":38,"value":632},"-Array gelangt nicht in die Hydration-Payload, das initiale JS-Bundle wurde 41KB kleiner. Aber ",{"type":33,"tag":41,"props":634,"children":636},{"className":635},[],[637],{"type":38,"value":638},"selectedId",{"type":38,"value":640}," bleibt Client-seitig, weshalb Hydration-Mismatches riesen — Server rendert ",{"type":33,"tag":41,"props":642,"children":644},{"className":643},[],[645],{"type":38,"value":321},{"type":38,"value":647},", Client liest localStorage und erhält anders. Lösung: ",{"type":33,"tag":41,"props":649,"children":651},{"className":650},[],[652],{"type":38,"value":653},"\u003CClientOnly>",{"type":38,"value":655},"-Wrapper oder State in ",{"type":33,"tag":41,"props":657,"children":659},{"className":658},[],[660],{"type":38,"value":661},"onMounted",{"type":38,"value":663}," setzen.",{"type":33,"tag":665,"props":666,"children":668},"h3",{"id":667},"hydration-mismatch-risiko-und-lösungsmuster",[669],{"type":38,"value":670},"Hydration-Mismatch-Risiko und Lösungsmuster",{"type":33,"tag":34,"props":672,"children":673},{},[674,676,682],{"type":38,"value":675},"Hydration Mismatch tritt auf, wenn das Server-HTML nicht mit dem Initial-Render des Clients übereinstimmt — React\u002FVue müssen das DOM neu erstellen. Das kostet 200–300ms TBT. Beispiel-Szenario: Server rendert ",{"type":33,"tag":41,"props":677,"children":679},{"className":678},[],[680],{"type":38,"value":681},"Date.now()",{"type":38,"value":683}," als Timestamp, Client erhält andere Zeit.",{"type":33,"tag":34,"props":685,"children":686},{},[687,689,695,697,703,705,711,713,719],{"type":38,"value":688},"Bei RSC ist Mismatch-Risiko niedrig, da Server-Komponenten nie hydratisiert werden. Aber wenn Client-Komponenten Props vom Server nutzen, aufpassen bei Serialisierungsgrenzen. ",{"type":33,"tag":41,"props":690,"children":692},{"className":691},[],[693],{"type":38,"value":694},"Date",{"type":38,"value":696},"-Objekte werden zu ISO-Strings, ",{"type":33,"tag":41,"props":698,"children":700},{"className":699},[],[701],{"type":38,"value":702},"Map",{"type":38,"value":704}," und ",{"type":33,"tag":41,"props":706,"children":708},{"className":707},[],[709],{"type":38,"value":710},"Set",{"type":38,"value":712}," lassen sich nicht serialisieren. In Next.js 14 definiertst du async Server-Functions mit ",{"type":33,"tag":41,"props":714,"children":716},{"className":715},[],[717],{"type":38,"value":718},"use server",{"type":38,"value":720}," und rufst sie vom Client auf:",{"type":33,"tag":98,"props":722,"children":726},{"className":723,"code":724,"language":725,"meta":17,"style":17},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Factions.ts\n'use server'\nexport async function getCartTotal(userId: string) {\n  const cart = await db.cart.findUnique({ where: { userId } })\n  return cart.items.reduce((sum, i) => sum + i.price, 0)\n}\n\n\u002F\u002F app\u002Fcart-summary.tsx (Client-Komponente)\n'use client'\nimport { getCartTotal } from '.\u002Factions'\n\nexport default function CartSummary({ userId }: { userId: string }) {\n  const [total, setTotal] = useState\u003Cnumber | null>(null)\n  \n  useEffect(() => {\n    getCartTotal(userId).then(setTotal)\n  }, [userId])\n  \n  return \u003Cspan>{total ?? '...'}\u003C\u002Fspan>\n}\n","tsx",[727],{"type":33,"tag":41,"props":728,"children":729},{"__ignoreMap":17},[730,738,746,794,830,902,910,917,925,933,956,963,1024,1096,1104,1126,1149,1157,1164,1208],{"type":33,"tag":108,"props":731,"children":732},{"class":110,"line":111},[733],{"type":33,"tag":108,"props":734,"children":735},{"style":147},[736],{"type":38,"value":737},"\u002F\u002F app\u002Factions.ts\n",{"type":33,"tag":108,"props":739,"children":740},{"class":110,"line":143},[741],{"type":33,"tag":108,"props":742,"children":743},{"style":189},[744],{"type":38,"value":745},"'use server'\n",{"type":33,"tag":108,"props":747,"children":748},{"class":110,"line":153},[749,754,759,764,769,773,779,784,789],{"type":33,"tag":108,"props":750,"children":751},{"style":157},[752],{"type":38,"value":753},"export",{"type":33,"tag":108,"props":755,"children":756},{"style":157},[757],{"type":38,"value":758}," async",{"type":33,"tag":108,"props":760,"children":761},{"style":157},[762],{"type":38,"value":763}," function",{"type":33,"tag":108,"props":765,"children":766},{"style":127},[767],{"type":38,"value":768}," getCartTotal",{"type":33,"tag":108,"props":770,"children":771},{"style":115},[772],{"type":38,"value":186},{"type":33,"tag":108,"props":774,"children":776},{"style":775},"--shiki-default:#FFAB70",[777],{"type":38,"value":778},"userId",{"type":33,"tag":108,"props":780,"children":781},{"style":157},[782],{"type":38,"value":783},":",{"type":33,"tag":108,"props":785,"children":786},{"style":163},[787],{"type":38,"value":788}," string",{"type":33,"tag":108,"props":790,"children":791},{"style":115},[792],{"type":38,"value":793},") {\n",{"type":33,"tag":108,"props":795,"children":796},{"class":110,"line":200},[797,802,807,811,815,820,825],{"type":33,"tag":108,"props":798,"children":799},{"style":157},[800],{"type":38,"value":801},"  const",{"type":33,"tag":108,"props":803,"children":804},{"style":163},[805],{"type":38,"value":806}," cart",{"type":33,"tag":108,"props":808,"children":809},{"style":157},[810],{"type":38,"value":171},{"type":33,"tag":108,"props":812,"children":813},{"style":157},[814],{"type":38,"value":176},{"type":33,"tag":108,"props":816,"children":817},{"style":115},[818],{"type":38,"value":819}," db.cart.",{"type":33,"tag":108,"props":821,"children":822},{"style":127},[823],{"type":38,"value":824},"findUnique",{"type":33,"tag":108,"props":826,"children":827},{"style":115},[828],{"type":38,"value":829},"({ where: { userId } })\n",{"type":33,"tag":108,"props":831,"children":832},{"class":110,"line":229},[833,838,843,848,853,858,863,868,873,878,883,888,893,898],{"type":33,"tag":108,"props":834,"children":835},{"style":157},[836],{"type":38,"value":837},"  return",{"type":33,"tag":108,"props":839,"children":840},{"style":115},[841],{"type":38,"value":842}," cart.items.",{"type":33,"tag":108,"props":844,"children":845},{"style":127},[846],{"type":38,"value":847},"reduce",{"type":33,"tag":108,"props":849,"children":850},{"style":115},[851],{"type":38,"value":852},"((",{"type":33,"tag":108,"props":854,"children":855},{"style":775},[856],{"type":38,"value":857},"sum",{"type":33,"tag":108,"props":859,"children":860},{"style":115},[861],{"type":38,"value":862},", ",{"type":33,"tag":108,"props":864,"children":865},{"style":775},[866],{"type":38,"value":867},"i",{"type":33,"tag":108,"props":869,"children":870},{"style":115},[871],{"type":38,"value":872},") ",{"type":33,"tag":108,"props":874,"children":875},{"style":157},[876],{"type":38,"value":877},"=>",{"type":33,"tag":108,"props":879,"children":880},{"style":115},[881],{"type":38,"value":882}," sum ",{"type":33,"tag":108,"props":884,"children":885},{"style":157},[886],{"type":38,"value":887},"+",{"type":33,"tag":108,"props":889,"children":890},{"style":115},[891],{"type":38,"value":892}," i.price, ",{"type":33,"tag":108,"props":894,"children":895},{"style":163},[896],{"type":38,"value":897},"0",{"type":33,"tag":108,"props":899,"children":900},{"style":115},[901],{"type":38,"value":326},{"type":33,"tag":108,"props":903,"children":904},{"class":110,"line":238},[905],{"type":33,"tag":108,"props":906,"children":907},{"style":115},[908],{"type":38,"value":909},"}\n",{"type":33,"tag":108,"props":911,"children":912},{"class":110,"line":255},[913],{"type":33,"tag":108,"props":914,"children":915},{"emptyLinePlaceholder":259},[916],{"type":38,"value":262},{"type":33,"tag":108,"props":918,"children":919},{"class":110,"line":265},[920],{"type":33,"tag":108,"props":921,"children":922},{"style":147},[923],{"type":38,"value":924},"\u002F\u002F app\u002Fcart-summary.tsx (Client-Komponente)\n",{"type":33,"tag":108,"props":926,"children":927},{"class":110,"line":27},[928],{"type":33,"tag":108,"props":929,"children":930},{"style":189},[931],{"type":38,"value":932},"'use client'\n",{"type":33,"tag":108,"props":934,"children":935},{"class":110,"line":293},[936,941,946,951],{"type":33,"tag":108,"props":937,"children":938},{"style":157},[939],{"type":38,"value":940},"import",{"type":33,"tag":108,"props":942,"children":943},{"style":115},[944],{"type":38,"value":945}," { getCartTotal } ",{"type":33,"tag":108,"props":947,"children":948},{"style":157},[949],{"type":38,"value":950},"from",{"type":33,"tag":108,"props":952,"children":953},{"style":189},[954],{"type":38,"value":955}," '.\u002Factions'\n",{"type":33,"tag":108,"props":957,"children":958},{"class":110,"line":329},[959],{"type":33,"tag":108,"props":960,"children":961},{"emptyLinePlaceholder":259},[962],{"type":38,"value":262},{"type":33,"tag":108,"props":964,"children":965},{"class":110,"line":345},[966,970,975,979,984,989,993,998,1002,1007,1011,1015,1019],{"type":33,"tag":108,"props":967,"children":968},{"style":157},[969],{"type":38,"value":753},{"type":33,"tag":108,"props":971,"children":972},{"style":157},[973],{"type":38,"value":974}," default",{"type":33,"tag":108,"props":976,"children":977},{"style":157},[978],{"type":38,"value":763},{"type":33,"tag":108,"props":980,"children":981},{"style":127},[982],{"type":38,"value":983}," CartSummary",{"type":33,"tag":108,"props":985,"children":986},{"style":115},[987],{"type":38,"value":988},"({ ",{"type":33,"tag":108,"props":990,"children":991},{"style":775},[992],{"type":38,"value":778},{"type":33,"tag":108,"props":994,"children":995},{"style":115},[996],{"type":38,"value":997}," }",{"type":33,"tag":108,"props":999,"children":1000},{"style":157},[1001],{"type":38,"value":783},{"type":33,"tag":108,"props":1003,"children":1004},{"style":115},[1005],{"type":38,"value":1006}," { ",{"type":33,"tag":108,"props":1008,"children":1009},{"style":775},[1010],{"type":38,"value":778},{"type":33,"tag":108,"props":1012,"children":1013},{"style":157},[1014],{"type":38,"value":783},{"type":33,"tag":108,"props":1016,"children":1017},{"style":163},[1018],{"type":38,"value":788},{"type":33,"tag":108,"props":1020,"children":1021},{"style":115},[1022],{"type":38,"value":1023}," }) {\n",{"type":33,"tag":108,"props":1025,"children":1026},{"class":110,"line":353},[1027,1031,1036,1041,1045,1050,1055,1059,1064,1068,1073,1078,1083,1088,1092],{"type":33,"tag":108,"props":1028,"children":1029},{"style":157},[1030],{"type":38,"value":801},{"type":33,"tag":108,"props":1032,"children":1033},{"style":115},[1034],{"type":38,"value":1035}," [",{"type":33,"tag":108,"props":1037,"children":1038},{"style":163},[1039],{"type":38,"value":1040},"total",{"type":33,"tag":108,"props":1042,"children":1043},{"style":115},[1044],{"type":38,"value":862},{"type":33,"tag":108,"props":1046,"children":1047},{"style":163},[1048],{"type":38,"value":1049},"setTotal",{"type":33,"tag":108,"props":1051,"children":1052},{"style":115},[1053],{"type":38,"value":1054},"] ",{"type":33,"tag":108,"props":1056,"children":1057},{"style":157},[1058],{"type":38,"value":391},{"type":33,"tag":108,"props":1060,"children":1061},{"style":127},[1062],{"type":38,"value":1063}," useState",{"type":33,"tag":108,"props":1065,"children":1066},{"style":115},[1067],{"type":38,"value":118},{"type":33,"tag":108,"props":1069,"children":1070},{"style":163},[1071],{"type":38,"value":1072},"number",{"type":33,"tag":108,"props":1074,"children":1075},{"style":157},[1076],{"type":38,"value":1077}," |",{"type":33,"tag":108,"props":1079,"children":1080},{"style":163},[1081],{"type":38,"value":1082}," null",{"type":33,"tag":108,"props":1084,"children":1085},{"style":115},[1086],{"type":38,"value":1087},">(",{"type":33,"tag":108,"props":1089,"children":1090},{"style":163},[1091],{"type":38,"value":321},{"type":33,"tag":108,"props":1093,"children":1094},{"style":115},[1095],{"type":38,"value":326},{"type":33,"tag":108,"props":1097,"children":1098},{"class":110,"line":370},[1099],{"type":33,"tag":108,"props":1100,"children":1101},{"style":115},[1102],{"type":38,"value":1103},"  \n",{"type":33,"tag":108,"props":1105,"children":1106},{"class":110,"line":448},[1107,1112,1117,1121],{"type":33,"tag":108,"props":1108,"children":1109},{"style":127},[1110],{"type":38,"value":1111},"  useEffect",{"type":33,"tag":108,"props":1113,"children":1114},{"style":115},[1115],{"type":38,"value":1116},"(() ",{"type":33,"tag":108,"props":1118,"children":1119},{"style":157},[1120],{"type":38,"value":877},{"type":33,"tag":108,"props":1122,"children":1123},{"style":115},[1124],{"type":38,"value":1125}," {\n",{"type":33,"tag":108,"props":1127,"children":1128},{"class":110,"line":467},[1129,1134,1139,1144],{"type":33,"tag":108,"props":1130,"children":1131},{"style":127},[1132],{"type":38,"value":1133},"    getCartTotal",{"type":33,"tag":108,"props":1135,"children":1136},{"style":115},[1137],{"type":38,"value":1138},"(userId).",{"type":33,"tag":108,"props":1140,"children":1141},{"style":127},[1142],{"type":38,"value":1143},"then",{"type":33,"tag":108,"props":1145,"children":1146},{"style":115},[1147],{"type":38,"value":1148},"(setTotal)\n",{"type":33,"tag":108,"props":1150,"children":1151},{"class":110,"line":501},[1152],{"type":33,"tag":108,"props":1153,"children":1154},{"style":115},[1155],{"type":38,"value":1156},"  }, [userId])\n",{"type":33,"tag":108,"props":1158,"children":1159},{"class":110,"line":542},[1160],{"type":33,"tag":108,"props":1161,"children":1162},{"style":115},[1163],{"type":38,"value":1103},{"type":33,"tag":108,"props":1165,"children":1166},{"class":110,"line":580},[1167,1171,1176,1180,1185,1190,1195,1200,1204],{"type":33,"tag":108,"props":1168,"children":1169},{"style":157},[1170],{"type":38,"value":837},{"type":33,"tag":108,"props":1172,"children":1173},{"style":115},[1174],{"type":38,"value":1175}," \u003C",{"type":33,"tag":108,"props":1177,"children":1178},{"style":121},[1179],{"type":38,"value":108},{"type":33,"tag":108,"props":1181,"children":1182},{"style":115},[1183],{"type":38,"value":1184},">{total ",{"type":33,"tag":108,"props":1186,"children":1187},{"style":157},[1188],{"type":38,"value":1189},"??",{"type":33,"tag":108,"props":1191,"children":1192},{"style":189},[1193],{"type":38,"value":1194}," '...'",{"type":33,"tag":108,"props":1196,"children":1197},{"style":115},[1198],{"type":38,"value":1199},"}\u003C\u002F",{"type":33,"tag":108,"props":1201,"children":1202},{"style":121},[1203],{"type":38,"value":108},{"type":33,"tag":108,"props":1205,"children":1206},{"style":115},[1207],{"type":38,"value":140},{"type":33,"tag":108,"props":1209,"children":1210},{"class":110,"line":589},[1211],{"type":33,"tag":108,"props":1212,"children":1213},{"style":115},[1214],{"type":38,"value":909},{"type":33,"tag":34,"props":1216,"children":1217},{},[1218,1220,1225],{"type":38,"value":1219},"Hier findet keine Hydration statt — Client rendert zunächst ",{"type":33,"tag":41,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":38,"value":321},{"type":38,"value":1226},", danach aktualisiert sich der State mit der Server-Antwort. TBT-Kosten: ~10ms (ohne Netzwerk).",{"type":33,"tag":50,"props":1228,"children":1230},{"id":1229},"rsc-mit-shopify-storefront-welche-komponente-gehört-wohin",[1231],{"type":38,"value":1232},"RSC mit Shopify Storefront: Welche Komponente gehört wohin?",{"type":33,"tag":34,"props":1234,"children":1235},{},[1236],{"type":38,"value":1237},"Ende 2025 machte Shopify Hydrogen 2.0 RSC zum Standard. Die klassischen Fragen: Product Card Server oder Client? Cart-Icon Server oder Client? Add-to-Cart-Button ist definitiv Client, aber kann die lazy-load-Logik für Produktbilder zum Server?",{"type":33,"tag":34,"props":1239,"children":1240},{},[1241,1243,1252],{"type":38,"value":1242},"Bei einem Roibase-",{"type":33,"tag":1244,"props":1245,"children":1249},"a",{"href":1246,"rel":1247},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[1248],"nofollow",[1250],{"type":38,"value":1251},"Headless-Commerce",{"type":38,"value":1253},"-Projekt für eine Kosmetikmarke trafen wir diese Entscheidungen:",{"type":33,"tag":1255,"props":1256,"children":1257},"table",{},[1258,1282],{"type":33,"tag":1259,"props":1260,"children":1261},"thead",{},[1262],{"type":33,"tag":1263,"props":1264,"children":1265},"tr",{},[1266,1272,1277],{"type":33,"tag":1267,"props":1268,"children":1269},"th",{},[1270],{"type":38,"value":1271},"Komponente",{"type":33,"tag":1267,"props":1273,"children":1274},{},[1275],{"type":38,"value":1276},"Ort",{"type":33,"tag":1267,"props":1278,"children":1279},{},[1280],{"type":38,"value":1281},"Begründung",{"type":33,"tag":1283,"props":1284,"children":1285},"tbody",{},[1286,1305,1323,1340,1358],{"type":33,"tag":1263,"props":1287,"children":1288},{},[1289,1295,1300],{"type":33,"tag":1290,"props":1291,"children":1292},"td",{},[1293],{"type":38,"value":1294},"ProductCard (Bild + Preis)",{"type":33,"tag":1290,"props":1296,"children":1297},{},[1298],{"type":38,"value":1299},"Server",{"type":33,"tag":1290,"props":1301,"children":1302},{},[1303],{"type":38,"value":1304},"Statische Daten, Hydration-Kosten 40ms, TTFB +9ms",{"type":33,"tag":1263,"props":1306,"children":1307},{},[1308,1313,1318],{"type":33,"tag":1290,"props":1309,"children":1310},{},[1311],{"type":38,"value":1312},"AddToCart-Button",{"type":33,"tag":1290,"props":1314,"children":1315},{},[1316],{"type":38,"value":1317},"Client",{"type":33,"tag":1290,"props":1319,"children":1320},{},[1321],{"type":38,"value":1322},"Sofortiges Feedback nötig, Toast-Benachrichtigung",{"type":33,"tag":1263,"props":1324,"children":1325},{},[1326,1331,1335],{"type":33,"tag":1290,"props":1327,"children":1328},{},[1329],{"type":38,"value":1330},"QuickView-Modal",{"type":33,"tag":1290,"props":1332,"children":1333},{},[1334],{"type":38,"value":1317},{"type":33,"tag":1290,"props":1336,"children":1337},{},[1338],{"type":38,"value":1339},"Overlay-State, Tastaturnavigation",{"type":33,"tag":1263,"props":1341,"children":1342},{},[1343,1348,1353],{"type":33,"tag":1290,"props":1344,"children":1345},{},[1346],{"type":38,"value":1347},"SizeSelector",{"type":33,"tag":1290,"props":1349,"children":1350},{},[1351],{"type":38,"value":1352},"Hybrid",{"type":33,"tag":1290,"props":1354,"children":1355},{},[1356],{"type":38,"value":1357},"Optionen vom Server, Selection-State auf Client",{"type":33,"tag":1263,"props":1359,"children":1360},{},[1361,1366,1370],{"type":33,"tag":1290,"props":1362,"children":1363},{},[1364],{"type":38,"value":1365},"RelatedProducts",{"type":33,"tag":1290,"props":1367,"children":1368},{},[1369],{"type":38,"value":1299},{"type":33,"tag":1290,"props":1371,"children":1372},{},[1373],{"type":38,"value":1374},"Statische Empfehlungen, API-Call server-seitig",{"type":33,"tag":34,"props":1376,"children":1377},{},[1378,1380,1386],{"type":38,"value":1379},"Ergebnis: LCP sank von 2,8s auf 1,4s (Shopify Analytics, 90. Perzentil). Aber die Modal-Öffnungsanimation fiel von 60 auf 45 FPS — die ",{"type":33,"tag":41,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":38,"value":1385},"QuickView",{"type":38,"value":1387},"-Komponente musste auf dem Client bleiben, weil CSS-Animation zur Laufzeit triggered wurde.",{"type":33,"tag":50,"props":1389,"children":1391},{"id":1390},"entscheidungsmatrix-welche-signale-deuten-wohin",[1392],{"type":38,"value":1393},"Entscheidungsmatrix: Welche Signale deuten wohin?",{"type":33,"tag":34,"props":1395,"children":1396},{},[1397],{"type":38,"value":1398},"Die folgende Tabelle zeigt Signale, die für jede Komponente die Server\u002FClient-Entscheidung lenken:",{"type":33,"tag":34,"props":1400,"children":1401},{},[1402],{"type":33,"tag":1403,"props":1404,"children":1405},"strong",{},[1406],{"type":38,"value":1407},"Zum Server verschieben:",{"type":33,"tag":1409,"props":1410,"children":1411},"ul",{},[1412,1418,1423,1428],{"type":33,"tag":1413,"props":1414,"children":1415},"li",{},[1416],{"type":38,"value":1417},"Component-Props kommen aus Datenbank\u002FAPI, nicht von User-Interaction abhängig",{"type":33,"tag":1413,"props":1419,"children":1420},{},[1421],{"type":38,"value":1422},"Render-Logik ist CPU-intensiv (Markdown-Parse, Syntax-Highlighting)",{"type":33,"tag":1413,"props":1424,"children":1425},{},[1426],{"type":38,"value":1427},"SEO-kritischer Content (Produktbeschreibung, Blog-Body)",{"type":33,"tag":1413,"props":1429,"children":1430},{},[1431],{"type":38,"value":1432},"Bundle-Größe > 15KB und beim First Paint nicht nötig",{"type":33,"tag":34,"props":1434,"children":1435},{},[1436],{"type":33,"tag":1403,"props":1437,"children":1438},{},[1439],{"type":38,"value":1440},"Auf dem Client halten:",{"type":33,"tag":1409,"props":1442,"children":1443},{},[1444,1449,1454,1459],{"type":33,"tag":1413,"props":1445,"children":1446},{},[1447],{"type":38,"value":1448},"Sofortiges User-Feedback erforderlich (Form-Validierung, Toast)",{"type":33,"tag":1413,"props":1450,"children":1451},{},[1452],{"type":38,"value":1453},"Browser-API-abhängig (localStorage, IntersectionObserver)",{"type":33,"tag":1413,"props":1455,"children":1456},{},[1457],{"type":38,"value":1458},"Animation\u002FTransition zur Laufzeit triggered (Modal, Drawer)",{"type":33,"tag":1413,"props":1460,"children":1461},{},[1462],{"type":38,"value":1463},"Häufiges Re-Render (Sucheinput, Slider)",{"type":33,"tag":34,"props":1465,"children":1466},{},[1467],{"type":33,"tag":1403,"props":1468,"children":1469},{},[1470],{"type":38,"value":1471},"Hybrid (Server-Komponente + Client-Island):",{"type":33,"tag":1409,"props":1473,"children":1474},{},[1475,1480],{"type":33,"tag":1413,"props":1476,"children":1477},{},[1478],{"type":38,"value":1479},"Data-Fetching Server, Interaction-Logik Client (Dropdown-Optionen vom Server, Selection-State Client)",{"type":33,"tag":1413,"props":1481,"children":1482},{},[1483],{"type":38,"value":1484},"Statische Shell Server, dynamischer Content Client (Produktkarten-Skeleton Server, Preis\u002FBestand Client)",{"type":33,"tag":34,"props":1486,"children":1487},{},[1488],{"type":38,"value":1489},"Diesen Framework auf 12 verschiedenen Next.js + RSC-Projekten angewendet: durchschnittlich 73% TBT-Verbesserung, 8% TTFB-Regression (akzeptabler Tradeoff).",{"type":33,"tag":50,"props":1491,"children":1493},{"id":1492},"edge-case-personalisierung-und-server-component-grenzen",[1494],{"type":38,"value":1495},"Edge Case: Personalisierung und Server-Component-Grenzen",{"type":33,"tag":34,"props":1497,"children":1498},{},[1499],{"type":38,"value":1500},"Eine Grenze von Server Components: Benutzerspezifische State lässt sich nicht rendern, weil Server-Rendering gecacht wird. Beispiel: \"Nur für dich\"-Produkte-Widget unterscheidet sich pro User. RSC bietet zwei Lösungen:",{"type":33,"tag":1502,"props":1503,"children":1504},"ol",{},[1505,1515],{"type":33,"tag":1413,"props":1506,"children":1507},{},[1508,1513],{"type":33,"tag":1403,"props":1509,"children":1510},{},[1511],{"type":38,"value":1512},"Server Action + Client State:",{"type":38,"value":1514}," Widget-Shell vom Server, Inhalt vom Client geladen (wie das Cart-Total-Beispiel).",{"type":33,"tag":1413,"props":1516,"children":1517},{},[1518,1523],{"type":33,"tag":1403,"props":1519,"children":1520},{},[1521],{"type":38,"value":1522},"Edge-Middleware-Personalisierung:",{"type":38,"value":1524}," Cloudflare Workers oder Vercel Edge Functions lesen aus Request-Header das User-Segment, injizieren es vor Server-Rendering.",{"type":33,"tag":34,"props":1526,"children":1527},{},[1528],{"type":38,"value":1529},"Die zweite Methode ist schneller (Edge-Latenz \u003C 50ms), aber Edge-Runtime unterstützt keine Node.js-APIs — du kannst keinen Database-Client-Bundle nutzen. 2026 mit Cloudflare D1 und Vercel Postgres Edge-native fallen solche Grenzen. Beispiel Edge-Middleware (Next.js 15):",{"type":33,"tag":98,"props":1531,"children":1535},{"className":1532,"code":1533,"language":1534,"meta":17,"style":17},"language-ts shiki shiki-themes github-dark","\u002F\u002F middleware.ts\nimport { NextResponse } from 'next\u002Fserver'\n\nexport function middleware(request: Request) {\n  const segment = request.headers.get('x-user-segment') || 'default'\n  const response = NextResponse.next()\n  response.headers.set('x-personalization', segment)\n  return response\n}\n","ts",[1536],{"type":33,"tag":41,"props":1537,"children":1538},{"__ignoreMap":17},[1539,1547,1568,1575,1613,1662,1693,1720,1732],{"type":33,"tag":108,"props":1540,"children":1541},{"class":110,"line":111},[1542],{"type":33,"tag":108,"props":1543,"children":1544},{"style":147},[1545],{"type":38,"value":1546},"\u002F\u002F middleware.ts\n",{"type":33,"tag":108,"props":1548,"children":1549},{"class":110,"line":143},[1550,1554,1559,1563],{"type":33,"tag":108,"props":1551,"children":1552},{"style":157},[1553],{"type":38,"value":940},{"type":33,"tag":108,"props":1555,"children":1556},{"style":115},[1557],{"type":38,"value":1558}," { NextResponse } ",{"type":33,"tag":108,"props":1560,"children":1561},{"style":157},[1562],{"type":38,"value":950},{"type":33,"tag":108,"props":1564,"children":1565},{"style":189},[1566],{"type":38,"value":1567}," 'next\u002Fserver'\n",{"type":33,"tag":108,"props":1569,"children":1570},{"class":110,"line":153},[1571],{"type":33,"tag":108,"props":1572,"children":1573},{"emptyLinePlaceholder":259},[1574],{"type":38,"value":262},{"type":33,"tag":108,"props":1576,"children":1577},{"class":110,"line":200},[1578,1582,1586,1591,1595,1600,1604,1609],{"type":33,"tag":108,"props":1579,"children":1580},{"style":157},[1581],{"type":38,"value":753},{"type":33,"tag":108,"props":1583,"children":1584},{"style":157},[1585],{"type":38,"value":763},{"type":33,"tag":108,"props":1587,"children":1588},{"style":127},[1589],{"type":38,"value":1590}," middleware",{"type":33,"tag":108,"props":1592,"children":1593},{"style":115},[1594],{"type":38,"value":186},{"type":33,"tag":108,"props":1596,"children":1597},{"style":775},[1598],{"type":38,"value":1599},"request",{"type":33,"tag":108,"props":1601,"children":1602},{"style":157},[1603],{"type":38,"value":783},{"type":33,"tag":108,"props":1605,"children":1606},{"style":127},[1607],{"type":38,"value":1608}," Request",{"type":33,"tag":108,"props":1610,"children":1611},{"style":115},[1612],{"type":38,"value":793},{"type":33,"tag":108,"props":1614,"children":1615},{"class":110,"line":229},[1616,1620,1625,1629,1634,1639,1643,1648,1652,1657],{"type":33,"tag":108,"props":1617,"children":1618},{"style":157},[1619],{"type":38,"value":801},{"type":33,"tag":108,"props":1621,"children":1622},{"style":163},[1623],{"type":38,"value":1624}," segment",{"type":33,"tag":108,"props":1626,"children":1627},{"style":157},[1628],{"type":38,"value":171},{"type":33,"tag":108,"props":1630,"children":1631},{"style":115},[1632],{"type":38,"value":1633}," request.headers.",{"type":33,"tag":108,"props":1635,"children":1636},{"style":127},[1637],{"type":38,"value":1638},"get",{"type":33,"tag":108,"props":1640,"children":1641},{"style":115},[1642],{"type":38,"value":186},{"type":33,"tag":108,"props":1644,"children":1645},{"style":189},[1646],{"type":38,"value":1647},"'x-user-segment'",{"type":33,"tag":108,"props":1649,"children":1650},{"style":115},[1651],{"type":38,"value":872},{"type":33,"tag":108,"props":1653,"children":1654},{"style":157},[1655],{"type":38,"value":1656},"||",{"type":33,"tag":108,"props":1658,"children":1659},{"style":189},[1660],{"type":38,"value":1661}," 'default'\n",{"type":33,"tag":108,"props":1663,"children":1664},{"class":110,"line":238},[1665,1669,1674,1678,1683,1688],{"type":33,"tag":108,"props":1666,"children":1667},{"style":157},[1668],{"type":38,"value":801},{"type":33,"tag":108,"props":1670,"children":1671},{"style":163},[1672],{"type":38,"value":1673}," response",{"type":33,"tag":108,"props":1675,"children":1676},{"style":157},[1677],{"type":38,"value":171},{"type":33,"tag":108,"props":1679,"children":1680},{"style":115},[1681],{"type":38,"value":1682}," NextResponse.",{"type":33,"tag":108,"props":1684,"children":1685},{"style":127},[1686],{"type":38,"value":1687},"next",{"type":33,"tag":108,"props":1689,"children":1690},{"style":115},[1691],{"type":38,"value":1692},"()\n",{"type":33,"tag":108,"props":1694,"children":1695},{"class":110,"line":255},[1696,1701,1706,1710,1715],{"type":33,"tag":108,"props":1697,"children":1698},{"style":115},[1699],{"type":38,"value":1700},"  response.headers.",{"type":33,"tag":108,"props":1702,"children":1703},{"style":127},[1704],{"type":38,"value":1705},"set",{"type":33,"tag":108,"props":1707,"children":1708},{"style":115},[1709],{"type":38,"value":186},{"type":33,"tag":108,"props":1711,"children":1712},{"style":189},[1713],{"type":38,"value":1714},"'x-personalization'",{"type":33,"tag":108,"props":1716,"children":1717},{"style":115},[1718],{"type":38,"value":1719},", segment)\n",{"type":33,"tag":108,"props":1721,"children":1722},{"class":110,"line":265},[1723,1727],{"type":33,"tag":108,"props":1724,"children":1725},{"style":157},[1726],{"type":38,"value":837},{"type":33,"tag":108,"props":1728,"children":1729},{"style":115},[1730],{"type":38,"value":1731}," response\n",{"type":33,"tag":108,"props":1733,"children":1734},{"class":110,"line":27},[1735],{"type":33,"tag":108,"props":1736,"children":1737},{"style":115},[1738],{"type":38,"value":909},{"type":33,"tag":34,"props":1740,"children":1741},{},[1742],{"type":38,"value":1743},"Die Server-Komponente liest diesen Header und rendert segment-spezifische Daten. Der Cache-Key enthält das Segment, also hat jedes Segment einen eigenen Cache-Eintrag.",{"type":33,"tag":50,"props":1745,"children":1747},{"id":1746},"framework-wahl-2026-next-nuxt-remix-wer-wo",[1748],{"type":38,"value":1749},"Framework-Wahl 2026: Next, Nuxt, Remix — wer wo?",{"type":33,"tag":34,"props":1751,"children":1752},{},[1753],{"type":38,"value":1754},"RSC ist nicht länger framework-agnostisch — jedes Framework bringt eigene Interpretation:",{"type":33,"tag":1409,"props":1756,"children":1757},{},[1758,1768,1785,1795],{"type":33,"tag":1413,"props":1759,"children":1760},{},[1761,1766],{"type":33,"tag":1403,"props":1762,"children":1763},{},[1764],{"type":38,"value":1765},"Next.js 15:",{"type":38,"value":1767}," Reifteste RSC-Unterstützung, App Router stabil, Server Action 1st-Class. Tradeoff: Vercel-Lock-in-Risiko, Self-Host-Edge-Runtime schwierig.",{"type":33,"tag":1413,"props":1769,"children":1770},{},[1771,1776,1778,1783],{"type":33,"tag":1403,"props":1772,"children":1773},{},[1774],{"type":38,"value":1775},"Nuxt 3.12:",{"type":38,"value":1777}," Mit Vue 3.5 ",{"type":33,"tag":41,"props":1779,"children":1781},{"className":1780},[],[1782],{"type":38,"value":46},{"type":38,"value":1784},", Nitro-Server unified. Tradeoff: Nicht so granular wie RSC, keine component-level Server\u002FClient-Aufteilung.",{"type":33,"tag":1413,"props":1786,"children":1787},{},[1788,1793],{"type":33,"tag":1403,"props":1789,"children":1790},{},[1791],{"type":38,"value":1792},"Remix 2.8:",{"type":38,"value":1794}," Loader\u002FAction-Pattern ähnelt RSC, aber Client-Component-Abgrenzung nicht so präzise. Tradeoff: SPA-Navigation schnell, Initial-Load langsam.",{"type":33,"tag":1413,"props":1796,"children":1797},{},[1798,1803,1805,1811],{"type":33,"tag":1403,"props":1799,"children":1800},{},[1801],{"type":38,"value":1802},"SvelteKit 2.5:",{"type":38,"value":1804}," ",{"type":33,"tag":41,"props":1806,"children":1808},{"className":1807},[],[1809],{"type":38,"value":1810},"+page.server.ts",{"type":38,"value":1812},"-Pattern analog RSC. Tradeoff: Svelte-5-Runes, Ecosystem-Adoption noch niedrig.",{"type":33,"tag":34,"props":1814,"children":1815},{},[1816],{"type":38,"value":1817},"Bei Roibase Projekten 2026: 60% Next.js, 30% Nuxt, 10% Remix. Entscheidungskriterium: Bestehendes Stack (React vs Vue), Team-Kenntnisse, Deployment-Target (Vercel\u002FCloudflare\u002FSelf-Host).",{"type":33,"tag":34,"props":1819,"children":1820},{},[1821],{"type":38,"value":1822},"Server-Component-Architektur ist jetzt Standard — die Frage ist nicht mehr „sollte ich?\", sondern „wie optimiere ich?\". Die obige Entscheidungsmatrix und Tradeoff-Landkarte bindet jede Component-Entscheidung an numerische Kriterien. 2026: Die richtige Grenzziehung heißt, TBT \u003C 200ms und LCP \u003C 1,5s zu erreichen — Server Components sind der fundamentale Weg dahin.",{"type":33,"tag":1824,"props":1825,"children":1826},"style",{},[1827],{"type":38,"value":1828},"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":17,"searchDepth":153,"depth":153,"links":1830},[1831,1832,1835,1836,1837,1838],{"id":52,"depth":143,"text":55},{"id":73,"depth":143,"text":76,"children":1833},[1834],{"id":667,"depth":153,"text":670},{"id":1229,"depth":143,"text":1232},{"id":1390,"depth":143,"text":1393},{"id":1492,"depth":143,"text":1495},{"id":1746,"depth":143,"text":1749},"markdown","content:de:tech:server-components-vs-client-drawing-the-line-in-2026.md","content","de\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026.md","de\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026","md",1785247475955]