[{"data":1,"prerenderedAt":2262},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fedge-ssr-personalizasyon-latency-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":9,"_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,"","Réduire la latence de personnalisation avec Edge SSR à moins de 40ms","Utilisez Cloudflare Workers et Vercel Edge avec une architecture KV store pour réduire la latence du rendu côté serveur personnalisé à moins de 40 millisecondes.","2026-05-12",[21,22,23,24,25],"edge-computing","ssr","personnalisation","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,1860,1868,1873,2130,2135,2159,2164,2170,2175,2228,2233,2238],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Le rendu côté serveur traditionnel sur des serveurs d'origine implique une latence moyenne de 200–400ms. Si vous mettez en cache le HTML sur un CDN edge, ce délai tombe à 20–50ms, mais vous perdez la personnalisation. Edge SSR brise ce compromis : vous obtenez à la fois la personnalisation et une réponse sous 40ms. Vous y parvenez avec des runtimes edge comme Cloudflare Workers et Vercel Edge, associés à un KV store distribué. Vous ne vous posez plus la question « cache ou personnalisation » — vous les obtenez tous les deux.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"pourquoi-edge-ssr-est-critique-maintenant",[44],{"type":37,"value":45},"Pourquoi Edge SSR est critique maintenant",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Depuis 2025, la métrique INP de Chrome est intégrée dans Core Web Vitals. Une réponse serveur supérieure à 200ms suffit à elle seule à casser INP. Chaque requête envoyée à l'origine ajoute 150–300ms en raison de la distance physique et du démarrage à froid. Edge runtime élimine ce goulot d'étranglement : le code s'exécute au POP (Point de Présence) le plus proche de l'utilisateur, et les données proviennent d'un KV store régional en 5–15ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Ce n'est pas qu'une question de vitesse. Pour la personnalisation, vous n'avez plus besoin de faire de requête à l'origine. Vous conservez les segments utilisateurs, les préférences et l'état du panier dans le KV edge. Lorsqu'une requête arrive, la fonction edge récupère ces données et rend le HTML instantanément. Le serveur d'origine n'est utilisé que pour les opérations d'écriture et les calculs intensifs.",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,70],{"type":37,"value":60},"Lorsque vous travaillez avec des plates-formes comme Shopify, cette architecture est particulièrement essentielle. Les templates Liquid se rendent à l'origine et prennent 300–600ms par page. Avec Edge SSR, vous rendez le HTML de manière composable : une fonction edge rend les cartes produit, une autre injecte les informations du panier. La latence totale reste sous les 40ms. Pour une intégration détaillée, consultez notre guide sur l'",{"type":32,"tag":62,"props":63,"children":67},"a",{"href":64,"rel":65},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[66],"nofollow",[68],{"type":37,"value":69},"architecture Headless",{"type":37,"value":71},".",{"type":32,"tag":40,"props":73,"children":75},{"id":74},"cloudflare-workers-kv-le-cœur-de-larchitecture",[76],{"type":37,"value":77},"Cloudflare Workers + KV : le cœur de l'architecture",{"type":32,"tag":33,"props":79,"children":80},{},[81],{"type":37,"value":82},"Cloudflare Workers fonctionne sur la base d'isolats V8. Au lieu de créer un nouveau conteneur pour chaque requête, il ouvre un isolat JavaScript. Son coût de démarrage est de 0,5–2ms. Le code Worker ressemble à ceci :",{"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 Récupérer le segment utilisateur depuis KV\n    const segment = await env.USER_SEGMENTS.get(userId);\n    \n    \u002F\u002F Rendre la liste produit selon le segment\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 Récupérer le segment utilisateur depuis KV\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 Rendre la liste produit selon le segment\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 se réplique sur plus de 300 POP. La latence de lecture moyenne globale est de 12ms. Les écritures se propagent avec la cohérence éventuelle en 60 secondes. C'est pourquoi vous écrivez dans KV uniquement les données qui changent rarement : préférences utilisateur, mappages de segments, feature flags. Pour les données qui changent fréquemment, comme les prix des produits, vous les récupérez auprès de l'API d'origine et les mettez en cache à l'edge (TTL de 60 secondes avec Cache API).",{"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 utilise le même modèle d'isolat V8, mais avec un réseau différent. Cloudflare dispose de plus de 300 POP, Vercel d'environ 15 emplacements edge régionaux. Comparaison de latence (utilisateur en Europe, origine aux États-Unis) :",{"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},"Démarrage à froid",{"type":32,"tag":565,"props":576,"children":577},{},[578],{"type":37,"value":579},"Lecture KV",{"type":32,"tag":565,"props":581,"children":582},{},[583],{"type":37,"value":584},"TTFB total",{"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},"L'avantage de Vercel réside dans son intégration approfondie avec l'écosystème Next.js. Vous écrivez une fonction edge dans ",{"type":32,"tag":91,"props":665,"children":667},{"className":666},[],[668],{"type":37,"value":669},"middleware.ts",{"type":37,"value":671}," et la déployez en production — l'orchestration se fait chez Vercel. Avec Cloudflare, vous avez besoin de Wrangler CLI et d'une liaison KV manuelle. Compromis : plus de contrôle versus un onboarding plus rapide.",{"type":32,"tag":40,"props":673,"children":675},{"id":674},"architecture-kv-store-pattern-décriture-et-revalidation",[676],{"type":37,"value":677},"Architecture KV store : pattern d'écriture et revalidation",{"type":32,"tag":33,"props":679,"children":680},{},[681],{"type":37,"value":682},"La cohérence éventuelle du KV edge est une contrainte. Un utilisateur clique sur un bouton, la préférence change — ce changement se propage à tous les edges en 60 secondes. Pendant ce laps de temps, différents POP peuvent lire des valeurs différentes. Solution : rediriger après l'écriture ou implémenter une mise à jour optimiste côté client.",{"type":32,"tag":33,"props":684,"children":685},{},[686],{"type":37,"value":687},"Flux exemple :",{"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},"L'utilisateur clique sur le toggle « Mode sombre »",{"type":32,"tag":693,"props":699,"children":700},{},[701,703,709],{"type":37,"value":702},"Le client envoie POST ",{"type":32,"tag":91,"props":704,"children":706},{"className":705},[],[707],{"type":37,"value":708},"\u002Fapi\u002Fpreferences",{"type":37,"value":710}," au serveur d'origine",{"type":32,"tag":693,"props":712,"children":713},{},[714,716,722],{"type":37,"value":715},"L'origine écrit ",{"type":32,"tag":91,"props":717,"children":719},{"className":718},[],[720],{"type":37,"value":721},"user:123:theme = dark",{"type":37,"value":723}," dans KV",{"type":32,"tag":693,"props":725,"children":726},{},[727],{"type":37,"value":728},"L'origine appelle l'API Cloudflare pour une invalidation de cache immédiate :",{"type":32,"tag":84,"props":730,"children":732},{"code":731,"language":87,"meta":16,"className":88,"style":16},"\u002F\u002F Sur l'origine\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 Sur l'origine\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},"La fonction edge lit la nouvelle valeur du KV à la requête suivante",{"type":32,"tag":693,"props":898,"children":899},{},[900],{"type":37,"value":901},"Le JavaScript côté client effectue un rechargement léger après 200ms",{"type":32,"tag":33,"props":903,"children":904},{},[905],{"type":37,"value":906},"Ce pattern limite le débit d'écriture (limite de débit des écritures KV : 1000\u002Fseconde par compte), mais le débit de lecture est illimité. L'architecture est donc optimisée pour les charges de travail à lecture intensive. Les actions utilisateur sont rares (1–2 par minute), mais les pages vues sont fréquentes (100+ par seconde).",{"type":32,"tag":541,"props":908,"children":910},{"id":909},"stratégie-de-mise-en-cache-en-couches",[911],{"type":37,"value":912},"Stratégie de mise en cache en couches",{"type":32,"tag":33,"props":914,"children":915},{},[916],{"type":37,"value":917},"KV n'est pas la seule couche de cache. Pile complète :",{"type":32,"tag":84,"props":919,"children":921},{"code":920},"Cache navigateur (service worker)\n  ↓\nCache CDN edge (Cache API, TTL 60s)\n  ↓\nEdge KV (éventuelle, minutes)\n  ↓\nBase de données d'origine\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},"Les ressources statiques (CSS, JS) au sommet, les données spécifiques à l'utilisateur au bas. Le HTML lui-même est dans la couche intermédiaire : la fonction edge combine KV et Cache API pour le rendu. 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},"Cette architecture maintient le percentile 95 du TTFB sous 40ms car la plupart des requêtes sont servies par Cache API (5–8ms). Le taux d'accès KV dépasse 98 %, le fallback d'origine reste sous 2 %.",{"type":32,"tag":40,"props":1178,"children":1180},{"id":1179},"portée-de-personnalisation-et-compromis-de-taille-de-bundle",[1181],{"type":37,"value":1182},"Portée de personnalisation et compromis de taille de bundle",{"type":32,"tag":33,"props":1184,"children":1185},{},[1186],{"type":37,"value":1187},"La fonction edge a une limite de taille de bundle de 1MB (Cloudflare). Vous ne pouvez pas rendre des composants React lourds. Deux stratégies :",{"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. Templating minimal :",{"type":37,"value":1198}," Utilisez Handlebars ou l'interpolation de chaîne personnalisée. Injectez simplement des variables :",{"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},"Taille de bundle : 2KB. Temps de rendu : 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. Hydratation partielle :",{"type":37,"value":1466}," Rendez le HTML du squelette à l'edge, hydratez les îles React côté client. Fonction edge :",{"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-side ",{"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},"Avec ce pattern, la latence d'Edge SSR reste faible (40ms), l'interactivité provient du client (FCP + 150ms). Compromis : INP peut augmenter (temps de parsing JavaScript). Une surveillance est nécessaire.",{"type":32,"tag":40,"props":1842,"children":1844},{"id":1843},"monitoring-utilisateur-réel-et-alertes",[1845],{"type":37,"value":1846},"Monitoring utilisateur réel et alertes",{"type":32,"tag":33,"props":1848,"children":1849},{},[1850,1852,1858],{"type":37,"value":1851},"Vous ne pouvez pas optimiser la latence edge sans RUM. Cloudflare Analytics ajoute un en-tête ",{"type":32,"tag":91,"props":1853,"children":1855},{"className":1854},[],[1856],{"type":37,"value":1857},"Server-Timing",{"type":37,"value":1859}," pour chaque requête :",{"type":32,"tag":84,"props":1861,"children":1863},{"code":1862},"Server-Timing: cf-edge;dur=12, cf-kv;dur=8, cf-render;dur=18\n",[1864],{"type":32,"tag":91,"props":1865,"children":1866},{"__ignoreMap":16},[1867],{"type":37,"value":1862},{"type":32,"tag":33,"props":1869,"children":1870},{},[1871],{"type":37,"value":1872},"Collectez cela côté client avec PerformanceObserver :",{"type":32,"tag":84,"props":1874,"children":1876},{"code":1875,"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",[1877],{"type":32,"tag":91,"props":1878,"children":1879},{"__ignoreMap":16},[1880,1916,1957,1983,2015,2037,2054,2079,2087,2095,2102],{"type":32,"tag":95,"props":1881,"children":1882},{"class":97,"line":98},[1883,1888,1893,1898,1903,1907,1912],{"type":32,"tag":95,"props":1884,"children":1885},{"style":102},[1886],{"type":37,"value":1887},"new",{"type":32,"tag":95,"props":1889,"children":1890},{"style":128},[1891],{"type":37,"value":1892}," PerformanceObserver",{"type":32,"tag":95,"props":1894,"children":1895},{"style":113},[1896],{"type":37,"value":1897},"((",{"type":32,"tag":95,"props":1899,"children":1900},{"style":139},[1901],{"type":37,"value":1902},"list",{"type":32,"tag":95,"props":1904,"children":1905},{"style":113},[1906],{"type":37,"value":234},{"type":32,"tag":95,"props":1908,"children":1909},{"style":102},[1910],{"type":37,"value":1911},"=>",{"type":32,"tag":95,"props":1913,"children":1914},{"style":113},[1915],{"type":37,"value":116},{"type":32,"tag":95,"props":1917,"children":1918},{"class":97,"line":119},[1919,1924,1928,1932,1937,1942,1947,1952],{"type":32,"tag":95,"props":1920,"children":1921},{"style":102},[1922],{"type":37,"value":1923},"  for",{"type":32,"tag":95,"props":1925,"children":1926},{"style":113},[1927],{"type":37,"value":1041},{"type":32,"tag":95,"props":1929,"children":1930},{"style":102},[1931],{"type":37,"value":945},{"type":32,"tag":95,"props":1933,"children":1934},{"style":169},[1935],{"type":37,"value":1936}," entry",{"type":32,"tag":95,"props":1938,"children":1939},{"style":102},[1940],{"type":37,"value":1941}," of",{"type":32,"tag":95,"props":1943,"children":1944},{"style":113},[1945],{"type":37,"value":1946}," list.",{"type":32,"tag":95,"props":1948,"children":1949},{"style":128},[1950],{"type":37,"value":1951},"getEntries",{"type":32,"tag":95,"props":1953,"children":1954},{"style":113},[1955],{"type":37,"value":1956},"()) {\n",{"type":32,"tag":95,"props":1958,"children":1959},{"class":97,"line":160},[1960,1965,1970,1974,1979],{"type":32,"tag":95,"props":1961,"children":1962},{"style":102},[1963],{"type":37,"value":1964},"    if",{"type":32,"tag":95,"props":1966,"children":1967},{"style":113},[1968],{"type":37,"value":1969}," (entry.entryType ",{"type":32,"tag":95,"props":1971,"children":1972},{"style":102},[1973],{"type":37,"value":356},{"type":32,"tag":95,"props":1975,"children":1976},{"style":226},[1977],{"type":37,"value":1978}," 'navigation'",{"type":32,"tag":95,"props":1980,"children":1981},{"style":113},[1982],{"type":37,"value":157},{"type":32,"tag":95,"props":1984,"children":1985},{"class":97,"line":195},[1986,1991,1996,2000,2005,2010],{"type":32,"tag":95,"props":1987,"children":1988},{"style":102},[1989],{"type":37,"value":1990},"      const",{"type":32,"tag":95,"props":1992,"children":1993},{"style":169},[1994],{"type":37,"value":1995}," ttfb",{"type":32,"tag":95,"props":1997,"children":1998},{"style":102},[1999],{"type":37,"value":177},{"type":32,"tag":95,"props":2001,"children":2002},{"style":113},[2003],{"type":37,"value":2004}," entry.responseStart ",{"type":32,"tag":95,"props":2006,"children":2007},{"style":102},[2008],{"type":37,"value":2009},"-",{"type":32,"tag":95,"props":2011,"children":2012},{"style":113},[2013],{"type":37,"value":2014}," entry.requestStart;\n",{"type":32,"tag":95,"props":2016,"children":2017},{"class":97,"line":252},[2018,2023,2027,2032],{"type":32,"tag":95,"props":2019,"children":2020},{"style":128},[2021],{"type":37,"value":2022},"      fetch",{"type":32,"tag":95,"props":2024,"children":2025},{"style":113},[2026],{"type":37,"value":136},{"type":32,"tag":95,"props":2028,"children":2029},{"style":226},[2030],{"type":37,"value":2031},"'\u002Fanalytics'",{"type":32,"tag":95,"props":2033,"children":2034},{"style":113},[2035],{"type":37,"value":2036},", { \n",{"type":32,"tag":95,"props":2038,"children":2039},{"class":97,"line":261},[2040,2045,2049],{"type":32,"tag":95,"props":2041,"children":2042},{"style":113},[2043],{"type":37,"value":2044},"        method: ",{"type":32,"tag":95,"props":2046,"children":2047},{"style":226},[2048],{"type":37,"value":792},{"type":32,"tag":95,"props":2050,"children":2051},{"style":113},[2052],{"type":37,"value":2053},", \n",{"type":32,"tag":95,"props":2055,"children":2056},{"class":97,"line":271},[2057,2062,2066,2070,2074],{"type":32,"tag":95,"props":2058,"children":2059},{"style":113},[2060],{"type":37,"value":2061},"        body: ",{"type":32,"tag":95,"props":2063,"children":2064},{"style":169},[2065],{"type":37,"value":847},{"type":32,"tag":95,"props":2067,"children":2068},{"style":113},[2069],{"type":37,"value":71},{"type":32,"tag":95,"props":2071,"children":2072},{"style":128},[2073],{"type":37,"value":856},{"type":32,"tag":95,"props":2075,"children":2076},{"style":113},[2077],{"type":37,"value":2078},"({ ttfb, url: entry.name }) \n",{"type":32,"tag":95,"props":2080,"children":2081},{"class":97,"line":316},[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":26},[2090],{"type":32,"tag":95,"props":2091,"children":2092},{"style":113},[2093],{"type":37,"value":2094},"    }\n",{"type":32,"tag":95,"props":2096,"children":2097},{"class":97,"line":332},[2098],{"type":32,"tag":95,"props":2099,"children":2100},{"style":113},[2101],{"type":37,"value":525},{"type":32,"tag":95,"props":2103,"children":2104},{"class":97,"line":369},[2105,2110,2115,2120,2125],{"type":32,"tag":95,"props":2106,"children":2107},{"style":113},[2108],{"type":37,"value":2109},"}).",{"type":32,"tag":95,"props":2111,"children":2112},{"style":128},[2113],{"type":37,"value":2114},"observe",{"type":32,"tag":95,"props":2116,"children":2117},{"style":113},[2118],{"type":37,"value":2119},"({ entryTypes: [",{"type":32,"tag":95,"props":2121,"children":2122},{"style":226},[2123],{"type":37,"value":2124},"'navigation'",{"type":32,"tag":95,"props":2126,"children":2127},{"style":113},[2128],{"type":37,"value":2129},"] });\n",{"type":32,"tag":33,"props":2131,"children":2132},{},[2133],{"type":37,"value":2134},"Métriques cibles :",{"type":32,"tag":2136,"props":2137,"children":2138},"ul",{},[2139,2144,2149,2154],{"type":32,"tag":693,"props":2140,"children":2141},{},[2142],{"type":37,"value":2143},"p50 TTFB \u003C 30ms",{"type":32,"tag":693,"props":2145,"children":2146},{},[2147],{"type":37,"value":2148},"p95 TTFB \u003C 60ms",{"type":32,"tag":693,"props":2150,"children":2151},{},[2152],{"type":37,"value":2153},"p99 TTFB \u003C 100ms",{"type":32,"tag":693,"props":2155,"children":2156},{},[2157],{"type":37,"value":2158},"Taux d'erreur edge \u003C 0,1%",{"type":32,"tag":33,"props":2160,"children":2161},{},[2162],{"type":37,"value":2163},"Pour les requêtes dépassant 60ms, consignez l'ID de trace Cloudflare et déboguez avec Wrangler tail. Le plus souvent, la cause est un timeout KV ou un fallback d'origine.",{"type":32,"tag":40,"props":2165,"children":2167},{"id":2166},"checklist-de-déploiement-en-production",[2168],{"type":37,"value":2169},"Checklist de déploiement en production",{"type":32,"tag":33,"props":2171,"children":2172},{},[2173],{"type":37,"value":2174},"Avant de mettre Edge SSR en production :",{"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}," Limitez les écritures KV (1 écriture par seconde par utilisateur)",{"type":32,"tag":693,"props":2189,"children":2190},{},[2191,2196],{"type":32,"tag":1192,"props":2192,"children":2193},{},[2194],{"type":37,"value":2195},"Chaîne de fallback :",{"type":37,"value":2197}," Si le timeout KV dépasse 50ms, basculez à l'origine ; si l'origine expire, servez du HTML statique",{"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}," Déployez progressivement la personnalisation edge (10 % → 50 % → 100 % du trafic)",{"type":32,"tag":693,"props":2209,"children":2210},{},[2211,2216],{"type":32,"tag":1192,"props":2212,"children":2213},{},[2214],{"type":37,"value":2215},"Monitoring des coûts :",{"type":37,"value":2217}," Cloudflare Workers offre 100K requêtes\u002Fjour gratuitement, puis $0,50\u002Fmillion. Lectures KV illimitées gratuitement, écritures à $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},"Sécurité :",{"type":37,"value":2227}," Hashifiez l'ID utilisateur, ne conservez pas d'informations personnelles dans les clés KV, ajoutez la détection de bots pour contourner les limites de débit",{"type":32,"tag":33,"props":2229,"children":2230},{},[2231],{"type":37,"value":2232},"Projection de coûts : 1M visites quotidiennes, 30 % de requêtes personnalisées = 300K invocations edge\u002Fjour = $0,15\u002Fjour = $4,50\u002Fmois. L'alternative SSR d'origine : instance 2 vCPU à $50\u002Fmois. Économies : 91 %.",{"type":32,"tag":33,"props":2234,"children":2235},{},[2236],{"type":37,"value":2237},"Une fois l'architecture Edge SSR en place, le coût supplémentaire est quasi nul. Ajouter une nouvelle règle de personnalisation signifie simplement écrire une nouvelle clé dans KV. Créer un nouveau segment revient à ajouter un bloc if dans la fonction edge. La mise à l'échelle n'est pas linéaire mais logarithmique — 10M requêtes\u002Fjour sont servies avec la même latence de 40ms. C'est pourquoi intégrer une stratégie edge-first dès le départ procure un avantage considérable pour la croissance future.",{"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:fr:tech:edge-ssr-personalizasyon-latency-40ms.md","content","fr\u002Ftech\u002Fedge-ssr-personalizasyon-latency-40ms.md","fr\u002Ftech\u002Fedge-ssr-personalizasyon-latency-40ms","md",1778709809314]