[{"data":1,"prerenderedAt":2262},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fedge-ssr-personalisierung-latenz-40ms":13},{"i18nKey":4,"paths":5},"tech-003-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fedge-ssr-personalisierung-latenz-40ms","\u002Fen\u002Ftech\u002Fedge-ssr-personalization-40ms-latency","\u002Fes\u002Ftech\u002Freducir-latencia-personalizacion-edge-ssr-40ms","\u002Ffr\u002Ftech\u002Fedge-ssr-personalizasyon-latency-40ms","\u002Fit\u002Ftech\u002Fedge-ssr-personalization-40ms","\u002Fru\u002Ftech\u002Fedge-ssr-snizit-personalizacija-latenciju-40ms","\u002Ftr\u002Ftech\u002Fedge-ssr-ile-personalizasyon-latencysini-40msye-dusurmek",{"_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":2256,"_id":2257,"_source":2258,"_file":2259,"_stem":2260,"_extension":2261},"tech",false,"","Personalisierungslatenz mit Edge SSR auf unter 40ms reduzieren","Mit Cloudflare Workers und Vercel Edge sowie KV-Store-Architektur serverseitige Personalisierungsverzögerungen auf unter 40 Millisekunden senken.","2026-05-12",[21,22,23,24,25],"edge-computing","ssr","personalisierung","cloudflare-workers","vercel-edge",9,"Roibase",{"type":29,"children":30,"toc":2244},"root",[31,39,46,51,56,72,78,83,535,540,547,552,659,672,678,683,688,729,889,902,907,913,918,926,931,1172,1177,1183,1188,1199,1452,1457,1467,1687,1700,1836,1841,1847,1852,1860,1865,2122,2127,2151,2164,2170,2175,2228,2233,2238],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Herkömmliches Server-Side Rendering auf Origin-Servern bedeutet durchschnittlich 200–400ms Latenz. Mit HTML-Caching auf CDN-Edges sinkst du auf 20–50ms, verlierst aber Personalisierung. Edge SSR bricht diesen Tradeoff auf: Du bekommst Personalisierung UND Response unter 40ms. Möglich wird das durch Edge Runtimes wie Cloudflare Workers und Vercel Edge plus verteilter KV-Speicher. Die Frage „Cache oder Personalisierung?\" verschwindet — du bekommst beides.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"warum-edge-ssr-jetzt-kritisch-ist",[44],{"type":37,"value":45},"Warum Edge SSR jetzt kritisch ist",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Seit 2025 ist Chromes INP-Metrik Teil der Core Web Vitals. Eine Server-Response über 200ms kann INP allein kaputt machen. Jeder Request zum Origin kostet 150–300ms, wegen physikalischer Distanz und Cold Starts. Edge Runtimes eliminieren diesen Engpass: Dein Code läuft im nächstgelegenen POP (Point of Presence), Daten kommen aus dem regionalen KV-Store in 5–15ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Das ist nicht nur Geschwindigkeit. Für Personalisierung brauchst du keinen Origin-Request mehr. User-Segmente, Präferenzen, Warenkorbstatus — alles im Edge-KV gespeichert. Wenn ein Request ankommt, liest die Edge-Function diese Daten und rendert HTML sofort. Der Origin-Server wird nur für Schreiboperationen und schwere Berechnungen genutzt.",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,70],{"type":37,"value":60},"Bei Plattformen wie Shopify ist diese Architektur besonders wertvoll. Liquid-Templates werden auf dem Origin gerendert und dauern pro Seite 300–600ms. Mit Edge SSR machst du HTML komposierbar: Eine Edge-Function rendert die Produktkarte, eine andere injiziert Warenkorbinformationen. Gesamtlatenz bleibt unter 40ms. Für tiefere Integrationsmuster siehe ",{"type":32,"tag":62,"props":63,"children":67},"a",{"href":64,"rel":65},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[66],"nofollow",[68],{"type":37,"value":69},"Headless Commerce",{"type":37,"value":71},".",{"type":32,"tag":40,"props":73,"children":75},{"id":74},"cloudflare-workers-kv-der-architektonische-kern",[76],{"type":37,"value":77},"Cloudflare Workers + KV: Der architektonische Kern",{"type":32,"tag":33,"props":79,"children":80},{},[81],{"type":37,"value":82},"Cloudflare Workers läuft auf V8-Isolaten. Es startet keine neuen Container pro Request, sondern öffnet JavaScript-Isolate. Der Overhead: 0,5–2ms. Der Worker-Code sieht so aus:",{"type":32,"tag":84,"props":85,"children":89},"pre",{"code":86,"language":87,"meta":16,"className":88,"style":16},"export default {\n  async fetch(request, env) {\n    const url = new URL(request.url);\n    const userId = request.headers.get('CF-Connecting-IP') || 'anonymous';\n    \n    \u002F\u002F User-Segment aus KV auslesen\n    const segment = await env.USER_SEGMENTS.get(userId);\n    \n    \u002F\u002F Produktliste je nach Segment rendern\n    const products = segment === 'premium' \n      ? await fetchPremiumProducts() \n      : await fetchStandardProducts();\n    \n    const html = renderHTML(products, segment);\n    \n    return new Response(html, {\n      headers: { 'Content-Type': 'text\u002Fhtml; charset=utf-8' }\n    });\n  }\n};\n","javascript","language-javascript shiki shiki-themes github-dark",[90],{"type":32,"tag":91,"props":92,"children":93},"code",{"__ignoreMap":16},[94,117,158,193,250,259,269,314,322,330,367,390,413,421,448,456,479,508,517,526],{"type":32,"tag":95,"props":96,"children":99},"span",{"class":97,"line":98},"line",1,[100,106,111],{"type":32,"tag":95,"props":101,"children":103},{"style":102},"--shiki-default:#F97583",[104],{"type":37,"value":105},"export",{"type":32,"tag":95,"props":107,"children":108},{"style":102},[109],{"type":37,"value":110}," default",{"type":32,"tag":95,"props":112,"children":114},{"style":113},"--shiki-default:#E1E4E8",[115],{"type":37,"value":116}," {\n",{"type":32,"tag":95,"props":118,"children":120},{"class":97,"line":119},2,[121,126,132,137,143,148,153],{"type":32,"tag":95,"props":122,"children":123},{"style":102},[124],{"type":37,"value":125},"  async",{"type":32,"tag":95,"props":127,"children":129},{"style":128},"--shiki-default:#B392F0",[130],{"type":37,"value":131}," fetch",{"type":32,"tag":95,"props":133,"children":134},{"style":113},[135],{"type":37,"value":136},"(",{"type":32,"tag":95,"props":138,"children":140},{"style":139},"--shiki-default:#FFAB70",[141],{"type":37,"value":142},"request",{"type":32,"tag":95,"props":144,"children":145},{"style":113},[146],{"type":37,"value":147},", ",{"type":32,"tag":95,"props":149,"children":150},{"style":139},[151],{"type":37,"value":152},"env",{"type":32,"tag":95,"props":154,"children":155},{"style":113},[156],{"type":37,"value":157},") {\n",{"type":32,"tag":95,"props":159,"children":161},{"class":97,"line":160},3,[162,167,173,178,183,188],{"type":32,"tag":95,"props":163,"children":164},{"style":102},[165],{"type":37,"value":166},"    const",{"type":32,"tag":95,"props":168,"children":170},{"style":169},"--shiki-default:#79B8FF",[171],{"type":37,"value":172}," url",{"type":32,"tag":95,"props":174,"children":175},{"style":102},[176],{"type":37,"value":177}," =",{"type":32,"tag":95,"props":179,"children":180},{"style":102},[181],{"type":37,"value":182}," new",{"type":32,"tag":95,"props":184,"children":185},{"style":128},[186],{"type":37,"value":187}," URL",{"type":32,"tag":95,"props":189,"children":190},{"style":113},[191],{"type":37,"value":192},"(request.url);\n",{"type":32,"tag":95,"props":194,"children":196},{"class":97,"line":195},4,[197,201,206,210,215,220,224,230,235,240,245],{"type":32,"tag":95,"props":198,"children":199},{"style":102},[200],{"type":37,"value":166},{"type":32,"tag":95,"props":202,"children":203},{"style":169},[204],{"type":37,"value":205}," userId",{"type":32,"tag":95,"props":207,"children":208},{"style":102},[209],{"type":37,"value":177},{"type":32,"tag":95,"props":211,"children":212},{"style":113},[213],{"type":37,"value":214}," request.headers.",{"type":32,"tag":95,"props":216,"children":217},{"style":128},[218],{"type":37,"value":219},"get",{"type":32,"tag":95,"props":221,"children":222},{"style":113},[223],{"type":37,"value":136},{"type":32,"tag":95,"props":225,"children":227},{"style":226},"--shiki-default:#9ECBFF",[228],{"type":37,"value":229},"'CF-Connecting-IP'",{"type":32,"tag":95,"props":231,"children":232},{"style":113},[233],{"type":37,"value":234},") ",{"type":32,"tag":95,"props":236,"children":237},{"style":102},[238],{"type":37,"value":239},"||",{"type":32,"tag":95,"props":241,"children":242},{"style":226},[243],{"type":37,"value":244}," 'anonymous'",{"type":32,"tag":95,"props":246,"children":247},{"style":113},[248],{"type":37,"value":249},";\n",{"type":32,"tag":95,"props":251,"children":253},{"class":97,"line":252},5,[254],{"type":32,"tag":95,"props":255,"children":256},{"style":113},[257],{"type":37,"value":258},"    \n",{"type":32,"tag":95,"props":260,"children":262},{"class":97,"line":261},6,[263],{"type":32,"tag":95,"props":264,"children":266},{"style":265},"--shiki-default:#6A737D",[267],{"type":37,"value":268},"    \u002F\u002F User-Segment aus KV auslesen\n",{"type":32,"tag":95,"props":270,"children":272},{"class":97,"line":271},7,[273,277,282,286,291,296,301,305,309],{"type":32,"tag":95,"props":274,"children":275},{"style":102},[276],{"type":37,"value":166},{"type":32,"tag":95,"props":278,"children":279},{"style":169},[280],{"type":37,"value":281}," segment",{"type":32,"tag":95,"props":283,"children":284},{"style":102},[285],{"type":37,"value":177},{"type":32,"tag":95,"props":287,"children":288},{"style":102},[289],{"type":37,"value":290}," await",{"type":32,"tag":95,"props":292,"children":293},{"style":113},[294],{"type":37,"value":295}," env.",{"type":32,"tag":95,"props":297,"children":298},{"style":169},[299],{"type":37,"value":300},"USER_SEGMENTS",{"type":32,"tag":95,"props":302,"children":303},{"style":113},[304],{"type":37,"value":71},{"type":32,"tag":95,"props":306,"children":307},{"style":128},[308],{"type":37,"value":219},{"type":32,"tag":95,"props":310,"children":311},{"style":113},[312],{"type":37,"value":313},"(userId);\n",{"type":32,"tag":95,"props":315,"children":317},{"class":97,"line":316},8,[318],{"type":32,"tag":95,"props":319,"children":320},{"style":113},[321],{"type":37,"value":258},{"type":32,"tag":95,"props":323,"children":324},{"class":97,"line":26},[325],{"type":32,"tag":95,"props":326,"children":327},{"style":265},[328],{"type":37,"value":329},"    \u002F\u002F Produktliste je nach Segment rendern\n",{"type":32,"tag":95,"props":331,"children":333},{"class":97,"line":332},10,[334,338,343,347,352,357,362],{"type":32,"tag":95,"props":335,"children":336},{"style":102},[337],{"type":37,"value":166},{"type":32,"tag":95,"props":339,"children":340},{"style":169},[341],{"type":37,"value":342}," products",{"type":32,"tag":95,"props":344,"children":345},{"style":102},[346],{"type":37,"value":177},{"type":32,"tag":95,"props":348,"children":349},{"style":113},[350],{"type":37,"value":351}," segment ",{"type":32,"tag":95,"props":353,"children":354},{"style":102},[355],{"type":37,"value":356},"===",{"type":32,"tag":95,"props":358,"children":359},{"style":226},[360],{"type":37,"value":361}," 'premium'",{"type":32,"tag":95,"props":363,"children":364},{"style":113},[365],{"type":37,"value":366}," \n",{"type":32,"tag":95,"props":368,"children":370},{"class":97,"line":369},11,[371,376,380,385],{"type":32,"tag":95,"props":372,"children":373},{"style":102},[374],{"type":37,"value":375},"      ?",{"type":32,"tag":95,"props":377,"children":378},{"style":102},[379],{"type":37,"value":290},{"type":32,"tag":95,"props":381,"children":382},{"style":128},[383],{"type":37,"value":384}," fetchPremiumProducts",{"type":32,"tag":95,"props":386,"children":387},{"style":113},[388],{"type":37,"value":389},"() \n",{"type":32,"tag":95,"props":391,"children":393},{"class":97,"line":392},12,[394,399,403,408],{"type":32,"tag":95,"props":395,"children":396},{"style":102},[397],{"type":37,"value":398},"      :",{"type":32,"tag":95,"props":400,"children":401},{"style":102},[402],{"type":37,"value":290},{"type":32,"tag":95,"props":404,"children":405},{"style":128},[406],{"type":37,"value":407}," fetchStandardProducts",{"type":32,"tag":95,"props":409,"children":410},{"style":113},[411],{"type":37,"value":412},"();\n",{"type":32,"tag":95,"props":414,"children":416},{"class":97,"line":415},13,[417],{"type":32,"tag":95,"props":418,"children":419},{"style":113},[420],{"type":37,"value":258},{"type":32,"tag":95,"props":422,"children":424},{"class":97,"line":423},14,[425,429,434,438,443],{"type":32,"tag":95,"props":426,"children":427},{"style":102},[428],{"type":37,"value":166},{"type":32,"tag":95,"props":430,"children":431},{"style":169},[432],{"type":37,"value":433}," html",{"type":32,"tag":95,"props":435,"children":436},{"style":102},[437],{"type":37,"value":177},{"type":32,"tag":95,"props":439,"children":440},{"style":128},[441],{"type":37,"value":442}," renderHTML",{"type":32,"tag":95,"props":444,"children":445},{"style":113},[446],{"type":37,"value":447},"(products, segment);\n",{"type":32,"tag":95,"props":449,"children":451},{"class":97,"line":450},15,[452],{"type":32,"tag":95,"props":453,"children":454},{"style":113},[455],{"type":37,"value":258},{"type":32,"tag":95,"props":457,"children":459},{"class":97,"line":458},16,[460,465,469,474],{"type":32,"tag":95,"props":461,"children":462},{"style":102},[463],{"type":37,"value":464},"    return",{"type":32,"tag":95,"props":466,"children":467},{"style":102},[468],{"type":37,"value":182},{"type":32,"tag":95,"props":470,"children":471},{"style":128},[472],{"type":37,"value":473}," Response",{"type":32,"tag":95,"props":475,"children":476},{"style":113},[477],{"type":37,"value":478},"(html, {\n",{"type":32,"tag":95,"props":480,"children":482},{"class":97,"line":481},17,[483,488,493,498,503],{"type":32,"tag":95,"props":484,"children":485},{"style":113},[486],{"type":37,"value":487},"      headers: { ",{"type":32,"tag":95,"props":489,"children":490},{"style":226},[491],{"type":37,"value":492},"'Content-Type'",{"type":32,"tag":95,"props":494,"children":495},{"style":113},[496],{"type":37,"value":497},": ",{"type":32,"tag":95,"props":499,"children":500},{"style":226},[501],{"type":37,"value":502},"'text\u002Fhtml; charset=utf-8'",{"type":32,"tag":95,"props":504,"children":505},{"style":113},[506],{"type":37,"value":507}," }\n",{"type":32,"tag":95,"props":509,"children":511},{"class":97,"line":510},18,[512],{"type":32,"tag":95,"props":513,"children":514},{"style":113},[515],{"type":37,"value":516},"    });\n",{"type":32,"tag":95,"props":518,"children":520},{"class":97,"line":519},19,[521],{"type":32,"tag":95,"props":522,"children":523},{"style":113},[524],{"type":37,"value":525},"  }\n",{"type":32,"tag":95,"props":527,"children":529},{"class":97,"line":528},20,[530],{"type":32,"tag":95,"props":531,"children":532},{"style":113},[533],{"type":37,"value":534},"};\n",{"type":32,"tag":33,"props":536,"children":537},{},[538],{"type":37,"value":539},"Cloudflare KV repliziert über 300+ POPs. Read-Latenz liegt global durchschnittlich bei 12ms. Writes verbreiten sich mit „Eventual Consistency\" in 60 Sekunden. Deshalb schreibst du in KV nur selten ändernde Daten: User-Vorlieben, Segment-Zuordnungen, Feature Flags. Schnell wechselnde Daten wie Produktpreise holst du aus der Origin-API und cachest sie am Edge (mit Cache API, 60s TTL).",{"type":32,"tag":541,"props":542,"children":544},"h3",{"id":543},"vercel-edge-vs-cloudflare-workers",[545],{"type":37,"value":546},"Vercel Edge vs. Cloudflare Workers",{"type":32,"tag":33,"props":548,"children":549},{},[550],{"type":37,"value":551},"Vercel Edge Functions nutzen dasselbe V8-Isolate-Modell, aber ein anderes Netzwerk. Cloudflare: 300+ POPs; Vercel: ~15 regionale Edge-Standorte. Latenz-Vergleich (europäischer User, US-Origin):",{"type":32,"tag":553,"props":554,"children":555},"table",{},[556,585],{"type":32,"tag":557,"props":558,"children":559},"thead",{},[560],{"type":32,"tag":561,"props":562,"children":563},"tr",{},[564,570,575,580],{"type":32,"tag":565,"props":566,"children":567},"th",{},[568],{"type":37,"value":569},"Runtime",{"type":32,"tag":565,"props":571,"children":572},{},[573],{"type":37,"value":574},"Cold Start",{"type":32,"tag":565,"props":576,"children":577},{},[578],{"type":37,"value":579},"KV-Lesevorgang",{"type":32,"tag":565,"props":581,"children":582},{},[583],{"type":37,"value":584},"Gesamt TTFB",{"type":32,"tag":586,"props":587,"children":588},"tbody",{},[589,613,636],{"type":32,"tag":561,"props":590,"children":591},{},[592,598,603,608],{"type":32,"tag":593,"props":594,"children":595},"td",{},[596],{"type":37,"value":597},"Origin SSR",{"type":32,"tag":593,"props":599,"children":600},{},[601],{"type":37,"value":602},"150ms",{"type":32,"tag":593,"props":604,"children":605},{},[606],{"type":37,"value":607},"N\u002FA",{"type":32,"tag":593,"props":609,"children":610},{},[611],{"type":37,"value":612},"380ms",{"type":32,"tag":561,"props":614,"children":615},{},[616,621,626,631],{"type":32,"tag":593,"props":617,"children":618},{},[619],{"type":37,"value":620},"Vercel Edge",{"type":32,"tag":593,"props":622,"children":623},{},[624],{"type":37,"value":625},"8ms",{"type":32,"tag":593,"props":627,"children":628},{},[629],{"type":37,"value":630},"22ms",{"type":32,"tag":593,"props":632,"children":633},{},[634],{"type":37,"value":635},"45ms",{"type":32,"tag":561,"props":637,"children":638},{},[639,644,649,654],{"type":32,"tag":593,"props":640,"children":641},{},[642],{"type":37,"value":643},"Cloudflare Workers",{"type":32,"tag":593,"props":645,"children":646},{},[647],{"type":37,"value":648},"1ms",{"type":32,"tag":593,"props":650,"children":651},{},[652],{"type":37,"value":653},"11ms",{"type":32,"tag":593,"props":655,"children":656},{},[657],{"type":37,"value":658},"28ms",{"type":32,"tag":33,"props":660,"children":661},{},[662,664,670],{"type":37,"value":663},"Vorteil von Vercel: tiefe Integration mit dem Next.js-Ökosystem. Du schreibst in ",{"type":32,"tag":91,"props":665,"children":667},{"className":666},[],[668],{"type":37,"value":669},"middleware.ts",{"type":37,"value":671},", pusht den Code in Produktion, und die Orchestrierung übernimmt Vercel. Bei Cloudflare brauchst du Wrangler CLI und manuelle KV-Bindungen. Tradeoff: mehr Kontrolle vs. schnelleres Onboarding.",{"type":32,"tag":40,"props":673,"children":675},{"id":674},"kv-store-architektur-write-pattern-und-revalidation",[676],{"type":37,"value":677},"KV-Store-Architektur: Write-Pattern und Revalidation",{"type":32,"tag":33,"props":679,"children":680},{},[681],{"type":37,"value":682},"Die Eventual Consistency von Edge-KV ist eine Beschränkung. Ein User klickt einen Button, seine Präferenz ändert sich — diese Änderung verteilt sich in 60 Sekunden auf alle Edges. In der Zwischenzeit könnten verschiedene POPs verschiedene Werte lesen. Lösung: Nach dem Schreiben zur Origin redirecten oder Client-seitig optimistic update machen.",{"type":32,"tag":33,"props":684,"children":685},{},[686],{"type":37,"value":687},"Beispiel-Flow:",{"type":32,"tag":689,"props":690,"children":691},"ol",{},[692,698,711,724],{"type":32,"tag":693,"props":694,"children":695},"li",{},[696],{"type":37,"value":697},"User klickt auf „Dunkler Modus\"",{"type":32,"tag":693,"props":699,"children":700},{},[701,703,709],{"type":37,"value":702},"Client sendet POST ",{"type":32,"tag":91,"props":704,"children":706},{"className":705},[],[707],{"type":37,"value":708},"\u002Fapi\u002Fpreferences",{"type":37,"value":710}," zum Origin",{"type":32,"tag":693,"props":712,"children":713},{},[714,716,722],{"type":37,"value":715},"Origin schreibt ",{"type":32,"tag":91,"props":717,"children":719},{"className":718},[],[720],{"type":37,"value":721},"user:123:theme = dark",{"type":37,"value":723}," ins KV",{"type":32,"tag":693,"props":725,"children":726},{},[727],{"type":37,"value":728},"Origin ruft die Cloudflare API zur sofortigen Cache-Invalidierung auf:",{"type":32,"tag":84,"props":730,"children":732},{"code":731,"language":87,"meta":16,"className":88,"style":16},"\u002F\u002F Auf dem Origin\nawait fetch(`https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F${zoneId}\u002Fpurge_cache`, {\n  method: 'POST',\n  headers: { 'Authorization': `Bearer ${apiToken}` },\n  body: JSON.stringify({ files: [`https:\u002F\u002Fexample.com\u002Fuser\u002F${userId}`] })\n});\n",[733],{"type":32,"tag":91,"props":734,"children":735},{"__ignoreMap":16},[736,744,780,798,835,881],{"type":32,"tag":95,"props":737,"children":738},{"class":97,"line":98},[739],{"type":32,"tag":95,"props":740,"children":741},{"style":265},[742],{"type":37,"value":743},"\u002F\u002F Auf dem Origin\n",{"type":32,"tag":95,"props":745,"children":746},{"class":97,"line":119},[747,752,756,760,765,770,775],{"type":32,"tag":95,"props":748,"children":749},{"style":102},[750],{"type":37,"value":751},"await",{"type":32,"tag":95,"props":753,"children":754},{"style":128},[755],{"type":37,"value":131},{"type":32,"tag":95,"props":757,"children":758},{"style":113},[759],{"type":37,"value":136},{"type":32,"tag":95,"props":761,"children":762},{"style":226},[763],{"type":37,"value":764},"`https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F${",{"type":32,"tag":95,"props":766,"children":767},{"style":113},[768],{"type":37,"value":769},"zoneId",{"type":32,"tag":95,"props":771,"children":772},{"style":226},[773],{"type":37,"value":774},"}\u002Fpurge_cache`",{"type":32,"tag":95,"props":776,"children":777},{"style":113},[778],{"type":37,"value":779},", {\n",{"type":32,"tag":95,"props":781,"children":782},{"class":97,"line":160},[783,788,793],{"type":32,"tag":95,"props":784,"children":785},{"style":113},[786],{"type":37,"value":787},"  method: ",{"type":32,"tag":95,"props":789,"children":790},{"style":226},[791],{"type":37,"value":792},"'POST'",{"type":32,"tag":95,"props":794,"children":795},{"style":113},[796],{"type":37,"value":797},",\n",{"type":32,"tag":95,"props":799,"children":800},{"class":97,"line":195},[801,806,811,815,820,825,830],{"type":32,"tag":95,"props":802,"children":803},{"style":113},[804],{"type":37,"value":805},"  headers: { ",{"type":32,"tag":95,"props":807,"children":808},{"style":226},[809],{"type":37,"value":810},"'Authorization'",{"type":32,"tag":95,"props":812,"children":813},{"style":113},[814],{"type":37,"value":497},{"type":32,"tag":95,"props":816,"children":817},{"style":226},[818],{"type":37,"value":819},"`Bearer ${",{"type":32,"tag":95,"props":821,"children":822},{"style":113},[823],{"type":37,"value":824},"apiToken",{"type":32,"tag":95,"props":826,"children":827},{"style":226},[828],{"type":37,"value":829},"}`",{"type":32,"tag":95,"props":831,"children":832},{"style":113},[833],{"type":37,"value":834}," },\n",{"type":32,"tag":95,"props":836,"children":837},{"class":97,"line":252},[838,843,848,852,857,862,867,872,876],{"type":32,"tag":95,"props":839,"children":840},{"style":113},[841],{"type":37,"value":842},"  body: ",{"type":32,"tag":95,"props":844,"children":845},{"style":169},[846],{"type":37,"value":847},"JSON",{"type":32,"tag":95,"props":849,"children":850},{"style":113},[851],{"type":37,"value":71},{"type":32,"tag":95,"props":853,"children":854},{"style":128},[855],{"type":37,"value":856},"stringify",{"type":32,"tag":95,"props":858,"children":859},{"style":113},[860],{"type":37,"value":861},"({ files: [",{"type":32,"tag":95,"props":863,"children":864},{"style":226},[865],{"type":37,"value":866},"`https:\u002F\u002Fexample.com\u002Fuser\u002F${",{"type":32,"tag":95,"props":868,"children":869},{"style":113},[870],{"type":37,"value":871},"userId",{"type":32,"tag":95,"props":873,"children":874},{"style":226},[875],{"type":37,"value":829},{"type":32,"tag":95,"props":877,"children":878},{"style":113},[879],{"type":37,"value":880},"] })\n",{"type":32,"tag":95,"props":882,"children":883},{"class":97,"line":261},[884],{"type":32,"tag":95,"props":885,"children":886},{"style":113},[887],{"type":37,"value":888},"});\n",{"type":32,"tag":689,"props":890,"children":891},{"start":252},[892,897],{"type":32,"tag":693,"props":893,"children":894},{},[895],{"type":37,"value":896},"Die Edge-Function liest beim nächsten Request den neuen Wert aus KV",{"type":32,"tag":693,"props":898,"children":899},{},[900],{"type":37,"value":901},"Client-seitiges JavaScript führt nach 200ms ein Soft-Reload durch",{"type":32,"tag":33,"props":903,"children":904},{},[905],{"type":37,"value":906},"Dieses Pattern beschränkt Write-Durchsatz (KV Write Rate Limit: 1000\u002FSekunde pro Konto), aber Read-Durchsatz ist unbegrenzt. Die Architektur ist also für Read-Heavy Workloads optimiert. User-Aktionen sind selten (1–2 pro Minute), Seitenaufrufe häufig (100+\u002FSekunde).",{"type":32,"tag":541,"props":908,"children":910},{"id":909},"cache-layering-strategie",[911],{"type":37,"value":912},"Cache-Layering-Strategie",{"type":32,"tag":33,"props":914,"children":915},{},[916],{"type":37,"value":917},"KV ist nicht die einzige Cache-Ebene. Der Full Stack:",{"type":32,"tag":84,"props":919,"children":921},{"code":920},"Browser-Cache (Service Worker)\n  ↓\nCDN-Edge-Cache (Cache API, 60s TTL)\n  ↓\nEdge KV (Eventual, Minuten)\n  ↓\nOrigin-Datenbank\n",[922],{"type":32,"tag":91,"props":923,"children":924},{"__ignoreMap":16},[925],{"type":37,"value":920},{"type":32,"tag":33,"props":927,"children":928},{},[929],{"type":37,"value":930},"Static Assets (CSS, JS) oben, benutzerspezifische Daten unten. Das HTML selbst ist in der mittleren Schicht: die Edge-Function kombiniert KV + Cache API zum Rendern. Pseudocode:",{"type":32,"tag":84,"props":932,"children":934},{"code":933,"language":87,"meta":16,"className":88,"style":16},"const cacheKey = `html:${url}:${segment}`;\nlet html = await caches.default.match(cacheKey);\n\nif (!html) {\n  const userData = await KV.get(userId);\n  html = renderTemplate(userData);\n  await caches.default.put(cacheKey, html, { expirationTtl: 60 });\n}\n\nreturn html;\n",[935],{"type":32,"tag":91,"props":936,"children":937},{"__ignoreMap":16},[938,983,1020,1029,1052,1090,1112,1144,1152,1159],{"type":32,"tag":95,"props":939,"children":940},{"class":97,"line":98},[941,946,951,955,960,965,970,975,979],{"type":32,"tag":95,"props":942,"children":943},{"style":102},[944],{"type":37,"value":945},"const",{"type":32,"tag":95,"props":947,"children":948},{"style":169},[949],{"type":37,"value":950}," cacheKey",{"type":32,"tag":95,"props":952,"children":953},{"style":102},[954],{"type":37,"value":177},{"type":32,"tag":95,"props":956,"children":957},{"style":226},[958],{"type":37,"value":959}," `html:${",{"type":32,"tag":95,"props":961,"children":962},{"style":113},[963],{"type":37,"value":964},"url",{"type":32,"tag":95,"props":966,"children":967},{"style":226},[968],{"type":37,"value":969},"}:${",{"type":32,"tag":95,"props":971,"children":972},{"style":113},[973],{"type":37,"value":974},"segment",{"type":32,"tag":95,"props":976,"children":977},{"style":226},[978],{"type":37,"value":829},{"type":32,"tag":95,"props":980,"children":981},{"style":113},[982],{"type":37,"value":249},{"type":32,"tag":95,"props":984,"children":985},{"class":97,"line":119},[986,991,996,1001,1005,1010,1015],{"type":32,"tag":95,"props":987,"children":988},{"style":102},[989],{"type":37,"value":990},"let",{"type":32,"tag":95,"props":992,"children":993},{"style":113},[994],{"type":37,"value":995}," html ",{"type":32,"tag":95,"props":997,"children":998},{"style":102},[999],{"type":37,"value":1000},"=",{"type":32,"tag":95,"props":1002,"children":1003},{"style":102},[1004],{"type":37,"value":290},{"type":32,"tag":95,"props":1006,"children":1007},{"style":113},[1008],{"type":37,"value":1009}," caches.default.",{"type":32,"tag":95,"props":1011,"children":1012},{"style":128},[1013],{"type":37,"value":1014},"match",{"type":32,"tag":95,"props":1016,"children":1017},{"style":113},[1018],{"type":37,"value":1019},"(cacheKey);\n",{"type":32,"tag":95,"props":1021,"children":1022},{"class":97,"line":160},[1023],{"type":32,"tag":95,"props":1024,"children":1026},{"emptyLinePlaceholder":1025},true,[1027],{"type":37,"value":1028},"\n",{"type":32,"tag":95,"props":1030,"children":1031},{"class":97,"line":195},[1032,1037,1042,1047],{"type":32,"tag":95,"props":1033,"children":1034},{"style":102},[1035],{"type":37,"value":1036},"if",{"type":32,"tag":95,"props":1038,"children":1039},{"style":113},[1040],{"type":37,"value":1041}," (",{"type":32,"tag":95,"props":1043,"children":1044},{"style":102},[1045],{"type":37,"value":1046},"!",{"type":32,"tag":95,"props":1048,"children":1049},{"style":113},[1050],{"type":37,"value":1051},"html) {\n",{"type":32,"tag":95,"props":1053,"children":1054},{"class":97,"line":252},[1055,1060,1065,1069,1073,1078,1082,1086],{"type":32,"tag":95,"props":1056,"children":1057},{"style":102},[1058],{"type":37,"value":1059},"  const",{"type":32,"tag":95,"props":1061,"children":1062},{"style":169},[1063],{"type":37,"value":1064}," userData",{"type":32,"tag":95,"props":1066,"children":1067},{"style":102},[1068],{"type":37,"value":177},{"type":32,"tag":95,"props":1070,"children":1071},{"style":102},[1072],{"type":37,"value":290},{"type":32,"tag":95,"props":1074,"children":1075},{"style":169},[1076],{"type":37,"value":1077}," KV",{"type":32,"tag":95,"props":1079,"children":1080},{"style":113},[1081],{"type":37,"value":71},{"type":32,"tag":95,"props":1083,"children":1084},{"style":128},[1085],{"type":37,"value":219},{"type":32,"tag":95,"props":1087,"children":1088},{"style":113},[1089],{"type":37,"value":313},{"type":32,"tag":95,"props":1091,"children":1092},{"class":97,"line":261},[1093,1098,1102,1107],{"type":32,"tag":95,"props":1094,"children":1095},{"style":113},[1096],{"type":37,"value":1097},"  html ",{"type":32,"tag":95,"props":1099,"children":1100},{"style":102},[1101],{"type":37,"value":1000},{"type":32,"tag":95,"props":1103,"children":1104},{"style":128},[1105],{"type":37,"value":1106}," renderTemplate",{"type":32,"tag":95,"props":1108,"children":1109},{"style":113},[1110],{"type":37,"value":1111},"(userData);\n",{"type":32,"tag":95,"props":1113,"children":1114},{"class":97,"line":271},[1115,1120,1124,1129,1134,1139],{"type":32,"tag":95,"props":1116,"children":1117},{"style":102},[1118],{"type":37,"value":1119},"  await",{"type":32,"tag":95,"props":1121,"children":1122},{"style":113},[1123],{"type":37,"value":1009},{"type":32,"tag":95,"props":1125,"children":1126},{"style":128},[1127],{"type":37,"value":1128},"put",{"type":32,"tag":95,"props":1130,"children":1131},{"style":113},[1132],{"type":37,"value":1133},"(cacheKey, html, { expirationTtl: ",{"type":32,"tag":95,"props":1135,"children":1136},{"style":169},[1137],{"type":37,"value":1138},"60",{"type":32,"tag":95,"props":1140,"children":1141},{"style":113},[1142],{"type":37,"value":1143}," });\n",{"type":32,"tag":95,"props":1145,"children":1146},{"class":97,"line":316},[1147],{"type":32,"tag":95,"props":1148,"children":1149},{"style":113},[1150],{"type":37,"value":1151},"}\n",{"type":32,"tag":95,"props":1153,"children":1154},{"class":97,"line":26},[1155],{"type":32,"tag":95,"props":1156,"children":1157},{"emptyLinePlaceholder":1025},[1158],{"type":37,"value":1028},{"type":32,"tag":95,"props":1160,"children":1161},{"class":97,"line":332},[1162,1167],{"type":32,"tag":95,"props":1163,"children":1164},{"style":102},[1165],{"type":37,"value":1166},"return",{"type":32,"tag":95,"props":1168,"children":1169},{"style":113},[1170],{"type":37,"value":1171}," html;\n",{"type":32,"tag":33,"props":1173,"children":1174},{},[1175],{"type":37,"value":1176},"Diese Struktur hält das 95th-Perzentil der TTFB unter 40ms, weil die meisten Requests aus der Cache API bedient werden (5–8ms). KV-Hit-Rate: 98%+, Origin-Fallback: \u003C2%.",{"type":32,"tag":40,"props":1178,"children":1180},{"id":1179},"personalisierungsumfang-und-bundle-size-tradeoff",[1181],{"type":37,"value":1182},"Personalisierungsumfang und Bundle-Size-Tradeoff",{"type":32,"tag":33,"props":1184,"children":1185},{},[1186],{"type":37,"value":1187},"Edge Functions haben eine Bundle-Size-Grenze von 1MB (Cloudflare). Du kannst keine schweren React-Komponenten rendern. Zwei Strategien:",{"type":32,"tag":33,"props":1189,"children":1190},{},[1191,1197],{"type":32,"tag":1192,"props":1193,"children":1194},"strong",{},[1195],{"type":37,"value":1196},"1. Minimales Templating:",{"type":37,"value":1198}," Handlebars oder Custom-String-Interpolation. Nur Variablen injizieren:",{"type":32,"tag":84,"props":1200,"children":1202},{"code":1201,"language":87,"meta":16,"className":88,"style":16},"const template = `\u003Cdiv class=\"product-card\">\n  \u003Ch3>{{name}}\u003C\u002Fh3>\n  \u003Cspan class=\"price {{priceClass}}\">{{price}}\u003C\u002Fspan>\n\u003C\u002Fdiv>`;\n\nfunction render(product, segment) {\n  return template\n    .replace('{{name}}', product.name)\n    .replace('{{price}}', segment === 'premium' ? product.premiumPrice : product.price)\n    .replace('{{priceClass}}', segment === 'premium' ? 'gold' : 'standard');\n}\n",[1203],{"type":32,"tag":91,"props":1204,"children":1205},{"__ignoreMap":16},[1206,1227,1235,1243,1255,1262,1296,1309,1336,1389,1445],{"type":32,"tag":95,"props":1207,"children":1208},{"class":97,"line":98},[1209,1213,1218,1222],{"type":32,"tag":95,"props":1210,"children":1211},{"style":102},[1212],{"type":37,"value":945},{"type":32,"tag":95,"props":1214,"children":1215},{"style":169},[1216],{"type":37,"value":1217}," template",{"type":32,"tag":95,"props":1219,"children":1220},{"style":102},[1221],{"type":37,"value":177},{"type":32,"tag":95,"props":1223,"children":1224},{"style":226},[1225],{"type":37,"value":1226}," `\u003Cdiv class=\"product-card\">\n",{"type":32,"tag":95,"props":1228,"children":1229},{"class":97,"line":119},[1230],{"type":32,"tag":95,"props":1231,"children":1232},{"style":226},[1233],{"type":37,"value":1234},"  \u003Ch3>{{name}}\u003C\u002Fh3>\n",{"type":32,"tag":95,"props":1236,"children":1237},{"class":97,"line":160},[1238],{"type":32,"tag":95,"props":1239,"children":1240},{"style":226},[1241],{"type":37,"value":1242},"  \u003Cspan class=\"price {{priceClass}}\">{{price}}\u003C\u002Fspan>\n",{"type":32,"tag":95,"props":1244,"children":1245},{"class":97,"line":195},[1246,1251],{"type":32,"tag":95,"props":1247,"children":1248},{"style":226},[1249],{"type":37,"value":1250},"\u003C\u002Fdiv>`",{"type":32,"tag":95,"props":1252,"children":1253},{"style":113},[1254],{"type":37,"value":249},{"type":32,"tag":95,"props":1256,"children":1257},{"class":97,"line":252},[1258],{"type":32,"tag":95,"props":1259,"children":1260},{"emptyLinePlaceholder":1025},[1261],{"type":37,"value":1028},{"type":32,"tag":95,"props":1263,"children":1264},{"class":97,"line":261},[1265,1270,1275,1279,1284,1288,1292],{"type":32,"tag":95,"props":1266,"children":1267},{"style":102},[1268],{"type":37,"value":1269},"function",{"type":32,"tag":95,"props":1271,"children":1272},{"style":128},[1273],{"type":37,"value":1274}," render",{"type":32,"tag":95,"props":1276,"children":1277},{"style":113},[1278],{"type":37,"value":136},{"type":32,"tag":95,"props":1280,"children":1281},{"style":139},[1282],{"type":37,"value":1283},"product",{"type":32,"tag":95,"props":1285,"children":1286},{"style":113},[1287],{"type":37,"value":147},{"type":32,"tag":95,"props":1289,"children":1290},{"style":139},[1291],{"type":37,"value":974},{"type":32,"tag":95,"props":1293,"children":1294},{"style":113},[1295],{"type":37,"value":157},{"type":32,"tag":95,"props":1297,"children":1298},{"class":97,"line":271},[1299,1304],{"type":32,"tag":95,"props":1300,"children":1301},{"style":102},[1302],{"type":37,"value":1303},"  return",{"type":32,"tag":95,"props":1305,"children":1306},{"style":113},[1307],{"type":37,"value":1308}," template\n",{"type":32,"tag":95,"props":1310,"children":1311},{"class":97,"line":316},[1312,1317,1322,1326,1331],{"type":32,"tag":95,"props":1313,"children":1314},{"style":113},[1315],{"type":37,"value":1316},"    .",{"type":32,"tag":95,"props":1318,"children":1319},{"style":128},[1320],{"type":37,"value":1321},"replace",{"type":32,"tag":95,"props":1323,"children":1324},{"style":113},[1325],{"type":37,"value":136},{"type":32,"tag":95,"props":1327,"children":1328},{"style":226},[1329],{"type":37,"value":1330},"'{{name}}'",{"type":32,"tag":95,"props":1332,"children":1333},{"style":113},[1334],{"type":37,"value":1335},", product.name)\n",{"type":32,"tag":95,"props":1337,"children":1338},{"class":97,"line":26},[1339,1343,1347,1351,1356,1361,1365,1369,1374,1379,1384],{"type":32,"tag":95,"props":1340,"children":1341},{"style":113},[1342],{"type":37,"value":1316},{"type":32,"tag":95,"props":1344,"children":1345},{"style":128},[1346],{"type":37,"value":1321},{"type":32,"tag":95,"props":1348,"children":1349},{"style":113},[1350],{"type":37,"value":136},{"type":32,"tag":95,"props":1352,"children":1353},{"style":226},[1354],{"type":37,"value":1355},"'{{price}}'",{"type":32,"tag":95,"props":1357,"children":1358},{"style":113},[1359],{"type":37,"value":1360},", segment ",{"type":32,"tag":95,"props":1362,"children":1363},{"style":102},[1364],{"type":37,"value":356},{"type":32,"tag":95,"props":1366,"children":1367},{"style":226},[1368],{"type":37,"value":361},{"type":32,"tag":95,"props":1370,"children":1371},{"style":102},[1372],{"type":37,"value":1373}," ?",{"type":32,"tag":95,"props":1375,"children":1376},{"style":113},[1377],{"type":37,"value":1378}," product.premiumPrice ",{"type":32,"tag":95,"props":1380,"children":1381},{"style":102},[1382],{"type":37,"value":1383},":",{"type":32,"tag":95,"props":1385,"children":1386},{"style":113},[1387],{"type":37,"value":1388}," product.price)\n",{"type":32,"tag":95,"props":1390,"children":1391},{"class":97,"line":332},[1392,1396,1400,1404,1409,1413,1417,1421,1425,1430,1435,1440],{"type":32,"tag":95,"props":1393,"children":1394},{"style":113},[1395],{"type":37,"value":1316},{"type":32,"tag":95,"props":1397,"children":1398},{"style":128},[1399],{"type":37,"value":1321},{"type":32,"tag":95,"props":1401,"children":1402},{"style":113},[1403],{"type":37,"value":136},{"type":32,"tag":95,"props":1405,"children":1406},{"style":226},[1407],{"type":37,"value":1408},"'{{priceClass}}'",{"type":32,"tag":95,"props":1410,"children":1411},{"style":113},[1412],{"type":37,"value":1360},{"type":32,"tag":95,"props":1414,"children":1415},{"style":102},[1416],{"type":37,"value":356},{"type":32,"tag":95,"props":1418,"children":1419},{"style":226},[1420],{"type":37,"value":361},{"type":32,"tag":95,"props":1422,"children":1423},{"style":102},[1424],{"type":37,"value":1373},{"type":32,"tag":95,"props":1426,"children":1427},{"style":226},[1428],{"type":37,"value":1429}," 'gold'",{"type":32,"tag":95,"props":1431,"children":1432},{"style":102},[1433],{"type":37,"value":1434}," :",{"type":32,"tag":95,"props":1436,"children":1437},{"style":226},[1438],{"type":37,"value":1439}," 'standard'",{"type":32,"tag":95,"props":1441,"children":1442},{"style":113},[1443],{"type":37,"value":1444},");\n",{"type":32,"tag":95,"props":1446,"children":1447},{"class":97,"line":369},[1448],{"type":32,"tag":95,"props":1449,"children":1450},{"style":113},[1451],{"type":37,"value":1151},{"type":32,"tag":33,"props":1453,"children":1454},{},[1455],{"type":37,"value":1456},"Bundle-Größe: 2KB. Render-Zeit: 0,3ms.",{"type":32,"tag":33,"props":1458,"children":1459},{},[1460,1465],{"type":32,"tag":1192,"props":1461,"children":1462},{},[1463],{"type":37,"value":1464},"2. Partial Hydration:",{"type":37,"value":1466}," Skeleton-HTML am Edge rendern, Client-seitig React-Islands hydratisieren. Edge-Function:",{"type":32,"tag":84,"props":1468,"children":1470},{"code":1469,"language":87,"meta":16,"className":88,"style":16},"export default async function(request) {\n  const products = await fetchProducts();\n  return `\n    \u003Cdiv id=\"product-list\" data-products='${JSON.stringify(products)}'>\n      ${products.map(p => `\u003Cdiv class=\"skeleton\">\u003C\u002Fdiv>`).join('')}\n    \u003C\u002Fdiv>\n    \u003Cscript type=\"module\" src=\"\u002Fhydrate.js\">\u003C\u002Fscript>\n  `;\n}\n",[1471],{"type":32,"tag":91,"props":1472,"children":1473},{"__ignoreMap":16},[1474,1507,1535,1547,1586,1652,1660,1668,1680],{"type":32,"tag":95,"props":1475,"children":1476},{"class":97,"line":98},[1477,1481,1485,1490,1495,1499,1503],{"type":32,"tag":95,"props":1478,"children":1479},{"style":102},[1480],{"type":37,"value":105},{"type":32,"tag":95,"props":1482,"children":1483},{"style":102},[1484],{"type":37,"value":110},{"type":32,"tag":95,"props":1486,"children":1487},{"style":102},[1488],{"type":37,"value":1489}," async",{"type":32,"tag":95,"props":1491,"children":1492},{"style":102},[1493],{"type":37,"value":1494}," function",{"type":32,"tag":95,"props":1496,"children":1497},{"style":113},[1498],{"type":37,"value":136},{"type":32,"tag":95,"props":1500,"children":1501},{"style":139},[1502],{"type":37,"value":142},{"type":32,"tag":95,"props":1504,"children":1505},{"style":113},[1506],{"type":37,"value":157},{"type":32,"tag":95,"props":1508,"children":1509},{"class":97,"line":119},[1510,1514,1518,1522,1526,1531],{"type":32,"tag":95,"props":1511,"children":1512},{"style":102},[1513],{"type":37,"value":1059},{"type":32,"tag":95,"props":1515,"children":1516},{"style":169},[1517],{"type":37,"value":342},{"type":32,"tag":95,"props":1519,"children":1520},{"style":102},[1521],{"type":37,"value":177},{"type":32,"tag":95,"props":1523,"children":1524},{"style":102},[1525],{"type":37,"value":290},{"type":32,"tag":95,"props":1527,"children":1528},{"style":128},[1529],{"type":37,"value":1530}," fetchProducts",{"type":32,"tag":95,"props":1532,"children":1533},{"style":113},[1534],{"type":37,"value":412},{"type":32,"tag":95,"props":1536,"children":1537},{"class":97,"line":160},[1538,1542],{"type":32,"tag":95,"props":1539,"children":1540},{"style":102},[1541],{"type":37,"value":1303},{"type":32,"tag":95,"props":1543,"children":1544},{"style":226},[1545],{"type":37,"value":1546}," `\n",{"type":32,"tag":95,"props":1548,"children":1549},{"class":97,"line":195},[1550,1555,1559,1563,1567,1571,1576,1581],{"type":32,"tag":95,"props":1551,"children":1552},{"style":226},[1553],{"type":37,"value":1554},"    \u003Cdiv id=\"product-list\" data-products='${",{"type":32,"tag":95,"props":1556,"children":1557},{"style":169},[1558],{"type":37,"value":847},{"type":32,"tag":95,"props":1560,"children":1561},{"style":226},[1562],{"type":37,"value":71},{"type":32,"tag":95,"props":1564,"children":1565},{"style":128},[1566],{"type":37,"value":856},{"type":32,"tag":95,"props":1568,"children":1569},{"style":226},[1570],{"type":37,"value":136},{"type":32,"tag":95,"props":1572,"children":1573},{"style":113},[1574],{"type":37,"value":1575},"products",{"type":32,"tag":95,"props":1577,"children":1578},{"style":226},[1579],{"type":37,"value":1580},")",{"type":32,"tag":95,"props":1582,"children":1583},{"style":226},[1584],{"type":37,"value":1585},"}'>\n",{"type":32,"tag":95,"props":1587,"children":1588},{"class":97,"line":252},[1589,1594,1598,1602,1607,1611,1615,1620,1625,1630,1635,1639,1644,1648],{"type":32,"tag":95,"props":1590,"children":1591},{"style":226},[1592],{"type":37,"value":1593},"      ${",{"type":32,"tag":95,"props":1595,"children":1596},{"style":113},[1597],{"type":37,"value":1575},{"type":32,"tag":95,"props":1599,"children":1600},{"style":226},[1601],{"type":37,"value":71},{"type":32,"tag":95,"props":1603,"children":1604},{"style":128},[1605],{"type":37,"value":1606},"map",{"type":32,"tag":95,"props":1608,"children":1609},{"style":226},[1610],{"type":37,"value":136},{"type":32,"tag":95,"props":1612,"children":1613},{"style":169},[1614],{"type":37,"value":33},{"type":32,"tag":95,"props":1616,"children":1617},{"style":102},[1618],{"type":37,"value":1619}," =>",{"type":32,"tag":95,"props":1621,"children":1622},{"style":226},[1623],{"type":37,"value":1624}," `\u003Cdiv class=\"skeleton\">\u003C\u002Fdiv>`",{"type":32,"tag":95,"props":1626,"children":1627},{"style":226},[1628],{"type":37,"value":1629},").",{"type":32,"tag":95,"props":1631,"children":1632},{"style":128},[1633],{"type":37,"value":1634},"join",{"type":32,"tag":95,"props":1636,"children":1637},{"style":226},[1638],{"type":37,"value":136},{"type":32,"tag":95,"props":1640,"children":1641},{"style":226},[1642],{"type":37,"value":1643},"''",{"type":32,"tag":95,"props":1645,"children":1646},{"style":226},[1647],{"type":37,"value":1580},{"type":32,"tag":95,"props":1649,"children":1650},{"style":226},[1651],{"type":37,"value":1151},{"type":32,"tag":95,"props":1653,"children":1654},{"class":97,"line":261},[1655],{"type":32,"tag":95,"props":1656,"children":1657},{"style":226},[1658],{"type":37,"value":1659},"    \u003C\u002Fdiv>\n",{"type":32,"tag":95,"props":1661,"children":1662},{"class":97,"line":271},[1663],{"type":32,"tag":95,"props":1664,"children":1665},{"style":226},[1666],{"type":37,"value":1667},"    \u003Cscript type=\"module\" src=\"\u002Fhydrate.js\">\u003C\u002Fscript>\n",{"type":32,"tag":95,"props":1669,"children":1670},{"class":97,"line":316},[1671,1676],{"type":32,"tag":95,"props":1672,"children":1673},{"style":226},[1674],{"type":37,"value":1675},"  `",{"type":32,"tag":95,"props":1677,"children":1678},{"style":113},[1679],{"type":37,"value":249},{"type":32,"tag":95,"props":1681,"children":1682},{"class":97,"line":26},[1683],{"type":32,"tag":95,"props":1684,"children":1685},{"style":113},[1686],{"type":37,"value":1151},{"type":32,"tag":33,"props":1688,"children":1689},{},[1690,1692,1698],{"type":37,"value":1691},"Client-seitig ",{"type":32,"tag":91,"props":1693,"children":1695},{"className":1694},[],[1696],{"type":37,"value":1697},"hydrate.js",{"type":37,"value":1699}," (10KB):",{"type":32,"tag":84,"props":1701,"children":1703},{"code":1702,"language":87,"meta":16,"className":88,"style":16},"import { h, render } from 'preact';\nconst data = JSON.parse(document.getElementById('product-list').dataset.products);\nrender(\u003CProductList products={data} \u002F>, document.getElementById('product-list'));\n",[1704],{"type":32,"tag":91,"props":1705,"children":1706},{"__ignoreMap":16},[1707,1734,1788],{"type":32,"tag":95,"props":1708,"children":1709},{"class":97,"line":98},[1710,1715,1720,1725,1730],{"type":32,"tag":95,"props":1711,"children":1712},{"style":102},[1713],{"type":37,"value":1714},"import",{"type":32,"tag":95,"props":1716,"children":1717},{"style":113},[1718],{"type":37,"value":1719}," { h, render } ",{"type":32,"tag":95,"props":1721,"children":1722},{"style":102},[1723],{"type":37,"value":1724},"from",{"type":32,"tag":95,"props":1726,"children":1727},{"style":226},[1728],{"type":37,"value":1729}," 'preact'",{"type":32,"tag":95,"props":1731,"children":1732},{"style":113},[1733],{"type":37,"value":249},{"type":32,"tag":95,"props":1735,"children":1736},{"class":97,"line":119},[1737,1741,1746,1750,1755,1759,1764,1769,1774,1778,1783],{"type":32,"tag":95,"props":1738,"children":1739},{"style":102},[1740],{"type":37,"value":945},{"type":32,"tag":95,"props":1742,"children":1743},{"style":169},[1744],{"type":37,"value":1745}," data",{"type":32,"tag":95,"props":1747,"children":1748},{"style":102},[1749],{"type":37,"value":177},{"type":32,"tag":95,"props":1751,"children":1752},{"style":169},[1753],{"type":37,"value":1754}," JSON",{"type":32,"tag":95,"props":1756,"children":1757},{"style":113},[1758],{"type":37,"value":71},{"type":32,"tag":95,"props":1760,"children":1761},{"style":128},[1762],{"type":37,"value":1763},"parse",{"type":32,"tag":95,"props":1765,"children":1766},{"style":113},[1767],{"type":37,"value":1768},"(document.",{"type":32,"tag":95,"props":1770,"children":1771},{"style":128},[1772],{"type":37,"value":1773},"getElementById",{"type":32,"tag":95,"props":1775,"children":1776},{"style":113},[1777],{"type":37,"value":136},{"type":32,"tag":95,"props":1779,"children":1780},{"style":226},[1781],{"type":37,"value":1782},"'product-list'",{"type":32,"tag":95,"props":1784,"children":1785},{"style":113},[1786],{"type":37,"value":1787},").dataset.products);\n",{"type":32,"tag":95,"props":1789,"children":1790},{"class":97,"line":160},[1791,1796,1801,1806,1810,1814,1819,1823,1827,1831],{"type":32,"tag":95,"props":1792,"children":1793},{"style":128},[1794],{"type":37,"value":1795},"render",{"type":32,"tag":95,"props":1797,"children":1798},{"style":113},[1799],{"type":37,"value":1800},"(\u003C",{"type":32,"tag":95,"props":1802,"children":1803},{"style":169},[1804],{"type":37,"value":1805},"ProductList",{"type":32,"tag":95,"props":1807,"children":1808},{"style":128},[1809],{"type":37,"value":342},{"type":32,"tag":95,"props":1811,"children":1812},{"style":102},[1813],{"type":37,"value":1000},{"type":32,"tag":95,"props":1815,"children":1816},{"style":113},[1817],{"type":37,"value":1818},"{data} \u002F>, document.",{"type":32,"tag":95,"props":1820,"children":1821},{"style":128},[1822],{"type":37,"value":1773},{"type":32,"tag":95,"props":1824,"children":1825},{"style":113},[1826],{"type":37,"value":136},{"type":32,"tag":95,"props":1828,"children":1829},{"style":226},[1830],{"type":37,"value":1782},{"type":32,"tag":95,"props":1832,"children":1833},{"style":113},[1834],{"type":37,"value":1835},"));\n",{"type":32,"tag":33,"props":1837,"children":1838},{},[1839],{"type":37,"value":1840},"Mit diesem Pattern bleibt Edge-SSR-Latenz niedrig (40ms), Interaktivität kommt vom Client (FCP + 150ms). Tradeoff: INP könnte steigen (JavaScript-Parse-Zeit). Monitoring nötig.",{"type":32,"tag":40,"props":1842,"children":1844},{"id":1843},"real-user-monitoring-und-alerting",[1845],{"type":37,"value":1846},"Real User Monitoring und Alerting",{"type":32,"tag":33,"props":1848,"children":1849},{},[1850],{"type":37,"value":1851},"Edge-Latenz ohne RUM zu optimieren ist unmöglich. Cloudflare Analytics fügt jedem Request einen Server-Timing-Header hinzu:",{"type":32,"tag":84,"props":1853,"children":1855},{"code":1854},"Server-Timing: cf-edge;dur=12, cf-kv;dur=8, cf-render;dur=18\n",[1856],{"type":32,"tag":91,"props":1857,"children":1858},{"__ignoreMap":16},[1859],{"type":37,"value":1854},{"type":32,"tag":33,"props":1861,"children":1862},{},[1863],{"type":37,"value":1864},"Sammle das Client-seitig mit PerformanceObserver:",{"type":32,"tag":84,"props":1866,"children":1868},{"code":1867,"language":87,"meta":16,"className":88,"style":16},"new PerformanceObserver((list) => {\n  for (const entry of list.getEntries()) {\n    if (entry.entryType === 'navigation') {\n      const ttfb = entry.responseStart - entry.requestStart;\n      fetch('\u002Fanalytics', { \n        method: 'POST', \n        body: JSON.stringify({ ttfb, url: entry.name }) \n      });\n    }\n  }\n}).observe({ entryTypes: ['navigation'] });\n",[1869],{"type":32,"tag":91,"props":1870,"children":1871},{"__ignoreMap":16},[1872,1908,1949,1975,2007,2029,2046,2071,2079,2087,2094],{"type":32,"tag":95,"props":1873,"children":1874},{"class":97,"line":98},[1875,1880,1885,1890,1895,1899,1904],{"type":32,"tag":95,"props":1876,"children":1877},{"style":102},[1878],{"type":37,"value":1879},"new",{"type":32,"tag":95,"props":1881,"children":1882},{"style":128},[1883],{"type":37,"value":1884}," PerformanceObserver",{"type":32,"tag":95,"props":1886,"children":1887},{"style":113},[1888],{"type":37,"value":1889},"((",{"type":32,"tag":95,"props":1891,"children":1892},{"style":139},[1893],{"type":37,"value":1894},"list",{"type":32,"tag":95,"props":1896,"children":1897},{"style":113},[1898],{"type":37,"value":234},{"type":32,"tag":95,"props":1900,"children":1901},{"style":102},[1902],{"type":37,"value":1903},"=>",{"type":32,"tag":95,"props":1905,"children":1906},{"style":113},[1907],{"type":37,"value":116},{"type":32,"tag":95,"props":1909,"children":1910},{"class":97,"line":119},[1911,1916,1920,1924,1929,1934,1939,1944],{"type":32,"tag":95,"props":1912,"children":1913},{"style":102},[1914],{"type":37,"value":1915},"  for",{"type":32,"tag":95,"props":1917,"children":1918},{"style":113},[1919],{"type":37,"value":1041},{"type":32,"tag":95,"props":1921,"children":1922},{"style":102},[1923],{"type":37,"value":945},{"type":32,"tag":95,"props":1925,"children":1926},{"style":169},[1927],{"type":37,"value":1928}," entry",{"type":32,"tag":95,"props":1930,"children":1931},{"style":102},[1932],{"type":37,"value":1933}," of",{"type":32,"tag":95,"props":1935,"children":1936},{"style":113},[1937],{"type":37,"value":1938}," list.",{"type":32,"tag":95,"props":1940,"children":1941},{"style":128},[1942],{"type":37,"value":1943},"getEntries",{"type":32,"tag":95,"props":1945,"children":1946},{"style":113},[1947],{"type":37,"value":1948},"()) {\n",{"type":32,"tag":95,"props":1950,"children":1951},{"class":97,"line":160},[1952,1957,1962,1966,1971],{"type":32,"tag":95,"props":1953,"children":1954},{"style":102},[1955],{"type":37,"value":1956},"    if",{"type":32,"tag":95,"props":1958,"children":1959},{"style":113},[1960],{"type":37,"value":1961}," (entry.entryType ",{"type":32,"tag":95,"props":1963,"children":1964},{"style":102},[1965],{"type":37,"value":356},{"type":32,"tag":95,"props":1967,"children":1968},{"style":226},[1969],{"type":37,"value":1970}," 'navigation'",{"type":32,"tag":95,"props":1972,"children":1973},{"style":113},[1974],{"type":37,"value":157},{"type":32,"tag":95,"props":1976,"children":1977},{"class":97,"line":195},[1978,1983,1988,1992,1997,2002],{"type":32,"tag":95,"props":1979,"children":1980},{"style":102},[1981],{"type":37,"value":1982},"      const",{"type":32,"tag":95,"props":1984,"children":1985},{"style":169},[1986],{"type":37,"value":1987}," ttfb",{"type":32,"tag":95,"props":1989,"children":1990},{"style":102},[1991],{"type":37,"value":177},{"type":32,"tag":95,"props":1993,"children":1994},{"style":113},[1995],{"type":37,"value":1996}," entry.responseStart ",{"type":32,"tag":95,"props":1998,"children":1999},{"style":102},[2000],{"type":37,"value":2001},"-",{"type":32,"tag":95,"props":2003,"children":2004},{"style":113},[2005],{"type":37,"value":2006}," entry.requestStart;\n",{"type":32,"tag":95,"props":2008,"children":2009},{"class":97,"line":252},[2010,2015,2019,2024],{"type":32,"tag":95,"props":2011,"children":2012},{"style":128},[2013],{"type":37,"value":2014},"      fetch",{"type":32,"tag":95,"props":2016,"children":2017},{"style":113},[2018],{"type":37,"value":136},{"type":32,"tag":95,"props":2020,"children":2021},{"style":226},[2022],{"type":37,"value":2023},"'\u002Fanalytics'",{"type":32,"tag":95,"props":2025,"children":2026},{"style":113},[2027],{"type":37,"value":2028},", { \n",{"type":32,"tag":95,"props":2030,"children":2031},{"class":97,"line":261},[2032,2037,2041],{"type":32,"tag":95,"props":2033,"children":2034},{"style":113},[2035],{"type":37,"value":2036},"        method: ",{"type":32,"tag":95,"props":2038,"children":2039},{"style":226},[2040],{"type":37,"value":792},{"type":32,"tag":95,"props":2042,"children":2043},{"style":113},[2044],{"type":37,"value":2045},", \n",{"type":32,"tag":95,"props":2047,"children":2048},{"class":97,"line":271},[2049,2054,2058,2062,2066],{"type":32,"tag":95,"props":2050,"children":2051},{"style":113},[2052],{"type":37,"value":2053},"        body: ",{"type":32,"tag":95,"props":2055,"children":2056},{"style":169},[2057],{"type":37,"value":847},{"type":32,"tag":95,"props":2059,"children":2060},{"style":113},[2061],{"type":37,"value":71},{"type":32,"tag":95,"props":2063,"children":2064},{"style":128},[2065],{"type":37,"value":856},{"type":32,"tag":95,"props":2067,"children":2068},{"style":113},[2069],{"type":37,"value":2070},"({ ttfb, url: entry.name }) \n",{"type":32,"tag":95,"props":2072,"children":2073},{"class":97,"line":316},[2074],{"type":32,"tag":95,"props":2075,"children":2076},{"style":113},[2077],{"type":37,"value":2078},"      });\n",{"type":32,"tag":95,"props":2080,"children":2081},{"class":97,"line":26},[2082],{"type":32,"tag":95,"props":2083,"children":2084},{"style":113},[2085],{"type":37,"value":2086},"    }\n",{"type":32,"tag":95,"props":2088,"children":2089},{"class":97,"line":332},[2090],{"type":32,"tag":95,"props":2091,"children":2092},{"style":113},[2093],{"type":37,"value":525},{"type":32,"tag":95,"props":2095,"children":2096},{"class":97,"line":369},[2097,2102,2107,2112,2117],{"type":32,"tag":95,"props":2098,"children":2099},{"style":113},[2100],{"type":37,"value":2101},"}).",{"type":32,"tag":95,"props":2103,"children":2104},{"style":128},[2105],{"type":37,"value":2106},"observe",{"type":32,"tag":95,"props":2108,"children":2109},{"style":113},[2110],{"type":37,"value":2111},"({ entryTypes: [",{"type":32,"tag":95,"props":2113,"children":2114},{"style":226},[2115],{"type":37,"value":2116},"'navigation'",{"type":32,"tag":95,"props":2118,"children":2119},{"style":113},[2120],{"type":37,"value":2121},"] });\n",{"type":32,"tag":33,"props":2123,"children":2124},{},[2125],{"type":37,"value":2126},"Zielmetriken:",{"type":32,"tag":2128,"props":2129,"children":2130},"ul",{},[2131,2136,2141,2146],{"type":32,"tag":693,"props":2132,"children":2133},{},[2134],{"type":37,"value":2135},"p50 TTFB \u003C 30ms",{"type":32,"tag":693,"props":2137,"children":2138},{},[2139],{"type":37,"value":2140},"p95 TTFB \u003C 60ms",{"type":32,"tag":693,"props":2142,"children":2143},{},[2144],{"type":37,"value":2145},"p99 TTFB \u003C 100ms",{"type":32,"tag":693,"props":2147,"children":2148},{},[2149],{"type":37,"value":2150},"Edge-Error-Rate \u003C 0,1%",{"type":32,"tag":33,"props":2152,"children":2153},{},[2154,2156,2162],{"type":37,"value":2155},"Überschreitet ein Request 60ms, logge die Cloudflare-Trace-ID und debugge mit ",{"type":32,"tag":91,"props":2157,"children":2159},{"className":2158},[],[2160],{"type":37,"value":2161},"wrangler tail",{"type":37,"value":2163},". Meist sind Ursachen KV-Timeout oder Origin-Fallback.",{"type":32,"tag":40,"props":2165,"children":2167},{"id":2166},"production-deployment-checkliste",[2168],{"type":37,"value":2169},"Production-Deployment-Checkliste",{"type":32,"tag":33,"props":2171,"children":2172},{},[2173],{"type":37,"value":2174},"Bevor Edge SSR in Produktion geht:",{"type":32,"tag":689,"props":2176,"children":2177},{},[2178,2188,2198,2208,2218],{"type":32,"tag":693,"props":2179,"children":2180},{},[2181,2186],{"type":32,"tag":1192,"props":2182,"children":2183},{},[2184],{"type":37,"value":2185},"Rate Limiting:",{"type":37,"value":2187}," Drossle KV-Writes (1 Write pro User\u002FSekunde)",{"type":32,"tag":693,"props":2189,"children":2190},{},[2191,2196],{"type":32,"tag":1192,"props":2192,"children":2193},{},[2194],{"type":37,"value":2195},"Fallback-Kette:",{"type":37,"value":2197}," Bei KV-Timeout (>50ms) fallback zum Origin, bei Origin-Timeout statische HTML zurückgeben",{"type":32,"tag":693,"props":2199,"children":2200},{},[2201,2206],{"type":32,"tag":1192,"props":2202,"children":2203},{},[2204],{"type":37,"value":2205},"Feature Flag:",{"type":37,"value":2207}," Edge-Personalisierung schrittweise aktivieren (10% → 50% → 100% Traffic)",{"type":32,"tag":693,"props":2209,"children":2210},{},[2211,2216],{"type":32,"tag":1192,"props":2212,"children":2213},{},[2214],{"type":37,"value":2215},"Cost-Monitoring:",{"type":37,"value":2217}," Cloudflare Workers 100K Requests\u002FTag kostenlos, dann $0,50\u002FMillion. KV-Reads kostenlos unbegrenzt, Writes $0,50\u002FMillion.",{"type":32,"tag":693,"props":2219,"children":2220},{},[2221,2226],{"type":32,"tag":1192,"props":2222,"children":2223},{},[2224],{"type":37,"value":2225},"Security:",{"type":37,"value":2227}," User-ID hashen, kein PII in KV-Keys, Bot-Detection für Rate-Limit-Bypass",{"type":32,"tag":33,"props":2229,"children":2230},{},[2231],{"type":37,"value":2232},"Cost-Projektion: 1M tägliche Besuche, 30% personalisierte Requests = 300K Edge-Aufrufe\u002FTag = $0,15\u002FTag = $4,50\u002FMonat. Origin-SSR-Alternative: 2-vCPU-Instance $50\u002FMonat. Ersparnis: 91%.",{"type":32,"tag":33,"props":2234,"children":2235},{},[2236],{"type":37,"value":2237},"Einmal eingerichtet, sind Edge-SSR-Kosten null-incremental. Eine neue Personalisierungsregel? Schreib einen neuen KV-Key. Ein neues Segment? Ein If-Block in der Edge-Function. Skalierung ist nicht linear, sondern logarithmisch — 10M Requests\u002FTag laufen genauso in unter 40ms. Deswegen ist Edge-First im Wachstumsstrategie ein grundlegender Vorteil.",{"type":32,"tag":2239,"props":2240,"children":2241},"style",{},[2242],{"type":37,"value":2243},"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":160,"depth":160,"links":2245},[2246,2247,2250,2253,2254,2255],{"id":42,"depth":119,"text":45},{"id":74,"depth":119,"text":77,"children":2248},[2249],{"id":543,"depth":160,"text":546},{"id":674,"depth":119,"text":677,"children":2251},[2252],{"id":909,"depth":160,"text":912},{"id":1179,"depth":119,"text":1182},{"id":1843,"depth":119,"text":1846},{"id":2166,"depth":119,"text":2169},"markdown","content:de:tech:edge-ssr-personalisierung-latenz-40ms.md","content","de\u002Ftech\u002Fedge-ssr-personalisierung-latenz-40ms.md","de\u002Ftech\u002Fedge-ssr-personalisierung-latenz-40ms","md",1778709808330]