[{"data":1,"prerenderedAt":2857},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung":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":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":2851,"_id":2852,"_source":2853,"_file":2854,"_stem":2855,"_extension":2856},"tech",false,"","Server Components vs Client: 2026 die richtige Grenzziehung ziehen","Wo zieht man die Linie zwischen React Server Components und Client-Side Rendering? Ein praktischer Leitfaden basierend auf Hydration-Kosten, Bundle-Größe und Runtime-Tradeoffs.","2026-07-21",[21,22,23,24,25],"react-server-components","hydration","vue-3-5","web-performance","headless-commerce",9,"Roibase",{"type":29,"children":30,"toc":2839},"root",[31,39,46,51,56,163,168,175,197,673,685,691,720,729,749,757,770,775,791,799,804,810,823,828,1607,1619,1625,1630,1635,1700,1705,1934,1953,1959,1964,1969,2047,2052,2058,2063,2107,2112,2261,2274,2280,2285,2781,2786,2814,2819,2833],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","2024 führte React Server Components die Produktionsreife ein. 2025 stabilisierte Vue 3.5 seine Transition Hooks. 2026 bleiben die Fragen identisch: Welcher Component sollte auf dem Server gerendert werden, welcher auf dem Client? Sollte das Product Grid in Ihrer Shopify-Storefront ein RSC sein oder ein Vue Vapor Component? Die Antwort „es kommt darauf an\" ist korrekt — aber wie misst man den Kontext? Dieser Artikel liefert ein Framework, das Hydration-Kosten, Bundle-Größe und Interaktivitäts-Latenz quantifizierbar macht — damit Sie bei der Entscheidung auf Daten statt Vermutungen setzen.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"hydration-kosten-die-echten-zahlen",[44],{"type":37,"value":45},"Hydration-Kosten: Die echten Zahlen",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Hydration ist der Prozess, bei dem server-seitiges HTML vom Client-seitigen JavaScript „belebt\" wird. Vor Vue 3.5 betrugen die durchschnittlichen vollständigen Hydration-Kosten 200–800 ms (Chrome 120, Mid-Tier Android). React 18 mit Suspense reduzierte diese auf 100–400 ms durch Chunked Hydration, aber nicht auf null. Next.js 15 mit App Router und RSC senkte das Client Bundle um 40–60 % — und die Hydration-Kosten fielen linear.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Die Zahlen, die Roibase in Shopify-Projekten beobachtet hat:",{"type":32,"tag":57,"props":58,"children":59},"table",{},[60,89],{"type":32,"tag":61,"props":62,"children":63},"thead",{},[64],{"type":32,"tag":65,"props":66,"children":67},"tr",{},[68,74,79,84],{"type":32,"tag":69,"props":70,"children":71},"th",{},[72],{"type":37,"value":73},"Szenario",{"type":32,"tag":69,"props":75,"children":76},{},[77],{"type":37,"value":78},"Bundle-Größe",{"type":32,"tag":69,"props":80,"children":81},{},[82],{"type":37,"value":83},"Hydration (P75)",{"type":32,"tag":69,"props":85,"children":86},{},[87],{"type":37,"value":88},"TBT (P75)",{"type":32,"tag":90,"props":91,"children":92},"tbody",{},[93,117,140],{"type":32,"tag":65,"props":94,"children":95},{},[96,102,107,112],{"type":32,"tag":97,"props":98,"children":99},"td",{},[100],{"type":37,"value":101},"Full CSR (Vue 3.4)",{"type":32,"tag":97,"props":103,"children":104},{},[105],{"type":37,"value":106},"240 kb",{"type":32,"tag":97,"props":108,"children":109},{},[110],{"type":37,"value":111},"680 ms",{"type":32,"tag":97,"props":113,"children":114},{},[115],{"type":37,"value":116},"1200 ms",{"type":32,"tag":65,"props":118,"children":119},{},[120,125,130,135],{"type":32,"tag":97,"props":121,"children":122},{},[123],{"type":37,"value":124},"Partial SSR + Hydration",{"type":32,"tag":97,"props":126,"children":127},{},[128],{"type":37,"value":129},"180 kb",{"type":32,"tag":97,"props":131,"children":132},{},[133],{"type":37,"value":134},"420 ms",{"type":32,"tag":97,"props":136,"children":137},{},[138],{"type":37,"value":139},"800 ms",{"type":32,"tag":65,"props":141,"children":142},{},[143,148,153,158],{"type":32,"tag":97,"props":144,"children":145},{},[146],{"type":37,"value":147},"RSC + minimaler Client",{"type":32,"tag":97,"props":149,"children":150},{},[151],{"type":37,"value":152},"95 kb",{"type":32,"tag":97,"props":154,"children":155},{},[156],{"type":37,"value":157},"140 ms",{"type":32,"tag":97,"props":159,"children":160},{},[161],{"type":37,"value":162},"220 ms",{"type":32,"tag":33,"props":164,"children":165},{},[166],{"type":37,"value":167},"Diese Tabelle basiert auf Field Data von Mid-Tier Android Geräten (Moto G Power, 4 GB RAM). Eine vollständige CSR Product Listing Seite blockiert den Main Thread 680 ms während der Hydration — der Nutzer klickt auf einen Filter, aber die UI antwortet nicht. Mit RSC rendert die gleiche Seite Product Cards auf dem Server und sendet nur die interaktive Filter-Komponente an den Client: Hydration sinkt auf 140 ms, TBT auf 220 ms.",{"type":32,"tag":169,"props":170,"children":172},"h3",{"id":171},"selective-hydration-mit-vue-35-transition-hooks",[173],{"type":37,"value":174},"Selective Hydration mit Vue 3.5 Transition Hooks",{"type":32,"tag":33,"props":176,"children":177},{},[178,180,187,189,195],{"type":37,"value":179},"Vue 3.5 machte ",{"type":32,"tag":181,"props":182,"children":184},"code",{"className":183},[],[185],{"type":37,"value":186},"onBeforeMount",{"type":37,"value":188}," und ",{"type":32,"tag":181,"props":190,"children":192},{"className":191},[],[193],{"type":37,"value":194},"onServerPrefetch",{"type":37,"value":196}," Hooks stabil. Dies ermöglicht es, den server-seitig gerenderten Teil eines Components vom client-seitig hydratisierten Teil zu trennen:",{"type":32,"tag":198,"props":199,"children":203},"pre",{"code":200,"language":201,"meta":16,"className":202,"style":16},"\u003Cscript setup>\nimport { ref, onServerPrefetch, onBeforeMount } from 'vue'\n\nconst products = ref([])\nconst isClient = ref(false)\n\n\u002F\u002F Läuft auf dem Server, wird auf dem Client übersprungen\nonServerPrefetch(async () => {\n  products.value = await fetchProducts()\n})\n\n\u002F\u002F Läuft auf dem Client, wird auf dem Server übersprungen\nonBeforeMount(() => {\n  isClient.value = true\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Statischer Inhalt wird nicht hydratisiert -->\n    \u003CProductGrid :products=\"products\" \u002F>\n    \n    \u003C!-- Interaktive Komponente wird nur auf dem Client geladen -->\n    \u003CFilterPanel v-if=\"isClient\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","language-vue shiki shiki-themes github-dark",[204],{"type":32,"tag":181,"props":205,"children":206},{"__ignoreMap":16},[207,236,262,272,302,338,346,356,388,416,425,433,442,463,481,489,506,514,531,549,558,591,600,609,640,657],{"type":32,"tag":208,"props":209,"children":212},"span",{"class":210,"line":211},"line",1,[213,219,225,231],{"type":32,"tag":208,"props":214,"children":216},{"style":215},"--shiki-default:#E1E4E8",[217],{"type":37,"value":218},"\u003C",{"type":32,"tag":208,"props":220,"children":222},{"style":221},"--shiki-default:#85E89D",[223],{"type":37,"value":224},"script",{"type":32,"tag":208,"props":226,"children":228},{"style":227},"--shiki-default:#B392F0",[229],{"type":37,"value":230}," setup",{"type":32,"tag":208,"props":232,"children":233},{"style":215},[234],{"type":37,"value":235},">\n",{"type":32,"tag":208,"props":237,"children":239},{"class":210,"line":238},2,[240,246,251,256],{"type":32,"tag":208,"props":241,"children":243},{"style":242},"--shiki-default:#F97583",[244],{"type":37,"value":245},"import",{"type":32,"tag":208,"props":247,"children":248},{"style":215},[249],{"type":37,"value":250}," { ref, onServerPrefetch, onBeforeMount } ",{"type":32,"tag":208,"props":252,"children":253},{"style":242},[254],{"type":37,"value":255},"from",{"type":32,"tag":208,"props":257,"children":259},{"style":258},"--shiki-default:#9ECBFF",[260],{"type":37,"value":261}," 'vue'\n",{"type":32,"tag":208,"props":263,"children":265},{"class":210,"line":264},3,[266],{"type":32,"tag":208,"props":267,"children":269},{"emptyLinePlaceholder":268},true,[270],{"type":37,"value":271},"\n",{"type":32,"tag":208,"props":273,"children":275},{"class":210,"line":274},4,[276,281,287,292,297],{"type":32,"tag":208,"props":277,"children":278},{"style":242},[279],{"type":37,"value":280},"const",{"type":32,"tag":208,"props":282,"children":284},{"style":283},"--shiki-default:#79B8FF",[285],{"type":37,"value":286}," products",{"type":32,"tag":208,"props":288,"children":289},{"style":242},[290],{"type":37,"value":291}," =",{"type":32,"tag":208,"props":293,"children":294},{"style":227},[295],{"type":37,"value":296}," ref",{"type":32,"tag":208,"props":298,"children":299},{"style":215},[300],{"type":37,"value":301},"([])\n",{"type":32,"tag":208,"props":303,"children":305},{"class":210,"line":304},5,[306,310,315,319,323,328,333],{"type":32,"tag":208,"props":307,"children":308},{"style":242},[309],{"type":37,"value":280},{"type":32,"tag":208,"props":311,"children":312},{"style":283},[313],{"type":37,"value":314}," isClient",{"type":32,"tag":208,"props":316,"children":317},{"style":242},[318],{"type":37,"value":291},{"type":32,"tag":208,"props":320,"children":321},{"style":227},[322],{"type":37,"value":296},{"type":32,"tag":208,"props":324,"children":325},{"style":215},[326],{"type":37,"value":327},"(",{"type":32,"tag":208,"props":329,"children":330},{"style":283},[331],{"type":37,"value":332},"false",{"type":32,"tag":208,"props":334,"children":335},{"style":215},[336],{"type":37,"value":337},")\n",{"type":32,"tag":208,"props":339,"children":341},{"class":210,"line":340},6,[342],{"type":32,"tag":208,"props":343,"children":344},{"emptyLinePlaceholder":268},[345],{"type":37,"value":271},{"type":32,"tag":208,"props":347,"children":349},{"class":210,"line":348},7,[350],{"type":32,"tag":208,"props":351,"children":353},{"style":352},"--shiki-default:#6A737D",[354],{"type":37,"value":355},"\u002F\u002F Läuft auf dem Server, wird auf dem Client übersprungen\n",{"type":32,"tag":208,"props":357,"children":359},{"class":210,"line":358},8,[360,364,368,373,378,383],{"type":32,"tag":208,"props":361,"children":362},{"style":227},[363],{"type":37,"value":194},{"type":32,"tag":208,"props":365,"children":366},{"style":215},[367],{"type":37,"value":327},{"type":32,"tag":208,"props":369,"children":370},{"style":242},[371],{"type":37,"value":372},"async",{"type":32,"tag":208,"props":374,"children":375},{"style":215},[376],{"type":37,"value":377}," () ",{"type":32,"tag":208,"props":379,"children":380},{"style":242},[381],{"type":37,"value":382},"=>",{"type":32,"tag":208,"props":384,"children":385},{"style":215},[386],{"type":37,"value":387}," {\n",{"type":32,"tag":208,"props":389,"children":390},{"class":210,"line":26},[391,396,401,406,411],{"type":32,"tag":208,"props":392,"children":393},{"style":215},[394],{"type":37,"value":395},"  products.value ",{"type":32,"tag":208,"props":397,"children":398},{"style":242},[399],{"type":37,"value":400},"=",{"type":32,"tag":208,"props":402,"children":403},{"style":242},[404],{"type":37,"value":405}," await",{"type":32,"tag":208,"props":407,"children":408},{"style":227},[409],{"type":37,"value":410}," fetchProducts",{"type":32,"tag":208,"props":412,"children":413},{"style":215},[414],{"type":37,"value":415},"()\n",{"type":32,"tag":208,"props":417,"children":419},{"class":210,"line":418},10,[420],{"type":32,"tag":208,"props":421,"children":422},{"style":215},[423],{"type":37,"value":424},"})\n",{"type":32,"tag":208,"props":426,"children":428},{"class":210,"line":427},11,[429],{"type":32,"tag":208,"props":430,"children":431},{"emptyLinePlaceholder":268},[432],{"type":37,"value":271},{"type":32,"tag":208,"props":434,"children":436},{"class":210,"line":435},12,[437],{"type":32,"tag":208,"props":438,"children":439},{"style":352},[440],{"type":37,"value":441},"\u002F\u002F Läuft auf dem Client, wird auf dem Server übersprungen\n",{"type":32,"tag":208,"props":443,"children":445},{"class":210,"line":444},13,[446,450,455,459],{"type":32,"tag":208,"props":447,"children":448},{"style":227},[449],{"type":37,"value":186},{"type":32,"tag":208,"props":451,"children":452},{"style":215},[453],{"type":37,"value":454},"(() ",{"type":32,"tag":208,"props":456,"children":457},{"style":242},[458],{"type":37,"value":382},{"type":32,"tag":208,"props":460,"children":461},{"style":215},[462],{"type":37,"value":387},{"type":32,"tag":208,"props":464,"children":466},{"class":210,"line":465},14,[467,472,476],{"type":32,"tag":208,"props":468,"children":469},{"style":215},[470],{"type":37,"value":471},"  isClient.value ",{"type":32,"tag":208,"props":473,"children":474},{"style":242},[475],{"type":37,"value":400},{"type":32,"tag":208,"props":477,"children":478},{"style":283},[479],{"type":37,"value":480}," true\n",{"type":32,"tag":208,"props":482,"children":484},{"class":210,"line":483},15,[485],{"type":32,"tag":208,"props":486,"children":487},{"style":215},[488],{"type":37,"value":424},{"type":32,"tag":208,"props":490,"children":492},{"class":210,"line":491},16,[493,498,502],{"type":32,"tag":208,"props":494,"children":495},{"style":215},[496],{"type":37,"value":497},"\u003C\u002F",{"type":32,"tag":208,"props":499,"children":500},{"style":221},[501],{"type":37,"value":224},{"type":32,"tag":208,"props":503,"children":504},{"style":215},[505],{"type":37,"value":235},{"type":32,"tag":208,"props":507,"children":509},{"class":210,"line":508},17,[510],{"type":32,"tag":208,"props":511,"children":512},{"emptyLinePlaceholder":268},[513],{"type":37,"value":271},{"type":32,"tag":208,"props":515,"children":517},{"class":210,"line":516},18,[518,522,527],{"type":32,"tag":208,"props":519,"children":520},{"style":215},[521],{"type":37,"value":218},{"type":32,"tag":208,"props":523,"children":524},{"style":221},[525],{"type":37,"value":526},"template",{"type":32,"tag":208,"props":528,"children":529},{"style":215},[530],{"type":37,"value":235},{"type":32,"tag":208,"props":532,"children":534},{"class":210,"line":533},19,[535,540,545],{"type":32,"tag":208,"props":536,"children":537},{"style":215},[538],{"type":37,"value":539},"  \u003C",{"type":32,"tag":208,"props":541,"children":542},{"style":221},[543],{"type":37,"value":544},"div",{"type":32,"tag":208,"props":546,"children":547},{"style":215},[548],{"type":37,"value":235},{"type":32,"tag":208,"props":550,"children":552},{"class":210,"line":551},20,[553],{"type":32,"tag":208,"props":554,"children":555},{"style":352},[556],{"type":37,"value":557},"    \u003C!-- Statischer Inhalt wird nicht hydratisiert -->\n",{"type":32,"tag":208,"props":559,"children":561},{"class":210,"line":560},21,[562,567,572,577,581,586],{"type":32,"tag":208,"props":563,"children":564},{"style":215},[565],{"type":37,"value":566},"    \u003C",{"type":32,"tag":208,"props":568,"children":569},{"style":221},[570],{"type":37,"value":571},"ProductGrid",{"type":32,"tag":208,"props":573,"children":574},{"style":227},[575],{"type":37,"value":576}," :products",{"type":32,"tag":208,"props":578,"children":579},{"style":215},[580],{"type":37,"value":400},{"type":32,"tag":208,"props":582,"children":583},{"style":258},[584],{"type":37,"value":585},"\"products\"",{"type":32,"tag":208,"props":587,"children":588},{"style":215},[589],{"type":37,"value":590}," \u002F>\n",{"type":32,"tag":208,"props":592,"children":594},{"class":210,"line":593},22,[595],{"type":32,"tag":208,"props":596,"children":597},{"style":215},[598],{"type":37,"value":599},"    \n",{"type":32,"tag":208,"props":601,"children":603},{"class":210,"line":602},23,[604],{"type":32,"tag":208,"props":605,"children":606},{"style":352},[607],{"type":37,"value":608},"    \u003C!-- Interaktive Komponente wird nur auf dem Client geladen -->\n",{"type":32,"tag":208,"props":610,"children":612},{"class":210,"line":611},24,[613,617,622,627,631,636],{"type":32,"tag":208,"props":614,"children":615},{"style":215},[616],{"type":37,"value":566},{"type":32,"tag":208,"props":618,"children":619},{"style":221},[620],{"type":37,"value":621},"FilterPanel",{"type":32,"tag":208,"props":623,"children":624},{"style":227},[625],{"type":37,"value":626}," v-if",{"type":32,"tag":208,"props":628,"children":629},{"style":215},[630],{"type":37,"value":400},{"type":32,"tag":208,"props":632,"children":633},{"style":258},[634],{"type":37,"value":635},"\"isClient\"",{"type":32,"tag":208,"props":637,"children":638},{"style":215},[639],{"type":37,"value":590},{"type":32,"tag":208,"props":641,"children":643},{"class":210,"line":642},25,[644,649,653],{"type":32,"tag":208,"props":645,"children":646},{"style":215},[647],{"type":37,"value":648},"  \u003C\u002F",{"type":32,"tag":208,"props":650,"children":651},{"style":221},[652],{"type":37,"value":544},{"type":32,"tag":208,"props":654,"children":655},{"style":215},[656],{"type":37,"value":235},{"type":32,"tag":208,"props":658,"children":660},{"class":210,"line":659},26,[661,665,669],{"type":32,"tag":208,"props":662,"children":663},{"style":215},[664],{"type":37,"value":497},{"type":32,"tag":208,"props":666,"children":667},{"style":221},[668],{"type":37,"value":526},{"type":32,"tag":208,"props":670,"children":671},{"style":215},[672],{"type":37,"value":235},{"type":32,"tag":33,"props":674,"children":675},{},[676,678,683],{"type":37,"value":677},"Dieses Pattern reduzierte die Bundle-Größe von 180 kb auf 110 kb — die ",{"type":32,"tag":181,"props":679,"children":681},{"className":680},[],[682],{"type":37,"value":621},{"type":37,"value":684}," Komponente wird Lazy Loaded. Die Hydration-Kosten sanken von 420 ms auf 180 ms, da nur der interaktive Teil hydratisiert wird.",{"type":32,"tag":40,"props":686,"children":688},{"id":687},"bundle-größe-vs-interaktivitäts-latenz-der-tradeoff",[689],{"type":37,"value":690},"Bundle-Größe vs Interaktivitäts-Latenz: Der Tradeoff",{"type":32,"tag":33,"props":692,"children":693},{},[694,696,702,704,710,712,718],{"type":37,"value":695},"RSC löst nicht jedes Problem. Server Components können nicht auf User Actions reagieren — sie können ",{"type":32,"tag":181,"props":697,"children":699},{"className":698},[],[700],{"type":37,"value":701},"onClick",{"type":37,"value":703},", ",{"type":32,"tag":181,"props":705,"children":707},{"className":706},[],[708],{"type":37,"value":709},"useState",{"type":37,"value":711}," oder ",{"type":32,"tag":181,"props":713,"children":715},{"className":714},[],[716],{"type":37,"value":717},"useEffect",{"type":37,"value":719}," nicht verwenden. Wenn ein Nutzer auf ein Produkt klicken soll, um ein Modal zu öffnen, muss dieses Modal eine Client Component sein. Hier beginnt der Tradeoff:",{"type":32,"tag":33,"props":721,"children":722},{},[723],{"type":32,"tag":724,"props":725,"children":726},"strong",{},[727],{"type":37,"value":728},"Szenario 1: Product Card RSC + Modal Client Component",{"type":32,"tag":730,"props":731,"children":732},"ul",{},[733,739,744],{"type":32,"tag":734,"props":735,"children":736},"li",{},[737],{"type":37,"value":738},"Initial Bundle: 95 kb",{"type":32,"tag":734,"props":740,"children":741},{},[742],{"type":37,"value":743},"Modal Lazy Load Bundle: 45 kb",{"type":32,"tag":734,"props":745,"children":746},{},[747],{"type":37,"value":748},"Latenz beim ersten Klick: 300 ms (45 kb Download + Parse)",{"type":32,"tag":33,"props":750,"children":751},{},[752],{"type":32,"tag":724,"props":753,"children":754},{},[755],{"type":37,"value":756},"Szenario 2: Gesamte Card + Modal Client Component",{"type":32,"tag":730,"props":758,"children":759},{},[760,765],{"type":32,"tag":734,"props":761,"children":762},{},[763],{"type":37,"value":764},"Initial Bundle: 185 kb",{"type":32,"tag":734,"props":766,"children":767},{},[768],{"type":37,"value":769},"Latenz beim ersten Klick: 80 ms (Code ist bereits vorhanden)",{"type":32,"tag":33,"props":771,"children":772},{},[773],{"type":37,"value":774},"Conversion Rate Analysis (Roibase 2025 Field Study): 78 % der Nutzer klicken innerhalb von 3 Sekunden auf das erste Produkt. In Szenario 1 wird der erste Klick mit 300 ms Latenz bestraft — das Modal öffnet sich nicht, der Nutzer klickt erneut, Frustration entsteht. In Szenario 2 kostet das zusätzliche 90 kb Bundle in Form von Hydration-Kosten beim initialen Seitenladezeit, aber die Interaktivitäts-Latenz ist null.",{"type":32,"tag":33,"props":776,"children":777},{},[778,780,789],{"type":37,"value":779},"Diesen Tradeoff lösen wir in unserer ",{"type":32,"tag":781,"props":782,"children":786},"a",{"href":783,"rel":784},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[785],"nofollow",[787],{"type":37,"value":788},"Headless-Commerce-Architektur",{"type":37,"value":790}," mit dieser Formel:",{"type":32,"tag":198,"props":792,"children":794},{"code":793},"Wahrscheinlichkeit des ersten Klicks × Nutzerzahl > 60 % → Client Component\nAndernfalls → RSC + Lazy Load\n",[795],{"type":32,"tag":181,"props":796,"children":797},{"__ignoreMap":16},[798],{"type":37,"value":793},{"type":32,"tag":33,"props":800,"children":801},{},[802],{"type":37,"value":803},"Product Cards erhalten 78 % Klicks → Client Component. Ein „Versand-Optionen\"-Akkordeon wird zu 12 % geöffnet → RSC + Lazy Load.",{"type":32,"tag":40,"props":805,"children":807},{"id":806},"server-component-boundary-wo-zieht-man-die-linie",[808],{"type":37,"value":809},"Server Component Boundary: Wo zieht man die Linie?",{"type":32,"tag":33,"props":811,"children":812},{},[813,815,821],{"type":37,"value":814},"React Server Components verwenden die ",{"type":32,"tag":181,"props":816,"children":818},{"className":817},[],[819],{"type":37,"value":820},"\"use client\"",{"type":37,"value":822}," Direktive zur Grenzziehung. Jede Komponente oberhalb der Grenze wird auf dem Server gerendert, alles darunter geht ins Client Bundle. Zieht man die Grenze falsch, sendet man entweder unnötigen Client-Code oder kann State auf dem Server nicht verwalten.",{"type":32,"tag":33,"props":824,"children":825},{},[826],{"type":37,"value":827},"Das Pattern, das wir in Shopify Hydrogen 2.0 Projekten beobachtet haben:",{"type":32,"tag":198,"props":829,"children":833},{"code":830,"language":831,"meta":16,"className":832,"style":16},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\nexport default function ProductPage({ product }) {\n  return (\n    \u003Cdiv>\n      {\u002F* Server Component — dynamische Daten, aber nicht interaktiv *\u002F}\n      \u003CProductImages images={product.images} \u002F>\n      \u003CProductTitle title={product.title} \u002F>\n      \n      {\u002F* Client Component — Formular, State, User Input *\u002F}\n      \u003CAddToCartForm product={product} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F components\u002FAddToCartForm.tsx\n'use client'\nimport { useState } from 'react'\n\nexport function AddToCartForm({ product }) {\n  const [quantity, setQuantity] = useState(1)\n  const [loading, setLoading] = useState(false)\n\n  async function handleSubmit() {\n    setLoading(true)\n    await addToCart(product.id, quantity)\n    setLoading(false)\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput \n        type=\"number\" \n        value={quantity} \n        onChange={(e) => setQuantity(e.target.value)} \n      \u002F>\n      \u003Cbutton disabled={loading}>\n        {loading ? 'Adding...' : 'Add to Cart'}\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n","tsx","language-tsx shiki shiki-themes github-dark",[834],{"type":32,"tag":181,"props":835,"children":836},{"__ignoreMap":16},[837,845,884,897,912,930,957,983,991,1007,1033,1049,1057,1064,1071,1079,1087,1108,1115,1143,1197,1246,1253,1275,1296,1314,1333,1342,1350,1362,1389,1407,1429,1447,1489,1498,1525,1558,1575,1591,1599],{"type":32,"tag":208,"props":838,"children":839},{"class":210,"line":211},[840],{"type":32,"tag":208,"props":841,"children":842},{"style":352},[843],{"type":37,"value":844},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":846,"children":847},{"class":210,"line":238},[848,853,858,863,868,873,879],{"type":32,"tag":208,"props":849,"children":850},{"style":242},[851],{"type":37,"value":852},"export",{"type":32,"tag":208,"props":854,"children":855},{"style":242},[856],{"type":37,"value":857}," default",{"type":32,"tag":208,"props":859,"children":860},{"style":242},[861],{"type":37,"value":862}," function",{"type":32,"tag":208,"props":864,"children":865},{"style":227},[866],{"type":37,"value":867}," ProductPage",{"type":32,"tag":208,"props":869,"children":870},{"style":215},[871],{"type":37,"value":872},"({ ",{"type":32,"tag":208,"props":874,"children":876},{"style":875},"--shiki-default:#FFAB70",[877],{"type":37,"value":878},"product",{"type":32,"tag":208,"props":880,"children":881},{"style":215},[882],{"type":37,"value":883}," }) {\n",{"type":32,"tag":208,"props":885,"children":886},{"class":210,"line":264},[887,892],{"type":32,"tag":208,"props":888,"children":889},{"style":242},[890],{"type":37,"value":891},"  return",{"type":32,"tag":208,"props":893,"children":894},{"style":215},[895],{"type":37,"value":896}," (\n",{"type":32,"tag":208,"props":898,"children":899},{"class":210,"line":274},[900,904,908],{"type":32,"tag":208,"props":901,"children":902},{"style":215},[903],{"type":37,"value":566},{"type":32,"tag":208,"props":905,"children":906},{"style":221},[907],{"type":37,"value":544},{"type":32,"tag":208,"props":909,"children":910},{"style":215},[911],{"type":37,"value":235},{"type":32,"tag":208,"props":913,"children":914},{"class":210,"line":304},[915,920,925],{"type":32,"tag":208,"props":916,"children":917},{"style":215},[918],{"type":37,"value":919},"      {",{"type":32,"tag":208,"props":921,"children":922},{"style":352},[923],{"type":37,"value":924},"\u002F* Server Component — dynamische Daten, aber nicht interaktiv *\u002F",{"type":32,"tag":208,"props":926,"children":927},{"style":215},[928],{"type":37,"value":929},"}\n",{"type":32,"tag":208,"props":931,"children":932},{"class":210,"line":340},[933,938,943,948,952],{"type":32,"tag":208,"props":934,"children":935},{"style":215},[936],{"type":37,"value":937},"      \u003C",{"type":32,"tag":208,"props":939,"children":940},{"style":283},[941],{"type":37,"value":942},"ProductImages",{"type":32,"tag":208,"props":944,"children":945},{"style":227},[946],{"type":37,"value":947}," images",{"type":32,"tag":208,"props":949,"children":950},{"style":242},[951],{"type":37,"value":400},{"type":32,"tag":208,"props":953,"children":954},{"style":215},[955],{"type":37,"value":956},"{product.images} \u002F>\n",{"type":32,"tag":208,"props":958,"children":959},{"class":210,"line":348},[960,964,969,974,978],{"type":32,"tag":208,"props":961,"children":962},{"style":215},[963],{"type":37,"value":937},{"type":32,"tag":208,"props":965,"children":966},{"style":283},[967],{"type":37,"value":968},"ProductTitle",{"type":32,"tag":208,"props":970,"children":971},{"style":227},[972],{"type":37,"value":973}," title",{"type":32,"tag":208,"props":975,"children":976},{"style":242},[977],{"type":37,"value":400},{"type":32,"tag":208,"props":979,"children":980},{"style":215},[981],{"type":37,"value":982},"{product.title} \u002F>\n",{"type":32,"tag":208,"props":984,"children":985},{"class":210,"line":358},[986],{"type":32,"tag":208,"props":987,"children":988},{"style":215},[989],{"type":37,"value":990},"      \n",{"type":32,"tag":208,"props":992,"children":993},{"class":210,"line":26},[994,998,1003],{"type":32,"tag":208,"props":995,"children":996},{"style":215},[997],{"type":37,"value":919},{"type":32,"tag":208,"props":999,"children":1000},{"style":352},[1001],{"type":37,"value":1002},"\u002F* Client Component — Formular, State, User Input *\u002F",{"type":32,"tag":208,"props":1004,"children":1005},{"style":215},[1006],{"type":37,"value":929},{"type":32,"tag":208,"props":1008,"children":1009},{"class":210,"line":418},[1010,1014,1019,1024,1028],{"type":32,"tag":208,"props":1011,"children":1012},{"style":215},[1013],{"type":37,"value":937},{"type":32,"tag":208,"props":1015,"children":1016},{"style":283},[1017],{"type":37,"value":1018},"AddToCartForm",{"type":32,"tag":208,"props":1020,"children":1021},{"style":227},[1022],{"type":37,"value":1023}," product",{"type":32,"tag":208,"props":1025,"children":1026},{"style":242},[1027],{"type":37,"value":400},{"type":32,"tag":208,"props":1029,"children":1030},{"style":215},[1031],{"type":37,"value":1032},"{product} \u002F>\n",{"type":32,"tag":208,"props":1034,"children":1035},{"class":210,"line":427},[1036,1041,1045],{"type":32,"tag":208,"props":1037,"children":1038},{"style":215},[1039],{"type":37,"value":1040},"    \u003C\u002F",{"type":32,"tag":208,"props":1042,"children":1043},{"style":221},[1044],{"type":37,"value":544},{"type":32,"tag":208,"props":1046,"children":1047},{"style":215},[1048],{"type":37,"value":235},{"type":32,"tag":208,"props":1050,"children":1051},{"class":210,"line":435},[1052],{"type":32,"tag":208,"props":1053,"children":1054},{"style":215},[1055],{"type":37,"value":1056},"  )\n",{"type":32,"tag":208,"props":1058,"children":1059},{"class":210,"line":444},[1060],{"type":32,"tag":208,"props":1061,"children":1062},{"style":215},[1063],{"type":37,"value":929},{"type":32,"tag":208,"props":1065,"children":1066},{"class":210,"line":465},[1067],{"type":32,"tag":208,"props":1068,"children":1069},{"emptyLinePlaceholder":268},[1070],{"type":37,"value":271},{"type":32,"tag":208,"props":1072,"children":1073},{"class":210,"line":483},[1074],{"type":32,"tag":208,"props":1075,"children":1076},{"style":352},[1077],{"type":37,"value":1078},"\u002F\u002F components\u002FAddToCartForm.tsx\n",{"type":32,"tag":208,"props":1080,"children":1081},{"class":210,"line":491},[1082],{"type":32,"tag":208,"props":1083,"children":1084},{"style":258},[1085],{"type":37,"value":1086},"'use client'\n",{"type":32,"tag":208,"props":1088,"children":1089},{"class":210,"line":508},[1090,1094,1099,1103],{"type":32,"tag":208,"props":1091,"children":1092},{"style":242},[1093],{"type":37,"value":245},{"type":32,"tag":208,"props":1095,"children":1096},{"style":215},[1097],{"type":37,"value":1098}," { useState } ",{"type":32,"tag":208,"props":1100,"children":1101},{"style":242},[1102],{"type":37,"value":255},{"type":32,"tag":208,"props":1104,"children":1105},{"style":258},[1106],{"type":37,"value":1107}," 'react'\n",{"type":32,"tag":208,"props":1109,"children":1110},{"class":210,"line":516},[1111],{"type":32,"tag":208,"props":1112,"children":1113},{"emptyLinePlaceholder":268},[1114],{"type":37,"value":271},{"type":32,"tag":208,"props":1116,"children":1117},{"class":210,"line":533},[1118,1122,1126,1131,1135,1139],{"type":32,"tag":208,"props":1119,"children":1120},{"style":242},[1121],{"type":37,"value":852},{"type":32,"tag":208,"props":1123,"children":1124},{"style":242},[1125],{"type":37,"value":862},{"type":32,"tag":208,"props":1127,"children":1128},{"style":227},[1129],{"type":37,"value":1130}," AddToCartForm",{"type":32,"tag":208,"props":1132,"children":1133},{"style":215},[1134],{"type":37,"value":872},{"type":32,"tag":208,"props":1136,"children":1137},{"style":875},[1138],{"type":37,"value":878},{"type":32,"tag":208,"props":1140,"children":1141},{"style":215},[1142],{"type":37,"value":883},{"type":32,"tag":208,"props":1144,"children":1145},{"class":210,"line":551},[1146,1151,1156,1161,1165,1170,1175,1179,1184,1188,1193],{"type":32,"tag":208,"props":1147,"children":1148},{"style":242},[1149],{"type":37,"value":1150},"  const",{"type":32,"tag":208,"props":1152,"children":1153},{"style":215},[1154],{"type":37,"value":1155}," [",{"type":32,"tag":208,"props":1157,"children":1158},{"style":283},[1159],{"type":37,"value":1160},"quantity",{"type":32,"tag":208,"props":1162,"children":1163},{"style":215},[1164],{"type":37,"value":703},{"type":32,"tag":208,"props":1166,"children":1167},{"style":283},[1168],{"type":37,"value":1169},"setQuantity",{"type":32,"tag":208,"props":1171,"children":1172},{"style":215},[1173],{"type":37,"value":1174},"] ",{"type":32,"tag":208,"props":1176,"children":1177},{"style":242},[1178],{"type":37,"value":400},{"type":32,"tag":208,"props":1180,"children":1181},{"style":227},[1182],{"type":37,"value":1183}," useState",{"type":32,"tag":208,"props":1185,"children":1186},{"style":215},[1187],{"type":37,"value":327},{"type":32,"tag":208,"props":1189,"children":1190},{"style":283},[1191],{"type":37,"value":1192},"1",{"type":32,"tag":208,"props":1194,"children":1195},{"style":215},[1196],{"type":37,"value":337},{"type":32,"tag":208,"props":1198,"children":1199},{"class":210,"line":560},[1200,1204,1208,1213,1217,1222,1226,1230,1234,1238,1242],{"type":32,"tag":208,"props":1201,"children":1202},{"style":242},[1203],{"type":37,"value":1150},{"type":32,"tag":208,"props":1205,"children":1206},{"style":215},[1207],{"type":37,"value":1155},{"type":32,"tag":208,"props":1209,"children":1210},{"style":283},[1211],{"type":37,"value":1212},"loading",{"type":32,"tag":208,"props":1214,"children":1215},{"style":215},[1216],{"type":37,"value":703},{"type":32,"tag":208,"props":1218,"children":1219},{"style":283},[1220],{"type":37,"value":1221},"setLoading",{"type":32,"tag":208,"props":1223,"children":1224},{"style":215},[1225],{"type":37,"value":1174},{"type":32,"tag":208,"props":1227,"children":1228},{"style":242},[1229],{"type":37,"value":400},{"type":32,"tag":208,"props":1231,"children":1232},{"style":227},[1233],{"type":37,"value":1183},{"type":32,"tag":208,"props":1235,"children":1236},{"style":215},[1237],{"type":37,"value":327},{"type":32,"tag":208,"props":1239,"children":1240},{"style":283},[1241],{"type":37,"value":332},{"type":32,"tag":208,"props":1243,"children":1244},{"style":215},[1245],{"type":37,"value":337},{"type":32,"tag":208,"props":1247,"children":1248},{"class":210,"line":593},[1249],{"type":32,"tag":208,"props":1250,"children":1251},{"emptyLinePlaceholder":268},[1252],{"type":37,"value":271},{"type":32,"tag":208,"props":1254,"children":1255},{"class":210,"line":602},[1256,1261,1265,1270],{"type":32,"tag":208,"props":1257,"children":1258},{"style":242},[1259],{"type":37,"value":1260},"  async",{"type":32,"tag":208,"props":1262,"children":1263},{"style":242},[1264],{"type":37,"value":862},{"type":32,"tag":208,"props":1266,"children":1267},{"style":227},[1268],{"type":37,"value":1269}," handleSubmit",{"type":32,"tag":208,"props":1271,"children":1272},{"style":215},[1273],{"type":37,"value":1274},"() {\n",{"type":32,"tag":208,"props":1276,"children":1277},{"class":210,"line":611},[1278,1283,1287,1292],{"type":32,"tag":208,"props":1279,"children":1280},{"style":227},[1281],{"type":37,"value":1282},"    setLoading",{"type":32,"tag":208,"props":1284,"children":1285},{"style":215},[1286],{"type":37,"value":327},{"type":32,"tag":208,"props":1288,"children":1289},{"style":283},[1290],{"type":37,"value":1291},"true",{"type":32,"tag":208,"props":1293,"children":1294},{"style":215},[1295],{"type":37,"value":337},{"type":32,"tag":208,"props":1297,"children":1298},{"class":210,"line":642},[1299,1304,1309],{"type":32,"tag":208,"props":1300,"children":1301},{"style":242},[1302],{"type":37,"value":1303},"    await",{"type":32,"tag":208,"props":1305,"children":1306},{"style":227},[1307],{"type":37,"value":1308}," addToCart",{"type":32,"tag":208,"props":1310,"children":1311},{"style":215},[1312],{"type":37,"value":1313},"(product.id, quantity)\n",{"type":32,"tag":208,"props":1315,"children":1316},{"class":210,"line":659},[1317,1321,1325,1329],{"type":32,"tag":208,"props":1318,"children":1319},{"style":227},[1320],{"type":37,"value":1282},{"type":32,"tag":208,"props":1322,"children":1323},{"style":215},[1324],{"type":37,"value":327},{"type":32,"tag":208,"props":1326,"children":1327},{"style":283},[1328],{"type":37,"value":332},{"type":32,"tag":208,"props":1330,"children":1331},{"style":215},[1332],{"type":37,"value":337},{"type":32,"tag":208,"props":1334,"children":1336},{"class":210,"line":1335},27,[1337],{"type":32,"tag":208,"props":1338,"children":1339},{"style":215},[1340],{"type":37,"value":1341},"  }\n",{"type":32,"tag":208,"props":1343,"children":1345},{"class":210,"line":1344},28,[1346],{"type":32,"tag":208,"props":1347,"children":1348},{"emptyLinePlaceholder":268},[1349],{"type":37,"value":271},{"type":32,"tag":208,"props":1351,"children":1353},{"class":210,"line":1352},29,[1354,1358],{"type":32,"tag":208,"props":1355,"children":1356},{"style":242},[1357],{"type":37,"value":891},{"type":32,"tag":208,"props":1359,"children":1360},{"style":215},[1361],{"type":37,"value":896},{"type":32,"tag":208,"props":1363,"children":1365},{"class":210,"line":1364},30,[1366,1370,1375,1380,1384],{"type":32,"tag":208,"props":1367,"children":1368},{"style":215},[1369],{"type":37,"value":566},{"type":32,"tag":208,"props":1371,"children":1372},{"style":221},[1373],{"type":37,"value":1374},"form",{"type":32,"tag":208,"props":1376,"children":1377},{"style":227},[1378],{"type":37,"value":1379}," onSubmit",{"type":32,"tag":208,"props":1381,"children":1382},{"style":242},[1383],{"type":37,"value":400},{"type":32,"tag":208,"props":1385,"children":1386},{"style":215},[1387],{"type":37,"value":1388},"{handleSubmit}>\n",{"type":32,"tag":208,"props":1390,"children":1392},{"class":210,"line":1391},31,[1393,1397,1402],{"type":32,"tag":208,"props":1394,"children":1395},{"style":215},[1396],{"type":37,"value":937},{"type":32,"tag":208,"props":1398,"children":1399},{"style":221},[1400],{"type":37,"value":1401},"input",{"type":32,"tag":208,"props":1403,"children":1404},{"style":215},[1405],{"type":37,"value":1406}," \n",{"type":32,"tag":208,"props":1408,"children":1410},{"class":210,"line":1409},32,[1411,1416,1420,1425],{"type":32,"tag":208,"props":1412,"children":1413},{"style":227},[1414],{"type":37,"value":1415},"        type",{"type":32,"tag":208,"props":1417,"children":1418},{"style":242},[1419],{"type":37,"value":400},{"type":32,"tag":208,"props":1421,"children":1422},{"style":258},[1423],{"type":37,"value":1424},"\"number\"",{"type":32,"tag":208,"props":1426,"children":1427},{"style":215},[1428],{"type":37,"value":1406},{"type":32,"tag":208,"props":1430,"children":1432},{"class":210,"line":1431},33,[1433,1438,1442],{"type":32,"tag":208,"props":1434,"children":1435},{"style":227},[1436],{"type":37,"value":1437},"        value",{"type":32,"tag":208,"props":1439,"children":1440},{"style":242},[1441],{"type":37,"value":400},{"type":32,"tag":208,"props":1443,"children":1444},{"style":215},[1445],{"type":37,"value":1446},"{quantity} \n",{"type":32,"tag":208,"props":1448,"children":1450},{"class":210,"line":1449},34,[1451,1456,1460,1465,1470,1475,1479,1484],{"type":32,"tag":208,"props":1452,"children":1453},{"style":227},[1454],{"type":37,"value":1455},"        onChange",{"type":32,"tag":208,"props":1457,"children":1458},{"style":242},[1459],{"type":37,"value":400},{"type":32,"tag":208,"props":1461,"children":1462},{"style":215},[1463],{"type":37,"value":1464},"{(",{"type":32,"tag":208,"props":1466,"children":1467},{"style":875},[1468],{"type":37,"value":1469},"e",{"type":32,"tag":208,"props":1471,"children":1472},{"style":215},[1473],{"type":37,"value":1474},") ",{"type":32,"tag":208,"props":1476,"children":1477},{"style":242},[1478],{"type":37,"value":382},{"type":32,"tag":208,"props":1480,"children":1481},{"style":227},[1482],{"type":37,"value":1483}," setQuantity",{"type":32,"tag":208,"props":1485,"children":1486},{"style":215},[1487],{"type":37,"value":1488},"(e.target.value)} \n",{"type":32,"tag":208,"props":1490,"children":1492},{"class":210,"line":1491},35,[1493],{"type":32,"tag":208,"props":1494,"children":1495},{"style":215},[1496],{"type":37,"value":1497},"      \u002F>\n",{"type":32,"tag":208,"props":1499,"children":1501},{"class":210,"line":1500},36,[1502,1506,1511,1516,1520],{"type":32,"tag":208,"props":1503,"children":1504},{"style":215},[1505],{"type":37,"value":937},{"type":32,"tag":208,"props":1507,"children":1508},{"style":221},[1509],{"type":37,"value":1510},"button",{"type":32,"tag":208,"props":1512,"children":1513},{"style":227},[1514],{"type":37,"value":1515}," disabled",{"type":32,"tag":208,"props":1517,"children":1518},{"style":242},[1519],{"type":37,"value":400},{"type":32,"tag":208,"props":1521,"children":1522},{"style":215},[1523],{"type":37,"value":1524},"{loading}>\n",{"type":32,"tag":208,"props":1526,"children":1528},{"class":210,"line":1527},37,[1529,1534,1539,1544,1549,1554],{"type":32,"tag":208,"props":1530,"children":1531},{"style":215},[1532],{"type":37,"value":1533},"        {loading ",{"type":32,"tag":208,"props":1535,"children":1536},{"style":242},[1537],{"type":37,"value":1538},"?",{"type":32,"tag":208,"props":1540,"children":1541},{"style":258},[1542],{"type":37,"value":1543}," 'Adding...'",{"type":32,"tag":208,"props":1545,"children":1546},{"style":242},[1547],{"type":37,"value":1548}," :",{"type":32,"tag":208,"props":1550,"children":1551},{"style":258},[1552],{"type":37,"value":1553}," 'Add to Cart'",{"type":32,"tag":208,"props":1555,"children":1556},{"style":215},[1557],{"type":37,"value":929},{"type":32,"tag":208,"props":1559,"children":1561},{"class":210,"line":1560},38,[1562,1567,1571],{"type":32,"tag":208,"props":1563,"children":1564},{"style":215},[1565],{"type":37,"value":1566},"      \u003C\u002F",{"type":32,"tag":208,"props":1568,"children":1569},{"style":221},[1570],{"type":37,"value":1510},{"type":32,"tag":208,"props":1572,"children":1573},{"style":215},[1574],{"type":37,"value":235},{"type":32,"tag":208,"props":1576,"children":1578},{"class":210,"line":1577},39,[1579,1583,1587],{"type":32,"tag":208,"props":1580,"children":1581},{"style":215},[1582],{"type":37,"value":1040},{"type":32,"tag":208,"props":1584,"children":1585},{"style":221},[1586],{"type":37,"value":1374},{"type":32,"tag":208,"props":1588,"children":1589},{"style":215},[1590],{"type":37,"value":235},{"type":32,"tag":208,"props":1592,"children":1594},{"class":210,"line":1593},40,[1595],{"type":32,"tag":208,"props":1596,"children":1597},{"style":215},[1598],{"type":37,"value":1056},{"type":32,"tag":208,"props":1600,"children":1602},{"class":210,"line":1601},41,[1603],{"type":32,"tag":208,"props":1604,"children":1605},{"style":215},[1606],{"type":37,"value":929},{"type":32,"tag":33,"props":1608,"children":1609},{},[1610,1612,1617],{"type":37,"value":1611},"In diesem Beispiel liegt die Boundary oberhalb der ",{"type":32,"tag":181,"props":1613,"children":1615},{"className":1614},[],[1616],{"type":37,"value":1018},{"type":37,"value":1618}," Komponente. Product-Bilder und Titel werden auf dem Server gerendert — SEO-freundliches HTML, null Client JavaScript. Das Formular ist interaktiv, daher eine Client Component. Bundle-Größen-Impact: Nur Formular-Logik + React Event Handler gehen an den Client, etwa 8 kb. Würde man die gesamte Seite als Client Component bauen, würde das Bundle 120 kb sein — ein 15-facher Unterschied.",{"type":32,"tag":169,"props":1620,"children":1622},{"id":1621},"die-nesting-regel",[1623],{"type":37,"value":1624},"Die Nesting-Regel",{"type":32,"tag":33,"props":1626,"children":1627},{},[1628],{"type":37,"value":1629},"Ein häufiger Fehler mit RSC: Eine Client Component in eine Server Component verschachteln. React erlaubt das nicht — alles unter einer Client Component geht ins Client Bundle. Die Lösung ist das Composition Pattern.",{"type":32,"tag":33,"props":1631,"children":1632},{},[1633],{"type":37,"value":1634},"❌ Falsch:",{"type":32,"tag":198,"props":1636,"children":1638},{"code":1637,"language":831,"meta":16,"className":832,"style":16},"'use client'\nfunction ClientWrapper() {\n  return \u003CServerComponent \u002F> \u002F\u002F Fehler: RSC kann nicht in Client sein\n}\n",[1639],{"type":32,"tag":181,"props":1640,"children":1641},{"__ignoreMap":16},[1642,1649,1666,1693],{"type":32,"tag":208,"props":1643,"children":1644},{"class":210,"line":211},[1645],{"type":32,"tag":208,"props":1646,"children":1647},{"style":258},[1648],{"type":37,"value":1086},{"type":32,"tag":208,"props":1650,"children":1651},{"class":210,"line":238},[1652,1657,1662],{"type":32,"tag":208,"props":1653,"children":1654},{"style":242},[1655],{"type":37,"value":1656},"function",{"type":32,"tag":208,"props":1658,"children":1659},{"style":227},[1660],{"type":37,"value":1661}," ClientWrapper",{"type":32,"tag":208,"props":1663,"children":1664},{"style":215},[1665],{"type":37,"value":1274},{"type":32,"tag":208,"props":1667,"children":1668},{"class":210,"line":264},[1669,1673,1678,1683,1688],{"type":32,"tag":208,"props":1670,"children":1671},{"style":242},[1672],{"type":37,"value":891},{"type":32,"tag":208,"props":1674,"children":1675},{"style":215},[1676],{"type":37,"value":1677}," \u003C",{"type":32,"tag":208,"props":1679,"children":1680},{"style":283},[1681],{"type":37,"value":1682},"ServerComponent",{"type":32,"tag":208,"props":1684,"children":1685},{"style":215},[1686],{"type":37,"value":1687}," \u002F> ",{"type":32,"tag":208,"props":1689,"children":1690},{"style":352},[1691],{"type":37,"value":1692},"\u002F\u002F Fehler: RSC kann nicht in Client sein\n",{"type":32,"tag":208,"props":1694,"children":1695},{"class":210,"line":274},[1696],{"type":32,"tag":208,"props":1697,"children":1698},{"style":215},[1699],{"type":37,"value":929},{"type":32,"tag":33,"props":1701,"children":1702},{},[1703],{"type":37,"value":1704},"✅ Richtig:",{"type":32,"tag":198,"props":1706,"children":1708},{"code":1707,"language":831,"meta":16,"className":832,"style":16},"\u002F\u002F Layout (RSC)\nfunction Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CServerSidebar \u002F>\n      \u003CClientWrapper>{children}\u003C\u002FClientWrapper>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F Wrapper (Client)\n'use client'\nfunction ClientWrapper({ children }) {\n  return \u003Cdiv className=\"interactive\">{children}\u003C\u002Fdiv>\n}\n",[1709],{"type":32,"tag":181,"props":1710,"children":1711},{"__ignoreMap":16},[1712,1720,1745,1756,1771,1787,1812,1827,1834,1841,1848,1856,1863,1886,1927],{"type":32,"tag":208,"props":1713,"children":1714},{"class":210,"line":211},[1715],{"type":32,"tag":208,"props":1716,"children":1717},{"style":352},[1718],{"type":37,"value":1719},"\u002F\u002F Layout (RSC)\n",{"type":32,"tag":208,"props":1721,"children":1722},{"class":210,"line":238},[1723,1727,1732,1736,1741],{"type":32,"tag":208,"props":1724,"children":1725},{"style":242},[1726],{"type":37,"value":1656},{"type":32,"tag":208,"props":1728,"children":1729},{"style":227},[1730],{"type":37,"value":1731}," Layout",{"type":32,"tag":208,"props":1733,"children":1734},{"style":215},[1735],{"type":37,"value":872},{"type":32,"tag":208,"props":1737,"children":1738},{"style":875},[1739],{"type":37,"value":1740},"children",{"type":32,"tag":208,"props":1742,"children":1743},{"style":215},[1744],{"type":37,"value":883},{"type":32,"tag":208,"props":1746,"children":1747},{"class":210,"line":264},[1748,1752],{"type":32,"tag":208,"props":1749,"children":1750},{"style":242},[1751],{"type":37,"value":891},{"type":32,"tag":208,"props":1753,"children":1754},{"style":215},[1755],{"type":37,"value":896},{"type":32,"tag":208,"props":1757,"children":1758},{"class":210,"line":274},[1759,1763,1767],{"type":32,"tag":208,"props":1760,"children":1761},{"style":215},[1762],{"type":37,"value":566},{"type":32,"tag":208,"props":1764,"children":1765},{"style":221},[1766],{"type":37,"value":544},{"type":32,"tag":208,"props":1768,"children":1769},{"style":215},[1770],{"type":37,"value":235},{"type":32,"tag":208,"props":1772,"children":1773},{"class":210,"line":304},[1774,1778,1783],{"type":32,"tag":208,"props":1775,"children":1776},{"style":215},[1777],{"type":37,"value":937},{"type":32,"tag":208,"props":1779,"children":1780},{"style":283},[1781],{"type":37,"value":1782},"ServerSidebar",{"type":32,"tag":208,"props":1784,"children":1785},{"style":215},[1786],{"type":37,"value":590},{"type":32,"tag":208,"props":1788,"children":1789},{"class":210,"line":340},[1790,1794,1799,1804,1808],{"type":32,"tag":208,"props":1791,"children":1792},{"style":215},[1793],{"type":37,"value":937},{"type":32,"tag":208,"props":1795,"children":1796},{"style":283},[1797],{"type":37,"value":1798},"ClientWrapper",{"type":32,"tag":208,"props":1800,"children":1801},{"style":215},[1802],{"type":37,"value":1803},">{children}\u003C\u002F",{"type":32,"tag":208,"props":1805,"children":1806},{"style":283},[1807],{"type":37,"value":1798},{"type":32,"tag":208,"props":1809,"children":1810},{"style":215},[1811],{"type":37,"value":235},{"type":32,"tag":208,"props":1813,"children":1814},{"class":210,"line":348},[1815,1819,1823],{"type":32,"tag":208,"props":1816,"children":1817},{"style":215},[1818],{"type":37,"value":1040},{"type":32,"tag":208,"props":1820,"children":1821},{"style":221},[1822],{"type":37,"value":544},{"type":32,"tag":208,"props":1824,"children":1825},{"style":215},[1826],{"type":37,"value":235},{"type":32,"tag":208,"props":1828,"children":1829},{"class":210,"line":358},[1830],{"type":32,"tag":208,"props":1831,"children":1832},{"style":215},[1833],{"type":37,"value":1056},{"type":32,"tag":208,"props":1835,"children":1836},{"class":210,"line":26},[1837],{"type":32,"tag":208,"props":1838,"children":1839},{"style":215},[1840],{"type":37,"value":929},{"type":32,"tag":208,"props":1842,"children":1843},{"class":210,"line":418},[1844],{"type":32,"tag":208,"props":1845,"children":1846},{"emptyLinePlaceholder":268},[1847],{"type":37,"value":271},{"type":32,"tag":208,"props":1849,"children":1850},{"class":210,"line":427},[1851],{"type":32,"tag":208,"props":1852,"children":1853},{"style":352},[1854],{"type":37,"value":1855},"\u002F\u002F Wrapper (Client)\n",{"type":32,"tag":208,"props":1857,"children":1858},{"class":210,"line":435},[1859],{"type":32,"tag":208,"props":1860,"children":1861},{"style":258},[1862],{"type":37,"value":1086},{"type":32,"tag":208,"props":1864,"children":1865},{"class":210,"line":444},[1866,1870,1874,1878,1882],{"type":32,"tag":208,"props":1867,"children":1868},{"style":242},[1869],{"type":37,"value":1656},{"type":32,"tag":208,"props":1871,"children":1872},{"style":227},[1873],{"type":37,"value":1661},{"type":32,"tag":208,"props":1875,"children":1876},{"style":215},[1877],{"type":37,"value":872},{"type":32,"tag":208,"props":1879,"children":1880},{"style":875},[1881],{"type":37,"value":1740},{"type":32,"tag":208,"props":1883,"children":1884},{"style":215},[1885],{"type":37,"value":883},{"type":32,"tag":208,"props":1887,"children":1888},{"class":210,"line":465},[1889,1893,1897,1901,1906,1910,1915,1919,1923],{"type":32,"tag":208,"props":1890,"children":1891},{"style":242},[1892],{"type":37,"value":891},{"type":32,"tag":208,"props":1894,"children":1895},{"style":215},[1896],{"type":37,"value":1677},{"type":32,"tag":208,"props":1898,"children":1899},{"style":221},[1900],{"type":37,"value":544},{"type":32,"tag":208,"props":1902,"children":1903},{"style":227},[1904],{"type":37,"value":1905}," className",{"type":32,"tag":208,"props":1907,"children":1908},{"style":242},[1909],{"type":37,"value":400},{"type":32,"tag":208,"props":1911,"children":1912},{"style":258},[1913],{"type":37,"value":1914},"\"interactive\"",{"type":32,"tag":208,"props":1916,"children":1917},{"style":215},[1918],{"type":37,"value":1803},{"type":32,"tag":208,"props":1920,"children":1921},{"style":221},[1922],{"type":37,"value":544},{"type":32,"tag":208,"props":1924,"children":1925},{"style":215},[1926],{"type":37,"value":235},{"type":32,"tag":208,"props":1928,"children":1929},{"class":210,"line":483},[1930],{"type":32,"tag":208,"props":1931,"children":1932},{"style":215},[1933],{"type":37,"value":929},{"type":32,"tag":33,"props":1935,"children":1936},{},[1937,1939,1944,1946,1951],{"type":37,"value":1938},"Dieses Pattern lässt ",{"type":32,"tag":181,"props":1940,"children":1942},{"className":1941},[],[1943],{"type":37,"value":1782},{"type":37,"value":1945}," auf dem Server rendern, während ",{"type":32,"tag":181,"props":1947,"children":1949},{"className":1948},[],[1950],{"type":37,"value":1798},{"type":37,"value":1952}," nur als interaktiver Container auf dem Client läuft. Der Sidebar-Inhalt geht nicht ins Bundle.",{"type":32,"tag":40,"props":1954,"children":1956},{"id":1955},"vue-vapor-mode-hydration-lose-zukunft",[1957],{"type":37,"value":1958},"Vue Vapor Mode: Hydration-lose Zukunft",{"type":32,"tag":33,"props":1960,"children":1961},{},[1962],{"type":37,"value":1963},"Nach Vue 3.5 experimentiert der experimentelle Vapor Mode damit, server-seitig gerendertes HTML ohne Hydration interaktiv zu machen. Das Konzept: Der Compiler injiziert Event Listener direkt ins DOM, keine Virtual DOM Reconciliation. Resultat: Hydration-Kosten null, Bundle-Größe 70 % niedriger.",{"type":32,"tag":33,"props":1965,"children":1966},{},[1967],{"type":37,"value":1968},"Experimenteller Benchmark (Vue Team, 2026 Q1):",{"type":32,"tag":57,"props":1970,"children":1971},{},[1972,1993],{"type":32,"tag":61,"props":1973,"children":1974},{},[1975],{"type":32,"tag":65,"props":1976,"children":1977},{},[1978,1983,1988],{"type":32,"tag":69,"props":1979,"children":1980},{},[1981],{"type":37,"value":1982},"Metrik",{"type":32,"tag":69,"props":1984,"children":1985},{},[1986],{"type":37,"value":1987},"Vue 3.5 SSR",{"type":32,"tag":69,"props":1989,"children":1990},{},[1991],{"type":37,"value":1992},"Vapor Mode",{"type":32,"tag":90,"props":1994,"children":1995},{},[1996,2012,2029],{"type":32,"tag":65,"props":1997,"children":1998},{},[1999,2003,2007],{"type":32,"tag":97,"props":2000,"children":2001},{},[2002],{"type":37,"value":78},{"type":32,"tag":97,"props":2004,"children":2005},{},[2006],{"type":37,"value":129},{"type":32,"tag":97,"props":2008,"children":2009},{},[2010],{"type":37,"value":2011},"55 kb",{"type":32,"tag":65,"props":2013,"children":2014},{},[2015,2020,2024],{"type":32,"tag":97,"props":2016,"children":2017},{},[2018],{"type":37,"value":2019},"Hydration-Zeit",{"type":32,"tag":97,"props":2021,"children":2022},{},[2023],{"type":37,"value":134},{"type":32,"tag":97,"props":2025,"children":2026},{},[2027],{"type":37,"value":2028},"0 ms",{"type":32,"tag":65,"props":2030,"children":2031},{},[2032,2037,2042],{"type":32,"tag":97,"props":2033,"children":2034},{},[2035],{"type":37,"value":2036},"Runtime Overhead",{"type":32,"tag":97,"props":2038,"children":2039},{},[2040],{"type":37,"value":2041},"4.2 kb",{"type":32,"tag":97,"props":2043,"children":2044},{},[2045],{"type":37,"value":2046},"0.8 kb",{"type":32,"tag":33,"props":2048,"children":2049},{},[2050],{"type":37,"value":2051},"In unserem Headless Storefront POC senkte Vapor Mode die TBT einer Product Listing Seite von 800 ms auf 140 ms. Allerdings ist Vapor Mode noch nicht produktionsreif — Vue Router Integration ist Beta, Third-Party Library Support limitiert. Stabilität wird für Q2 2027 erwartet.",{"type":32,"tag":40,"props":2053,"children":2055},{"id":2054},"auf-welchen-zahlen-sollte-die-entscheidung-basieren",[2056],{"type":37,"value":2057},"Auf welchen Zahlen sollte die Entscheidung basieren?",{"type":32,"tag":33,"props":2059,"children":2060},{},[2061],{"type":37,"value":2062},"Treffen Sie die Entscheidung zwischen Server und Client Component anhand dieser Metriken:",{"type":32,"tag":2064,"props":2065,"children":2066},"ol",{},[2067,2077,2087,2097],{"type":32,"tag":734,"props":2068,"children":2069},{},[2070,2075],{"type":32,"tag":724,"props":2071,"children":2072},{},[2073],{"type":37,"value":2074},"Interaktivitäts-Wahrscheinlichkeit:",{"type":37,"value":2076}," Greifen X % der Nutzer in den ersten 5 Sekunden mit dieser Komponente interaktiv auf? Über 60 % → Client Component.",{"type":32,"tag":734,"props":2078,"children":2079},{},[2080,2085],{"type":32,"tag":724,"props":2081,"children":2082},{},[2083],{"type":37,"value":2084},"Bundle-Impact:",{"type":37,"value":2086}," Wie viele kb wächst das Bundle, wenn diese Komponente zum Client geht? Über 50 kb → RSC + Lazy Load bewerten.",{"type":32,"tag":734,"props":2088,"children":2089},{},[2090,2095],{"type":32,"tag":724,"props":2091,"children":2092},{},[2093],{"type":37,"value":2094},"SEO-Wichtigkeit:",{"type":37,"value":2096}," Muss Inhalt von Suchmaschinen indexiert werden? Ja → RSC oder SSR.",{"type":32,"tag":734,"props":2098,"children":2099},{},[2100,2105],{"type":32,"tag":724,"props":2101,"children":2102},{},[2103],{"type":37,"value":2104},"Daten-Aktualität:",{"type":37,"value":2106}," Ändern sich Daten bei jedem Request? Nein → Static Generation. Ja → RSC oder API Fetch.",{"type":32,"tag":33,"props":2108,"children":2109},{},[2110],{"type":37,"value":2111},"Beispiel einer Entscheidungsmatrix (Roibase Shopify Projekt):",{"type":32,"tag":57,"props":2113,"children":2114},{},[2115,2146],{"type":32,"tag":61,"props":2116,"children":2117},{},[2118],{"type":32,"tag":65,"props":2119,"children":2120},{},[2121,2126,2131,2136,2141],{"type":32,"tag":69,"props":2122,"children":2123},{},[2124],{"type":37,"value":2125},"Komponente",{"type":32,"tag":69,"props":2127,"children":2128},{},[2129],{"type":37,"value":2130},"Interaktivität",{"type":32,"tag":69,"props":2132,"children":2133},{},[2134],{"type":37,"value":2135},"Bundle-Impact",{"type":32,"tag":69,"props":2137,"children":2138},{},[2139],{"type":37,"value":2140},"SEO",{"type":32,"tag":69,"props":2142,"children":2143},{},[2144],{"type":37,"value":2145},"Entscheidung",{"type":32,"tag":90,"props":2147,"children":2148},{},[2149,2177,2205,2233],{"type":32,"tag":65,"props":2150,"children":2151},{},[2152,2157,2162,2167,2172],{"type":32,"tag":97,"props":2153,"children":2154},{},[2155],{"type":37,"value":2156},"Product Grid",{"type":32,"tag":97,"props":2158,"children":2159},{},[2160],{"type":37,"value":2161},"12 %",{"type":32,"tag":97,"props":2163,"children":2164},{},[2165],{"type":37,"value":2166},"85 kb",{"type":32,"tag":97,"props":2168,"children":2169},{},[2170],{"type":37,"value":2171},"Kritisch",{"type":32,"tag":97,"props":2173,"children":2174},{},[2175],{"type":37,"value":2176},"RSC",{"type":32,"tag":65,"props":2178,"children":2179},{},[2180,2185,2190,2195,2200],{"type":32,"tag":97,"props":2181,"children":2182},{},[2183],{"type":37,"value":2184},"Add to Cart",{"type":32,"tag":97,"props":2186,"children":2187},{},[2188],{"type":37,"value":2189},"78 %",{"type":32,"tag":97,"props":2191,"children":2192},{},[2193],{"type":37,"value":2194},"8 kb",{"type":32,"tag":97,"props":2196,"children":2197},{},[2198],{"type":37,"value":2199},"Nicht nötig",{"type":32,"tag":97,"props":2201,"children":2202},{},[2203],{"type":37,"value":2204},"Client",{"type":32,"tag":65,"props":2206,"children":2207},{},[2208,2213,2218,2223,2228],{"type":32,"tag":97,"props":2209,"children":2210},{},[2211],{"type":37,"value":2212},"Ähnliche Produkte",{"type":32,"tag":97,"props":2214,"children":2215},{},[2216],{"type":37,"value":2217},"23 %",{"type":32,"tag":97,"props":2219,"children":2220},{},[2221],{"type":37,"value":2222},"45 kb",{"type":32,"tag":97,"props":2224,"children":2225},{},[2226],{"type":37,"value":2227},"Mittel",{"type":32,"tag":97,"props":2229,"children":2230},{},[2231],{"type":37,"value":2232},"RSC + Lazy",{"type":32,"tag":65,"props":2234,"children":2235},{},[2236,2241,2246,2251,2256],{"type":32,"tag":97,"props":2237,"children":2238},{},[2239],{"type":37,"value":2240},"Such-Modal",{"type":32,"tag":97,"props":2242,"children":2243},{},[2244],{"type":37,"value":2245},"55 %",{"type":32,"tag":97,"props":2247,"children":2248},{},[2249],{"type":37,"value":2250},"62 kb",{"type":32,"tag":97,"props":2252,"children":2253},{},[2254],{"type":37,"value":2255},"Niedrig",{"type":32,"tag":97,"props":2257,"children":2258},{},[2259],{"type":37,"value":2260},"Client (Preload)",{"type":32,"tag":33,"props":2262,"children":2263},{},[2264,2266,2272],{"type":37,"value":2265},"Das Such-Modal zeigt 55 % Interaktivität — unter dem kritischen Schwellenwert, aber UX-sensibel. Lösung: Wir preloaden die Modal-Komponente mit ",{"type":32,"tag":181,"props":2267,"children":2269},{"className":2268},[],[2270],{"type":37,"value":2271},"\u003Clink rel=\"modulepreload\">",{"type":37,"value":2273},". Die Latenz beim ersten Klick sinkt auf 40 ms.",{"type":32,"tag":40,"props":2275,"children":2277},{"id":2276},"praktische-anwendung-shopify-hydrogen-20-beispiel",[2278],{"type":37,"value":2279},"Praktische Anwendung: Shopify Hydrogen 2.0 Beispiel",{"type":32,"tag":33,"props":2281,"children":2282},{},[2283],{"type":37,"value":2284},"Wie wir Component Boundaries in einem E-Commerce Storefront zeichnen:",{"type":32,"tag":198,"props":2286,"children":2288},{"code":2287,"language":831,"meta":16,"className":832,"style":16},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\nimport { json } from '@shopify\u002Fremix-oxygen'\nimport { useLoaderData } from '@remix-run\u002Freact'\n\nexport async function loader({ params, context }) {\n  const { collection } = await context.storefront.query(COLLECTION_QUERY, {\n    variables: { handle: params.handle }\n  })\n  return json({ collection })\n}\n\nexport default function Collection() {\n  const { collection } = useLoaderData()\n  \n  return (\n    \u003Cdiv>\n      {\u002F* Server Component — statische Metadaten *\u002F}\n      \u003CCollectionHeader \n        title={collection.title} \n        description={collection.description} \n      \u002F>\n      \n      {\u002F* Client Component — Filterung, Sortierung *\u002F}\n      \u003CProductFilters facets={collection.facets} \u002F>\n      \n      {\u002F* Server Component — Product Cards *\u002F}\n      \u003CProductGrid products={collection.products} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n",[2289],{"type":32,"tag":181,"props":2290,"children":2291},{"__ignoreMap":16},[2292,2300,2321,2342,2349,2392,2446,2454,2462,2479,2486,2493,2517,2549,2557,2568,2583,2599,2615,2632,2649,2656,2663,2679,2705,2712,2728,2752,2767,2774],{"type":32,"tag":208,"props":2293,"children":2294},{"class":210,"line":211},[2295],{"type":32,"tag":208,"props":2296,"children":2297},{"style":352},[2298],{"type":37,"value":2299},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\n",{"type":32,"tag":208,"props":2301,"children":2302},{"class":210,"line":238},[2303,2307,2312,2316],{"type":32,"tag":208,"props":2304,"children":2305},{"style":242},[2306],{"type":37,"value":245},{"type":32,"tag":208,"props":2308,"children":2309},{"style":215},[2310],{"type":37,"value":2311}," { json } ",{"type":32,"tag":208,"props":2313,"children":2314},{"style":242},[2315],{"type":37,"value":255},{"type":32,"tag":208,"props":2317,"children":2318},{"style":258},[2319],{"type":37,"value":2320}," '@shopify\u002Fremix-oxygen'\n",{"type":32,"tag":208,"props":2322,"children":2323},{"class":210,"line":264},[2324,2328,2333,2337],{"type":32,"tag":208,"props":2325,"children":2326},{"style":242},[2327],{"type":37,"value":245},{"type":32,"tag":208,"props":2329,"children":2330},{"style":215},[2331],{"type":37,"value":2332}," { useLoaderData } ",{"type":32,"tag":208,"props":2334,"children":2335},{"style":242},[2336],{"type":37,"value":255},{"type":32,"tag":208,"props":2338,"children":2339},{"style":258},[2340],{"type":37,"value":2341}," '@remix-run\u002Freact'\n",{"type":32,"tag":208,"props":2343,"children":2344},{"class":210,"line":274},[2345],{"type":32,"tag":208,"props":2346,"children":2347},{"emptyLinePlaceholder":268},[2348],{"type":37,"value":271},{"type":32,"tag":208,"props":2350,"children":2351},{"class":210,"line":304},[2352,2356,2361,2365,2370,2374,2379,2383,2388],{"type":32,"tag":208,"props":2353,"children":2354},{"style":242},[2355],{"type":37,"value":852},{"type":32,"tag":208,"props":2357,"children":2358},{"style":242},[2359],{"type":37,"value":2360}," async",{"type":32,"tag":208,"props":2362,"children":2363},{"style":242},[2364],{"type":37,"value":862},{"type":32,"tag":208,"props":2366,"children":2367},{"style":227},[2368],{"type":37,"value":2369}," loader",{"type":32,"tag":208,"props":2371,"children":2372},{"style":215},[2373],{"type":37,"value":872},{"type":32,"tag":208,"props":2375,"children":2376},{"style":875},[2377],{"type":37,"value":2378},"params",{"type":32,"tag":208,"props":2380,"children":2381},{"style":215},[2382],{"type":37,"value":703},{"type":32,"tag":208,"props":2384,"children":2385},{"style":875},[2386],{"type":37,"value":2387},"context",{"type":32,"tag":208,"props":2389,"children":2390},{"style":215},[2391],{"type":37,"value":883},{"type":32,"tag":208,"props":2393,"children":2394},{"class":210,"line":340},[2395,2399,2404,2409,2414,2418,2422,2427,2432,2436,2441],{"type":32,"tag":208,"props":2396,"children":2397},{"style":242},[2398],{"type":37,"value":1150},{"type":32,"tag":208,"props":2400,"children":2401},{"style":215},[2402],{"type":37,"value":2403}," { ",{"type":32,"tag":208,"props":2405,"children":2406},{"style":283},[2407],{"type":37,"value":2408},"collection",{"type":32,"tag":208,"props":2410,"children":2411},{"style":215},[2412],{"type":37,"value":2413}," } ",{"type":32,"tag":208,"props":2415,"children":2416},{"style":242},[2417],{"type":37,"value":400},{"type":32,"tag":208,"props":2419,"children":2420},{"style":242},[2421],{"type":37,"value":405},{"type":32,"tag":208,"props":2423,"children":2424},{"style":215},[2425],{"type":37,"value":2426}," context.storefront.",{"type":32,"tag":208,"props":2428,"children":2429},{"style":227},[2430],{"type":37,"value":2431},"query",{"type":32,"tag":208,"props":2433,"children":2434},{"style":215},[2435],{"type":37,"value":327},{"type":32,"tag":208,"props":2437,"children":2438},{"style":283},[2439],{"type":37,"value":2440},"COLLECTION_QUERY",{"type":32,"tag":208,"props":2442,"children":2443},{"style":215},[2444],{"type":37,"value":2445},", {\n",{"type":32,"tag":208,"props":2447,"children":2448},{"class":210,"line":348},[2449],{"type":32,"tag":208,"props":2450,"children":2451},{"style":215},[2452],{"type":37,"value":2453},"    variables: { handle: params.handle }\n",{"type":32,"tag":208,"props":2455,"children":2456},{"class":210,"line":358},[2457],{"type":32,"tag":208,"props":2458,"children":2459},{"style":215},[2460],{"type":37,"value":2461},"  })\n",{"type":32,"tag":208,"props":2463,"children":2464},{"class":210,"line":26},[2465,2469,2474],{"type":32,"tag":208,"props":2466,"children":2467},{"style":242},[2468],{"type":37,"value":891},{"type":32,"tag":208,"props":2470,"children":2471},{"style":227},[2472],{"type":37,"value":2473}," json",{"type":32,"tag":208,"props":2475,"children":2476},{"style":215},[2477],{"type":37,"value":2478},"({ collection })\n",{"type":32,"tag":208,"props":2480,"children":2481},{"class":210,"line":418},[2482],{"type":32,"tag":208,"props":2483,"children":2484},{"style":215},[2485],{"type":37,"value":929},{"type":32,"tag":208,"props":2487,"children":2488},{"class":210,"line":427},[2489],{"type":32,"tag":208,"props":2490,"children":2491},{"emptyLinePlaceholder":268},[2492],{"type":37,"value":271},{"type":32,"tag":208,"props":2494,"children":2495},{"class":210,"line":435},[2496,2500,2504,2508,2513],{"type":32,"tag":208,"props":2497,"children":2498},{"style":242},[2499],{"type":37,"value":852},{"type":32,"tag":208,"props":2501,"children":2502},{"style":242},[2503],{"type":37,"value":857},{"type":32,"tag":208,"props":2505,"children":2506},{"style":242},[2507],{"type":37,"value":862},{"type":32,"tag":208,"props":2509,"children":2510},{"style":227},[2511],{"type":37,"value":2512}," Collection",{"type":32,"tag":208,"props":2514,"children":2515},{"style":215},[2516],{"type":37,"value":1274},{"type":32,"tag":208,"props":2518,"children":2519},{"class":210,"line":444},[2520,2524,2528,2532,2536,2540,2545],{"type":32,"tag":208,"props":2521,"children":2522},{"style":242},[2523],{"type":37,"value":1150},{"type":32,"tag":208,"props":2525,"children":2526},{"style":215},[2527],{"type":37,"value":2403},{"type":32,"tag":208,"props":2529,"children":2530},{"style":283},[2531],{"type":37,"value":2408},{"type":32,"tag":208,"props":2533,"children":2534},{"style":215},[2535],{"type":37,"value":2413},{"type":32,"tag":208,"props":2537,"children":2538},{"style":242},[2539],{"type":37,"value":400},{"type":32,"tag":208,"props":2541,"children":2542},{"style":227},[2543],{"type":37,"value":2544}," useLoaderData",{"type":32,"tag":208,"props":2546,"children":2547},{"style":215},[2548],{"type":37,"value":415},{"type":32,"tag":208,"props":2550,"children":2551},{"class":210,"line":465},[2552],{"type":32,"tag":208,"props":2553,"children":2554},{"style":215},[2555],{"type":37,"value":2556},"  \n",{"type":32,"tag":208,"props":2558,"children":2559},{"class":210,"line":483},[2560,2564],{"type":32,"tag":208,"props":2561,"children":2562},{"style":242},[2563],{"type":37,"value":891},{"type":32,"tag":208,"props":2565,"children":2566},{"style":215},[2567],{"type":37,"value":896},{"type":32,"tag":208,"props":2569,"children":2570},{"class":210,"line":491},[2571,2575,2579],{"type":32,"tag":208,"props":2572,"children":2573},{"style":215},[2574],{"type":37,"value":566},{"type":32,"tag":208,"props":2576,"children":2577},{"style":221},[2578],{"type":37,"value":544},{"type":32,"tag":208,"props":2580,"children":2581},{"style":215},[2582],{"type":37,"value":235},{"type":32,"tag":208,"props":2584,"children":2585},{"class":210,"line":508},[2586,2590,2595],{"type":32,"tag":208,"props":2587,"children":2588},{"style":215},[2589],{"type":37,"value":919},{"type":32,"tag":208,"props":2591,"children":2592},{"style":352},[2593],{"type":37,"value":2594},"\u002F* Server Component — statische Metadaten *\u002F",{"type":32,"tag":208,"props":2596,"children":2597},{"style":215},[2598],{"type":37,"value":929},{"type":32,"tag":208,"props":2600,"children":2601},{"class":210,"line":516},[2602,2606,2611],{"type":32,"tag":208,"props":2603,"children":2604},{"style":215},[2605],{"type":37,"value":937},{"type":32,"tag":208,"props":2607,"children":2608},{"style":283},[2609],{"type":37,"value":2610},"CollectionHeader",{"type":32,"tag":208,"props":2612,"children":2613},{"style":215},[2614],{"type":37,"value":1406},{"type":32,"tag":208,"props":2616,"children":2617},{"class":210,"line":533},[2618,2623,2627],{"type":32,"tag":208,"props":2619,"children":2620},{"style":227},[2621],{"type":37,"value":2622},"        title",{"type":32,"tag":208,"props":2624,"children":2625},{"style":242},[2626],{"type":37,"value":400},{"type":32,"tag":208,"props":2628,"children":2629},{"style":215},[2630],{"type":37,"value":2631},"{collection.title} \n",{"type":32,"tag":208,"props":2633,"children":2634},{"class":210,"line":551},[2635,2640,2644],{"type":32,"tag":208,"props":2636,"children":2637},{"style":227},[2638],{"type":37,"value":2639},"        description",{"type":32,"tag":208,"props":2641,"children":2642},{"style":242},[2643],{"type":37,"value":400},{"type":32,"tag":208,"props":2645,"children":2646},{"style":215},[2647],{"type":37,"value":2648},"{collection.description} \n",{"type":32,"tag":208,"props":2650,"children":2651},{"class":210,"line":560},[2652],{"type":32,"tag":208,"props":2653,"children":2654},{"style":215},[2655],{"type":37,"value":1497},{"type":32,"tag":208,"props":2657,"children":2658},{"class":210,"line":593},[2659],{"type":32,"tag":208,"props":2660,"children":2661},{"style":215},[2662],{"type":37,"value":990},{"type":32,"tag":208,"props":2664,"children":2665},{"class":210,"line":602},[2666,2670,2675],{"type":32,"tag":208,"props":2667,"children":2668},{"style":215},[2669],{"type":37,"value":919},{"type":32,"tag":208,"props":2671,"children":2672},{"style":352},[2673],{"type":37,"value":2674},"\u002F* Client Component — Filterung, Sortierung *\u002F",{"type":32,"tag":208,"props":2676,"children":2677},{"style":215},[2678],{"type":37,"value":929},{"type":32,"tag":208,"props":2680,"children":2681},{"class":210,"line":611},[2682,2686,2691,2696,2700],{"type":32,"tag":208,"props":2683,"children":2684},{"style":215},[2685],{"type":37,"value":937},{"type":32,"tag":208,"props":2687,"children":2688},{"style":283},[2689],{"type":37,"value":2690},"ProductFilters",{"type":32,"tag":208,"props":2692,"children":2693},{"style":227},[2694],{"type":37,"value":2695}," facets",{"type":32,"tag":208,"props":2697,"children":2698},{"style":242},[2699],{"type":37,"value":400},{"type":32,"tag":208,"props":2701,"children":2702},{"style":215},[2703],{"type":37,"value":2704},"{collection.facets} \u002F>\n",{"type":32,"tag":208,"props":2706,"children":2707},{"class":210,"line":642},[2708],{"type":32,"tag":208,"props":2709,"children":2710},{"style":215},[2711],{"type":37,"value":990},{"type":32,"tag":208,"props":2713,"children":2714},{"class":210,"line":659},[2715,2719,2724],{"type":32,"tag":208,"props":2716,"children":2717},{"style":215},[2718],{"type":37,"value":919},{"type":32,"tag":208,"props":2720,"children":2721},{"style":352},[2722],{"type":37,"value":2723},"\u002F* Server Component — Product Cards *\u002F",{"type":32,"tag":208,"props":2725,"children":2726},{"style":215},[2727],{"type":37,"value":929},{"type":32,"tag":208,"props":2729,"children":2730},{"class":210,"line":1335},[2731,2735,2739,2743,2747],{"type":32,"tag":208,"props":2732,"children":2733},{"style":215},[2734],{"type":37,"value":937},{"type":32,"tag":208,"props":2736,"children":2737},{"style":283},[2738],{"type":37,"value":571},{"type":32,"tag":208,"props":2740,"children":2741},{"style":227},[2742],{"type":37,"value":286},{"type":32,"tag":208,"props":2744,"children":2745},{"style":242},[2746],{"type":37,"value":400},{"type":32,"tag":208,"props":2748,"children":2749},{"style":215},[2750],{"type":37,"value":2751},"{collection.products} \u002F>\n",{"type":32,"tag":208,"props":2753,"children":2754},{"class":210,"line":1344},[2755,2759,2763],{"type":32,"tag":208,"props":2756,"children":2757},{"style":215},[2758],{"type":37,"value":1040},{"type":32,"tag":208,"props":2760,"children":2761},{"style":221},[2762],{"type":37,"value":544},{"type":32,"tag":208,"props":2764,"children":2765},{"style":215},[2766],{"type":37,"value":235},{"type":32,"tag":208,"props":2768,"children":2769},{"class":210,"line":1352},[2770],{"type":32,"tag":208,"props":2771,"children":2772},{"style":215},[2773],{"type":37,"value":1056},{"type":32,"tag":208,"props":2775,"children":2776},{"class":210,"line":1364},[2777],{"type":32,"tag":208,"props":2778,"children":2779},{"style":215},[2780],{"type":37,"value":929},{"type":32,"tag":33,"props":2782,"children":2783},{},[2784],{"type":37,"value":2785},"Diese Architektur führt zu:",{"type":32,"tag":730,"props":2787,"children":2788},{},[2789,2794,2799,2804,2809],{"type":32,"tag":734,"props":2790,"children":2791},{},[2792],{"type":37,"value":2793},"Collection Metadaten und Product Cards werden auf dem Server gerendert → SEO-freundlich, kleine Bundle-Größe",{"type":32,"tag":734,"props":2795,"children":2796},{},[2797],{"type":37,"value":2798},"Filter-UI ist eine Client Component → interaktiv, mit State Management",{"type":32,"tag":734,"props":2800,"children":2801},{},[2802],{"type":37,"value":2803},"Initial Bundle: 72 kb (Filter + Event Handler)",{"type":32,"tag":734,"props":2805,"children":2806},{},[2807],{"type":37,"value":2808},"Hydration-Zeit: 160 ms",{"type":32,"tag":734,"props":2810,"children":2811},{},[2812],{"type":37,"value":2813},"TBT: 240 ms",{"type":32,"tag":33,"props":2815,"children":2816},{},[2817],{"type":37,"value":2818},"Würde man die gesamte Seite als CSR bauen, würde das Bundle 210 kb betragen, TBT 1100 ms. Conversion Rate Impact: 4,2 % Anstieg (A\u002FB Test, 14 Tage, n=48.000).",{"type":32,"tag":33,"props":2820,"children":2821},{},[2822,2824,2831],{"type":37,"value":2823},"Die Entscheidung fällt auf Component-Ebene — Bundle-Größe und Interaktivitäts-Latenz Tradeoff sind messbar. Diese Architektur produziert in unserem ",{"type":32,"tag":781,"props":2825,"children":2828},{"href":2826,"rel":2827},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fui-ux",[785],[2829],{"type":37,"value":2830},"UI\u002FUX Prozess",{"type":37,"value":2832}," auch eine Component Priority Matrix basierend auf Nutzerverhalten-Daten — welches Element sollte auf dem Client sein, welches mit RSC serviert werden?",{"type":32,"tag":2834,"props":2835,"children":2836},"style",{},[2837],{"type":37,"value":2838},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":264,"depth":264,"links":2840},[2841,2844,2845,2848,2849,2850],{"id":42,"depth":238,"text":45,"children":2842},[2843],{"id":171,"depth":264,"text":174},{"id":687,"depth":238,"text":690},{"id":806,"depth":238,"text":809,"children":2846},[2847],{"id":1621,"depth":264,"text":1624},{"id":1955,"depth":238,"text":1958},{"id":2054,"depth":238,"text":2057},{"id":2276,"depth":238,"text":2279},"markdown","content:de:tech:server-komponenten-vs-client-2026-die-richtige-grenzziehung.md","content","de\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung.md","de\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung","md",1785103517453]