[{"data":1,"prerenderedAt":1902},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fstrategie-prerendu-nuxt-3":13},{"i18nKey":4,"paths":5},"tech-007-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fssg-leitfaden-fuer-nuxt-3","\u002Fen\u002Ftech\u002Fnuxt-3-ssg-prerender-strategies-build-optimization","\u002Fes\u002Ftech\u002Festrategias-prerender-nuxt-3","\u002Ffr\u002Ftech\u002Fstrategie-prerendu-nuxt-3","\u002Fit\u002Ftech\u002Festrategia-ssg-nuxt-3-prerender-e-ottimizzazione-build","\u002Fru\u002Ftech\u002Fssg-strategii-i-optimizaciya-sborki-dlya-nuxt-3","\u002Ftr\u002Ftech\u002Fnuxt-3-ssg-prerender-stratejileri-ve-build-optimizasyonu",{"_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":1896,"_id":1897,"_source":1898,"_file":1899,"_stem":1900,"_extension":1901},"tech",false,"","Nuxt 3 SSG : Stratégies de Prérendu et Optimisation de Build","Génération de site statique avec Nuxt 3 : règles de routes, prérendu Nitro, build incrémentiel et stratégies edge. Avec benchmarks réels.","2026-06-11",[21,22,23,24,25],"nuxt-3","ssg","static-site-generation","nitro","build-optimization",9,"Roibase",{"type":29,"children":30,"toc":1882},"root",[31,39,46,76,243,264,284,290,303,459,480,500,507,520,773,778,784,805,841,846,859,920,925,931,936,1347,1352,1358,1386,1391,1433,1474,1486,1492,1497,1698,1703,1709,1725,1730,1853,1858,1864,1876],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Le moteur SSG de Nuxt 3, Nitro, exécute Vue Router au moment de la compilation pour générer du HTML statique. Cependant, sur un site e-commerce avec 500+ pages, chaque build peut prendre 12 minutes pour rendre toutes les routes. Dans cet article, nous explorons les stratégies de prérendu, les mécanismes de contrôle au niveau des routes et les techniques qui réduisent le temps de build en production de 70 %. Les résultats concrets : un projet est passé de 12 minutes à 3,5 minutes, et le déploiement edge CDN prend maintenant 2 minutes.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"moteur-nitro-prerender-et-configuration-de-base",[44],{"type":37,"value":45},"Moteur Nitro Prerender et Configuration de Base",{"type":32,"tag":33,"props":47,"children":48},{},[49,51,58,60,66,68,74],{"type":37,"value":50},"Dans Nuxt 3, le SSG est contrôlé par la clé ",{"type":32,"tag":52,"props":53,"children":55},"code",{"className":54},[],[56],{"type":37,"value":57},"nitro.prerender",{"type":37,"value":59}," dans ",{"type":32,"tag":52,"props":61,"children":63},{"className":62},[],[64],{"type":37,"value":65},"nuxt.config.ts",{"type":37,"value":67},". Le comportement par défaut : toutes les routes du répertoire ",{"type":32,"tag":52,"props":69,"children":71},{"className":70},[],[72],{"type":37,"value":73},"pages\u002F",{"type":37,"value":75}," sont analysées automatiquement. Cependant, cela couvre uniquement les chemins statiques — les routes avec paramètres dynamiques nécessitent une déclaration manuelle.",{"type":32,"tag":77,"props":78,"children":82},"pre",{"className":79,"code":80,"language":81,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  nitro: {\n    prerender: {\n      crawlLinks: true,\n      routes: [\n        '\u002F',\n        '\u002Fproducts',\n        '\u002Fproducts\u002Flaptop-sleeve-pro'\n      ]\n    }\n  }\n})\n","typescript",[83],{"type":32,"tag":52,"props":84,"children":85},{"__ignoreMap":16},[86,98,125,134,143,163,172,186,199,207,216,225,234],{"type":32,"tag":87,"props":88,"children":91},"span",{"class":89,"line":90},"line",1,[92],{"type":32,"tag":87,"props":93,"children":95},{"style":94},"--shiki-default:#6A737D",[96],{"type":37,"value":97},"\u002F\u002F nuxt.config.ts\n",{"type":32,"tag":87,"props":99,"children":101},{"class":89,"line":100},2,[102,108,113,119],{"type":32,"tag":87,"props":103,"children":105},{"style":104},"--shiki-default:#F97583",[106],{"type":37,"value":107},"export",{"type":32,"tag":87,"props":109,"children":110},{"style":104},[111],{"type":37,"value":112}," default",{"type":32,"tag":87,"props":114,"children":116},{"style":115},"--shiki-default:#B392F0",[117],{"type":37,"value":118}," defineNuxtConfig",{"type":32,"tag":87,"props":120,"children":122},{"style":121},"--shiki-default:#E1E4E8",[123],{"type":37,"value":124},"({\n",{"type":32,"tag":87,"props":126,"children":128},{"class":89,"line":127},3,[129],{"type":32,"tag":87,"props":130,"children":131},{"style":121},[132],{"type":37,"value":133},"  nitro: {\n",{"type":32,"tag":87,"props":135,"children":137},{"class":89,"line":136},4,[138],{"type":32,"tag":87,"props":139,"children":140},{"style":121},[141],{"type":37,"value":142},"    prerender: {\n",{"type":32,"tag":87,"props":144,"children":146},{"class":89,"line":145},5,[147,152,158],{"type":32,"tag":87,"props":148,"children":149},{"style":121},[150],{"type":37,"value":151},"      crawlLinks: ",{"type":32,"tag":87,"props":153,"children":155},{"style":154},"--shiki-default:#79B8FF",[156],{"type":37,"value":157},"true",{"type":32,"tag":87,"props":159,"children":160},{"style":121},[161],{"type":37,"value":162},",\n",{"type":32,"tag":87,"props":164,"children":166},{"class":89,"line":165},6,[167],{"type":32,"tag":87,"props":168,"children":169},{"style":121},[170],{"type":37,"value":171},"      routes: [\n",{"type":32,"tag":87,"props":173,"children":175},{"class":89,"line":174},7,[176,182],{"type":32,"tag":87,"props":177,"children":179},{"style":178},"--shiki-default:#9ECBFF",[180],{"type":37,"value":181},"        '\u002F'",{"type":32,"tag":87,"props":183,"children":184},{"style":121},[185],{"type":37,"value":162},{"type":32,"tag":87,"props":187,"children":189},{"class":89,"line":188},8,[190,195],{"type":32,"tag":87,"props":191,"children":192},{"style":178},[193],{"type":37,"value":194},"        '\u002Fproducts'",{"type":32,"tag":87,"props":196,"children":197},{"style":121},[198],{"type":37,"value":162},{"type":32,"tag":87,"props":200,"children":201},{"class":89,"line":26},[202],{"type":32,"tag":87,"props":203,"children":204},{"style":178},[205],{"type":37,"value":206},"        '\u002Fproducts\u002Flaptop-sleeve-pro'\n",{"type":32,"tag":87,"props":208,"children":210},{"class":89,"line":209},10,[211],{"type":32,"tag":87,"props":212,"children":213},{"style":121},[214],{"type":37,"value":215},"      ]\n",{"type":32,"tag":87,"props":217,"children":219},{"class":89,"line":218},11,[220],{"type":32,"tag":87,"props":221,"children":222},{"style":121},[223],{"type":37,"value":224},"    }\n",{"type":32,"tag":87,"props":226,"children":228},{"class":89,"line":227},12,[229],{"type":32,"tag":87,"props":230,"children":231},{"style":121},[232],{"type":37,"value":233},"  }\n",{"type":32,"tag":87,"props":235,"children":237},{"class":89,"line":236},13,[238],{"type":32,"tag":87,"props":239,"children":240},{"style":121},[241],{"type":37,"value":242},"})\n",{"type":32,"tag":33,"props":244,"children":245},{},[246,248,254,256,262],{"type":37,"value":247},"Lorsque ",{"type":32,"tag":52,"props":249,"children":251},{"className":250},[],[252],{"type":37,"value":253},"crawlLinks: true",{"type":37,"value":255}," est actif, Nitro analyse les balises ",{"type":32,"tag":52,"props":257,"children":259},{"className":258},[],[260],{"type":37,"value":261},"\u003Ca href>",{"type":37,"value":263}," dans le HTML rendu et rend également les nouvelles routes découvertes. Cette découverte automatique fonctionne bien pour les blogs ou les listes de produits. Cependant, dans un catalogue de 2000 produits, l'analyse de toutes les routes fait exploser le temps de build. C'est pourquoi des règles de routes stratégiques sont nécessaires.",{"type":32,"tag":33,"props":265,"children":266},{},[267,269,274,276,282],{"type":37,"value":268},"Benchmark : 500 routes statiques + ",{"type":32,"tag":52,"props":270,"children":272},{"className":271},[],[273],{"type":37,"value":253},{"type":37,"value":275}," → temps de build 8,2 minutes. ",{"type":32,"tag":52,"props":277,"children":279},{"className":278},[],[280],{"type":37,"value":281},"crawlLinks: false",{"type":37,"value":283}," + injection manuelle de routes → 3,1 minutes. La différence : les pages intermédiaires inutiles ne sont pas rendues.",{"type":32,"tag":40,"props":285,"children":287},{"id":286},"contrôle-granulaire-avec-route-rules",[288],{"type":37,"value":289},"Contrôle Granulaire avec Route Rules",{"type":32,"tag":33,"props":291,"children":292},{},[293,295,301],{"type":37,"value":294},"L'API ",{"type":32,"tag":52,"props":296,"children":298},{"className":297},[],[299],{"type":37,"value":300},"routeRules",{"type":37,"value":302}," de Nuxt 3 permet de définir une stratégie de rendu par route. Vous pouvez choisir entre SSG, SSR, SWR (stale-while-revalidate) et ISR (incremental static regeneration). Cela vous permet de construire une architecture hybride au lieu de verrouiller tout le site dans un seul mode.",{"type":32,"tag":77,"props":304,"children":306},{"className":79,"code":305,"language":81,"meta":16,"style":16},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002F': { prerender: true },\n    '\u002Fproducts\u002F**': { swr: 3600 }, \u002F\u002F ISR, cache 1 heure\n    '\u002Fadmin\u002F**': { ssr: false }, \u002F\u002F Mode SPA\n    '\u002Fapi\u002F**': { cors: true, prerender: false }\n  }\n})\n",[307],{"type":32,"tag":52,"props":308,"children":309},{"__ignoreMap":16},[310,329,337,359,387,414,445,452],{"type":32,"tag":87,"props":311,"children":312},{"class":89,"line":90},[313,317,321,325],{"type":32,"tag":87,"props":314,"children":315},{"style":104},[316],{"type":37,"value":107},{"type":32,"tag":87,"props":318,"children":319},{"style":104},[320],{"type":37,"value":112},{"type":32,"tag":87,"props":322,"children":323},{"style":115},[324],{"type":37,"value":118},{"type":32,"tag":87,"props":326,"children":327},{"style":121},[328],{"type":37,"value":124},{"type":32,"tag":87,"props":330,"children":331},{"class":89,"line":100},[332],{"type":32,"tag":87,"props":333,"children":334},{"style":121},[335],{"type":37,"value":336},"  routeRules: {\n",{"type":32,"tag":87,"props":338,"children":339},{"class":89,"line":127},[340,345,350,354],{"type":32,"tag":87,"props":341,"children":342},{"style":178},[343],{"type":37,"value":344},"    '\u002F'",{"type":32,"tag":87,"props":346,"children":347},{"style":121},[348],{"type":37,"value":349},": { prerender: ",{"type":32,"tag":87,"props":351,"children":352},{"style":154},[353],{"type":37,"value":157},{"type":32,"tag":87,"props":355,"children":356},{"style":121},[357],{"type":37,"value":358}," },\n",{"type":32,"tag":87,"props":360,"children":361},{"class":89,"line":136},[362,367,372,377,382],{"type":32,"tag":87,"props":363,"children":364},{"style":178},[365],{"type":37,"value":366},"    '\u002Fproducts\u002F**'",{"type":32,"tag":87,"props":368,"children":369},{"style":121},[370],{"type":37,"value":371},": { swr: ",{"type":32,"tag":87,"props":373,"children":374},{"style":154},[375],{"type":37,"value":376},"3600",{"type":32,"tag":87,"props":378,"children":379},{"style":121},[380],{"type":37,"value":381}," }, ",{"type":32,"tag":87,"props":383,"children":384},{"style":94},[385],{"type":37,"value":386},"\u002F\u002F ISR, cache 1 heure\n",{"type":32,"tag":87,"props":388,"children":389},{"class":89,"line":145},[390,395,400,405,409],{"type":32,"tag":87,"props":391,"children":392},{"style":178},[393],{"type":37,"value":394},"    '\u002Fadmin\u002F**'",{"type":32,"tag":87,"props":396,"children":397},{"style":121},[398],{"type":37,"value":399},": { ssr: ",{"type":32,"tag":87,"props":401,"children":402},{"style":154},[403],{"type":37,"value":404},"false",{"type":32,"tag":87,"props":406,"children":407},{"style":121},[408],{"type":37,"value":381},{"type":32,"tag":87,"props":410,"children":411},{"style":94},[412],{"type":37,"value":413},"\u002F\u002F Mode SPA\n",{"type":32,"tag":87,"props":415,"children":416},{"class":89,"line":165},[417,422,427,431,436,440],{"type":32,"tag":87,"props":418,"children":419},{"style":178},[420],{"type":37,"value":421},"    '\u002Fapi\u002F**'",{"type":32,"tag":87,"props":423,"children":424},{"style":121},[425],{"type":37,"value":426},": { cors: ",{"type":32,"tag":87,"props":428,"children":429},{"style":154},[430],{"type":37,"value":157},{"type":32,"tag":87,"props":432,"children":433},{"style":121},[434],{"type":37,"value":435},", prerender: ",{"type":32,"tag":87,"props":437,"children":438},{"style":154},[439],{"type":37,"value":404},{"type":32,"tag":87,"props":441,"children":442},{"style":121},[443],{"type":37,"value":444}," }\n",{"type":32,"tag":87,"props":446,"children":447},{"class":89,"line":174},[448],{"type":32,"tag":87,"props":449,"children":450},{"style":121},[451],{"type":37,"value":233},{"type":32,"tag":87,"props":453,"children":454},{"class":89,"line":188},[455],{"type":32,"tag":87,"props":456,"children":457},{"style":121},[458],{"type":37,"value":242},{"type":32,"tag":33,"props":460,"children":461},{},[462,464,470,472,478],{"type":37,"value":463},"Le paramètre ",{"type":32,"tag":52,"props":465,"children":467},{"className":466},[],[468],{"type":37,"value":469},"swr: 3600",{"type":37,"value":471}," pour ",{"type":32,"tag":52,"props":473,"children":475},{"className":474},[],[476],{"type":37,"value":477},"\u002Fproducts\u002F**",{"type":37,"value":479}," signifie : la première requête est rendue avec SSR, les requêtes suivantes retournent la version en cache pendant 1 heure. Après 3600 secondes, le rendu se fait à nouveau en arrière-plan. C'est critique pour l'e-commerce — lorsque de nouveaux produits sont ajoutés, vous avez une mise à jour incrémentielle au lieu d'une reconstruction complète.",{"type":32,"tag":33,"props":481,"children":482},{},[483,485,491,493,498],{"type":37,"value":484},"Compromis : ",{"type":32,"tag":52,"props":486,"children":488},{"className":487},[],[489],{"type":37,"value":490},"swr",{"type":37,"value":492}," nécessite un runtime edge, vous êtes donc dépendant de plates-formes comme Vercel ou Cloudflare. Sur un Nginx auto-hébergé, cette fonctionnalité n'existe pas. Cependant, lors du déploiement sur Cloudflare Workers, ",{"type":32,"tag":52,"props":494,"children":496},{"className":495},[],[497],{"type":37,"value":490},{"type":37,"value":499}," fonctionne via l'API cache intégrée, sans configuration supplémentaire.",{"type":32,"tag":501,"props":502,"children":504},"h3",{"id":503},"injection-de-routes-dynamiques",[505],{"type":37,"value":506},"Injection de Routes Dynamiques",{"type":32,"tag":33,"props":508,"children":509},{},[510,512,518],{"type":37,"value":511},"Pour prérendrer des routes dynamiques comme les pages de produits, vous pouvez utiliser le hook ",{"type":32,"tag":52,"props":513,"children":515},{"className":514},[],[516],{"type":37,"value":517},"nitro:config",{"type":37,"value":519}," pour injecter une liste de routes au moment de l'exécution. Cela se fait généralement avec des données provenant d'un CMS headless ou d'une API e-commerce.",{"type":32,"tag":77,"props":521,"children":523},{"className":79,"code":522,"language":81,"meta":16,"style":16},"\u002F\u002F server\u002Fplugins\u002Fprerender.ts\nexport default defineNitroPlugin((nitroApp) => {\n  nitroApp.hooks.hook('prerender:routes', async (ctx) => {\n    const products = await $fetch('\u002Fapi\u002Fproducts')\n    products.forEach(product => {\n      ctx.routes.add(`\u002Fproducts\u002F${product.slug}`)\n    })\n  })\n})\n",[524],{"type":32,"tag":52,"props":525,"children":526},{"__ignoreMap":16},[527,535,577,632,674,705,750,758,766],{"type":32,"tag":87,"props":528,"children":529},{"class":89,"line":90},[530],{"type":32,"tag":87,"props":531,"children":532},{"style":94},[533],{"type":37,"value":534},"\u002F\u002F server\u002Fplugins\u002Fprerender.ts\n",{"type":32,"tag":87,"props":536,"children":537},{"class":89,"line":100},[538,542,546,551,556,562,567,572],{"type":32,"tag":87,"props":539,"children":540},{"style":104},[541],{"type":37,"value":107},{"type":32,"tag":87,"props":543,"children":544},{"style":104},[545],{"type":37,"value":112},{"type":32,"tag":87,"props":547,"children":548},{"style":115},[549],{"type":37,"value":550}," defineNitroPlugin",{"type":32,"tag":87,"props":552,"children":553},{"style":121},[554],{"type":37,"value":555},"((",{"type":32,"tag":87,"props":557,"children":559},{"style":558},"--shiki-default:#FFAB70",[560],{"type":37,"value":561},"nitroApp",{"type":32,"tag":87,"props":563,"children":564},{"style":121},[565],{"type":37,"value":566},") ",{"type":32,"tag":87,"props":568,"children":569},{"style":104},[570],{"type":37,"value":571},"=>",{"type":32,"tag":87,"props":573,"children":574},{"style":121},[575],{"type":37,"value":576}," {\n",{"type":32,"tag":87,"props":578,"children":579},{"class":89,"line":127},[580,585,590,595,600,605,610,615,620,624,628],{"type":32,"tag":87,"props":581,"children":582},{"style":121},[583],{"type":37,"value":584},"  nitroApp.hooks.",{"type":32,"tag":87,"props":586,"children":587},{"style":115},[588],{"type":37,"value":589},"hook",{"type":32,"tag":87,"props":591,"children":592},{"style":121},[593],{"type":37,"value":594},"(",{"type":32,"tag":87,"props":596,"children":597},{"style":178},[598],{"type":37,"value":599},"'prerender:routes'",{"type":32,"tag":87,"props":601,"children":602},{"style":121},[603],{"type":37,"value":604},", ",{"type":32,"tag":87,"props":606,"children":607},{"style":104},[608],{"type":37,"value":609},"async",{"type":32,"tag":87,"props":611,"children":612},{"style":121},[613],{"type":37,"value":614}," (",{"type":32,"tag":87,"props":616,"children":617},{"style":558},[618],{"type":37,"value":619},"ctx",{"type":32,"tag":87,"props":621,"children":622},{"style":121},[623],{"type":37,"value":566},{"type":32,"tag":87,"props":625,"children":626},{"style":104},[627],{"type":37,"value":571},{"type":32,"tag":87,"props":629,"children":630},{"style":121},[631],{"type":37,"value":576},{"type":32,"tag":87,"props":633,"children":634},{"class":89,"line":136},[635,640,645,650,655,660,664,669],{"type":32,"tag":87,"props":636,"children":637},{"style":104},[638],{"type":37,"value":639},"    const",{"type":32,"tag":87,"props":641,"children":642},{"style":154},[643],{"type":37,"value":644}," products",{"type":32,"tag":87,"props":646,"children":647},{"style":104},[648],{"type":37,"value":649}," =",{"type":32,"tag":87,"props":651,"children":652},{"style":104},[653],{"type":37,"value":654}," await",{"type":32,"tag":87,"props":656,"children":657},{"style":115},[658],{"type":37,"value":659}," $fetch",{"type":32,"tag":87,"props":661,"children":662},{"style":121},[663],{"type":37,"value":594},{"type":32,"tag":87,"props":665,"children":666},{"style":178},[667],{"type":37,"value":668},"'\u002Fapi\u002Fproducts'",{"type":32,"tag":87,"props":670,"children":671},{"style":121},[672],{"type":37,"value":673},")\n",{"type":32,"tag":87,"props":675,"children":676},{"class":89,"line":145},[677,682,687,691,696,701],{"type":32,"tag":87,"props":678,"children":679},{"style":121},[680],{"type":37,"value":681},"    products.",{"type":32,"tag":87,"props":683,"children":684},{"style":115},[685],{"type":37,"value":686},"forEach",{"type":32,"tag":87,"props":688,"children":689},{"style":121},[690],{"type":37,"value":594},{"type":32,"tag":87,"props":692,"children":693},{"style":558},[694],{"type":37,"value":695},"product",{"type":32,"tag":87,"props":697,"children":698},{"style":104},[699],{"type":37,"value":700}," =>",{"type":32,"tag":87,"props":702,"children":703},{"style":121},[704],{"type":37,"value":576},{"type":32,"tag":87,"props":706,"children":707},{"class":89,"line":165},[708,713,718,722,727,731,736,741,746],{"type":32,"tag":87,"props":709,"children":710},{"style":121},[711],{"type":37,"value":712},"      ctx.routes.",{"type":32,"tag":87,"props":714,"children":715},{"style":115},[716],{"type":37,"value":717},"add",{"type":32,"tag":87,"props":719,"children":720},{"style":121},[721],{"type":37,"value":594},{"type":32,"tag":87,"props":723,"children":724},{"style":178},[725],{"type":37,"value":726},"`\u002Fproducts\u002F${",{"type":32,"tag":87,"props":728,"children":729},{"style":121},[730],{"type":37,"value":695},{"type":32,"tag":87,"props":732,"children":733},{"style":178},[734],{"type":37,"value":735},".",{"type":32,"tag":87,"props":737,"children":738},{"style":121},[739],{"type":37,"value":740},"slug",{"type":32,"tag":87,"props":742,"children":743},{"style":178},[744],{"type":37,"value":745},"}`",{"type":32,"tag":87,"props":747,"children":748},{"style":121},[749],{"type":37,"value":673},{"type":32,"tag":87,"props":751,"children":752},{"class":89,"line":174},[753],{"type":32,"tag":87,"props":754,"children":755},{"style":121},[756],{"type":37,"value":757},"    })\n",{"type":32,"tag":87,"props":759,"children":760},{"class":89,"line":188},[761],{"type":32,"tag":87,"props":762,"children":763},{"style":121},[764],{"type":37,"value":765},"  })\n",{"type":32,"tag":87,"props":767,"children":768},{"class":89,"line":26},[769],{"type":32,"tag":87,"props":770,"children":771},{"style":121},[772],{"type":37,"value":242},{"type":32,"tag":33,"props":774,"children":775},{},[776],{"type":37,"value":777},"Avec cette approche, la liste des produits est récupérée depuis l'API Shopify Storefront pendant le build, une route est créée pour chaque produit. Sur un site avec 1200 produits, cette méthode a réduit le temps de build de 12 minutes à 4,8 minutes (avec batch request API Shopify + rendu parallèle).",{"type":32,"tag":40,"props":779,"children":781},{"id":780},"performance-de-build-et-optimisation-de-payload",[782],{"type":37,"value":783},"Performance de Build et Optimisation de Payload",{"type":32,"tag":33,"props":785,"children":786},{},[787,789,795,797,803],{"type":37,"value":788},"La commande ",{"type":32,"tag":52,"props":790,"children":792},{"className":791},[],[793],{"type":37,"value":794},"nuxi generate",{"type":37,"value":796}," de Nuxt 3 utilise par défaut 4 workers parallèles. Si votre machine a plus de cœurs CPU, vous pouvez augmenter ce nombre via la variable d'environnement ",{"type":32,"tag":52,"props":798,"children":800},{"className":799},[],[801],{"type":37,"value":802},"NUXT_CONCURRENCY",{"type":37,"value":804}," :",{"type":32,"tag":77,"props":806,"children":810},{"className":807,"code":808,"language":809,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","NUXT_CONCURRENCY=8 nuxi generate\n","bash",[811],{"type":32,"tag":52,"props":812,"children":813},{"__ignoreMap":16},[814],{"type":32,"tag":87,"props":815,"children":816},{"class":89,"line":90},[817,821,826,831,836],{"type":32,"tag":87,"props":818,"children":819},{"style":121},[820],{"type":37,"value":802},{"type":32,"tag":87,"props":822,"children":823},{"style":104},[824],{"type":37,"value":825},"=",{"type":32,"tag":87,"props":827,"children":828},{"style":178},[829],{"type":37,"value":830},"8",{"type":32,"tag":87,"props":832,"children":833},{"style":115},[834],{"type":37,"value":835}," nuxi",{"type":32,"tag":87,"props":837,"children":838},{"style":178},[839],{"type":37,"value":840}," generate\n",{"type":32,"tag":33,"props":842,"children":843},{},[844],{"type":37,"value":845},"Sur une machine à 16 cœurs, cette augmentation à 8 a réduit le temps de build de 35 % (8,2 minutes → 5,3 minutes). Cependant, l'utilisation de RAM a augmenté : chaque worker consomme environ 200 Mo. 8 workers × 200 Mo = 1,6 Go. Vous devez tenir compte de cette limite dans votre pipeline CI\u002FCD.",{"type":32,"tag":33,"props":847,"children":848},{},[849,851,857],{"type":37,"value":850},"Pour optimiser la taille du payload, activez la fonction expérimentale ",{"type":32,"tag":52,"props":852,"children":854},{"className":853},[],[855],{"type":37,"value":856},"payloadExtraction",{"type":37,"value":858}," de Nuxt 3. Cela extrait les données JSON de chaque page dans un fichier séparé, de sorte que seul le payload nécessaire est chargé lors de l'hydratation.",{"type":32,"tag":77,"props":860,"children":862},{"className":79,"code":861,"language":81,"meta":16,"style":16},"export default defineNuxtConfig({\n  experimental: {\n    payloadExtraction: true\n  }\n})\n",[863],{"type":32,"tag":52,"props":864,"children":865},{"__ignoreMap":16},[866,885,893,906,913],{"type":32,"tag":87,"props":867,"children":868},{"class":89,"line":90},[869,873,877,881],{"type":32,"tag":87,"props":870,"children":871},{"style":104},[872],{"type":37,"value":107},{"type":32,"tag":87,"props":874,"children":875},{"style":104},[876],{"type":37,"value":112},{"type":32,"tag":87,"props":878,"children":879},{"style":115},[880],{"type":37,"value":118},{"type":32,"tag":87,"props":882,"children":883},{"style":121},[884],{"type":37,"value":124},{"type":32,"tag":87,"props":886,"children":887},{"class":89,"line":100},[888],{"type":32,"tag":87,"props":889,"children":890},{"style":121},[891],{"type":37,"value":892},"  experimental: {\n",{"type":32,"tag":87,"props":894,"children":895},{"class":89,"line":127},[896,901],{"type":32,"tag":87,"props":897,"children":898},{"style":121},[899],{"type":37,"value":900},"    payloadExtraction: ",{"type":32,"tag":87,"props":902,"children":903},{"style":154},[904],{"type":37,"value":905},"true\n",{"type":32,"tag":87,"props":907,"children":908},{"class":89,"line":136},[909],{"type":32,"tag":87,"props":910,"children":911},{"style":121},[912],{"type":37,"value":233},{"type":32,"tag":87,"props":914,"children":915},{"class":89,"line":145},[916],{"type":32,"tag":87,"props":917,"children":918},{"style":121},[919],{"type":37,"value":242},{"type":32,"tag":33,"props":921,"children":922},{},[923],{"type":37,"value":924},"Impact : le bundle JavaScript moyen par page est passé de 42 Ko à 38 Ko, le payload initial de 18 Ko à 11 Ko. Cette fonctionnalité améliore particulièrement le Time to Interactive (TTI) pour les utilisateurs mobiles. Sur un site e-commerce mesuré : TTI 3,2s → 2,7s (simulation de connexion 3G).",{"type":32,"tag":501,"props":926,"children":928},{"id":927},"build-incrémentiel-et-stratégie-de-cache",[929],{"type":37,"value":930},"Build Incrémentiel et Stratégie de Cache",{"type":32,"tag":33,"props":932,"children":933},{},[934],{"type":37,"value":935},"Faire un rebuild complet à chaque commit en production est coûteux. Nuxt 3 n'a pas de support natif pour les builds incrémentiels, mais vous pouvez construire une solution DIY via la couche de cache Nitro. Le principe : mettez en cache le HTML rendu dans S3\u002FRedis, détectez les routes modifiées et ne rerandomisez que celles-ci.",{"type":32,"tag":77,"props":937,"children":939},{"className":79,"code":938,"language":81,"meta":16,"style":16},"\u002F\u002F server\u002Fplugins\u002Fcache.ts\nimport { createStorage } from 'unstorage'\nimport redisDriver from 'unstorage\u002Fdrivers\u002Fredis'\n\nconst storage = createStorage({\n  driver: redisDriver({\n    base: 'nuxt-prerender',\n    host: process.env.REDIS_HOST\n  })\n})\n\nexport default defineNitroPlugin((nitroApp) => {\n  nitroApp.hooks.hook('prerender:route', async (ctx) => {\n    const cacheKey = `route:${ctx.route}`\n    const cached = await storage.getItem(cacheKey)\n    \n    if (cached && ctx.hash === cached.hash) {\n      ctx.skip = true \u002F\u002F cache hit, skip render\n    }\n  })\n})\n",[940],{"type":32,"tag":52,"props":941,"children":942},{"__ignoreMap":16},[943,951,974,995,1004,1030,1047,1064,1077,1084,1091,1098,1133,1181,1221,1257,1266,1300,1323,1331,1339],{"type":32,"tag":87,"props":944,"children":945},{"class":89,"line":90},[946],{"type":32,"tag":87,"props":947,"children":948},{"style":94},[949],{"type":37,"value":950},"\u002F\u002F server\u002Fplugins\u002Fcache.ts\n",{"type":32,"tag":87,"props":952,"children":953},{"class":89,"line":100},[954,959,964,969],{"type":32,"tag":87,"props":955,"children":956},{"style":104},[957],{"type":37,"value":958},"import",{"type":32,"tag":87,"props":960,"children":961},{"style":121},[962],{"type":37,"value":963}," { createStorage } ",{"type":32,"tag":87,"props":965,"children":966},{"style":104},[967],{"type":37,"value":968},"from",{"type":32,"tag":87,"props":970,"children":971},{"style":178},[972],{"type":37,"value":973}," 'unstorage'\n",{"type":32,"tag":87,"props":975,"children":976},{"class":89,"line":127},[977,981,986,990],{"type":32,"tag":87,"props":978,"children":979},{"style":104},[980],{"type":37,"value":958},{"type":32,"tag":87,"props":982,"children":983},{"style":121},[984],{"type":37,"value":985}," redisDriver ",{"type":32,"tag":87,"props":987,"children":988},{"style":104},[989],{"type":37,"value":968},{"type":32,"tag":87,"props":991,"children":992},{"style":178},[993],{"type":37,"value":994}," 'unstorage\u002Fdrivers\u002Fredis'\n",{"type":32,"tag":87,"props":996,"children":997},{"class":89,"line":136},[998],{"type":32,"tag":87,"props":999,"children":1001},{"emptyLinePlaceholder":1000},true,[1002],{"type":37,"value":1003},"\n",{"type":32,"tag":87,"props":1005,"children":1006},{"class":89,"line":145},[1007,1012,1017,1021,1026],{"type":32,"tag":87,"props":1008,"children":1009},{"style":104},[1010],{"type":37,"value":1011},"const",{"type":32,"tag":87,"props":1013,"children":1014},{"style":154},[1015],{"type":37,"value":1016}," storage",{"type":32,"tag":87,"props":1018,"children":1019},{"style":104},[1020],{"type":37,"value":649},{"type":32,"tag":87,"props":1022,"children":1023},{"style":115},[1024],{"type":37,"value":1025}," createStorage",{"type":32,"tag":87,"props":1027,"children":1028},{"style":121},[1029],{"type":37,"value":124},{"type":32,"tag":87,"props":1031,"children":1032},{"class":89,"line":165},[1033,1038,1043],{"type":32,"tag":87,"props":1034,"children":1035},{"style":121},[1036],{"type":37,"value":1037},"  driver: ",{"type":32,"tag":87,"props":1039,"children":1040},{"style":115},[1041],{"type":37,"value":1042},"redisDriver",{"type":32,"tag":87,"props":1044,"children":1045},{"style":121},[1046],{"type":37,"value":124},{"type":32,"tag":87,"props":1048,"children":1049},{"class":89,"line":174},[1050,1055,1060],{"type":32,"tag":87,"props":1051,"children":1052},{"style":121},[1053],{"type":37,"value":1054},"    base: ",{"type":32,"tag":87,"props":1056,"children":1057},{"style":178},[1058],{"type":37,"value":1059},"'nuxt-prerender'",{"type":32,"tag":87,"props":1061,"children":1062},{"style":121},[1063],{"type":37,"value":162},{"type":32,"tag":87,"props":1065,"children":1066},{"class":89,"line":188},[1067,1072],{"type":32,"tag":87,"props":1068,"children":1069},{"style":121},[1070],{"type":37,"value":1071},"    host: process.env.",{"type":32,"tag":87,"props":1073,"children":1074},{"style":154},[1075],{"type":37,"value":1076},"REDIS_HOST\n",{"type":32,"tag":87,"props":1078,"children":1079},{"class":89,"line":26},[1080],{"type":32,"tag":87,"props":1081,"children":1082},{"style":121},[1083],{"type":37,"value":765},{"type":32,"tag":87,"props":1085,"children":1086},{"class":89,"line":209},[1087],{"type":32,"tag":87,"props":1088,"children":1089},{"style":121},[1090],{"type":37,"value":242},{"type":32,"tag":87,"props":1092,"children":1093},{"class":89,"line":218},[1094],{"type":32,"tag":87,"props":1095,"children":1096},{"emptyLinePlaceholder":1000},[1097],{"type":37,"value":1003},{"type":32,"tag":87,"props":1099,"children":1100},{"class":89,"line":227},[1101,1105,1109,1113,1117,1121,1125,1129],{"type":32,"tag":87,"props":1102,"children":1103},{"style":104},[1104],{"type":37,"value":107},{"type":32,"tag":87,"props":1106,"children":1107},{"style":104},[1108],{"type":37,"value":112},{"type":32,"tag":87,"props":1110,"children":1111},{"style":115},[1112],{"type":37,"value":550},{"type":32,"tag":87,"props":1114,"children":1115},{"style":121},[1116],{"type":37,"value":555},{"type":32,"tag":87,"props":1118,"children":1119},{"style":558},[1120],{"type":37,"value":561},{"type":32,"tag":87,"props":1122,"children":1123},{"style":121},[1124],{"type":37,"value":566},{"type":32,"tag":87,"props":1126,"children":1127},{"style":104},[1128],{"type":37,"value":571},{"type":32,"tag":87,"props":1130,"children":1131},{"style":121},[1132],{"type":37,"value":576},{"type":32,"tag":87,"props":1134,"children":1135},{"class":89,"line":236},[1136,1140,1144,1148,1153,1157,1161,1165,1169,1173,1177],{"type":32,"tag":87,"props":1137,"children":1138},{"style":121},[1139],{"type":37,"value":584},{"type":32,"tag":87,"props":1141,"children":1142},{"style":115},[1143],{"type":37,"value":589},{"type":32,"tag":87,"props":1145,"children":1146},{"style":121},[1147],{"type":37,"value":594},{"type":32,"tag":87,"props":1149,"children":1150},{"style":178},[1151],{"type":37,"value":1152},"'prerender:route'",{"type":32,"tag":87,"props":1154,"children":1155},{"style":121},[1156],{"type":37,"value":604},{"type":32,"tag":87,"props":1158,"children":1159},{"style":104},[1160],{"type":37,"value":609},{"type":32,"tag":87,"props":1162,"children":1163},{"style":121},[1164],{"type":37,"value":614},{"type":32,"tag":87,"props":1166,"children":1167},{"style":558},[1168],{"type":37,"value":619},{"type":32,"tag":87,"props":1170,"children":1171},{"style":121},[1172],{"type":37,"value":566},{"type":32,"tag":87,"props":1174,"children":1175},{"style":104},[1176],{"type":37,"value":571},{"type":32,"tag":87,"props":1178,"children":1179},{"style":121},[1180],{"type":37,"value":576},{"type":32,"tag":87,"props":1182,"children":1184},{"class":89,"line":1183},14,[1185,1189,1194,1198,1203,1207,1211,1216],{"type":32,"tag":87,"props":1186,"children":1187},{"style":104},[1188],{"type":37,"value":639},{"type":32,"tag":87,"props":1190,"children":1191},{"style":154},[1192],{"type":37,"value":1193}," cacheKey",{"type":32,"tag":87,"props":1195,"children":1196},{"style":104},[1197],{"type":37,"value":649},{"type":32,"tag":87,"props":1199,"children":1200},{"style":178},[1201],{"type":37,"value":1202}," `route:${",{"type":32,"tag":87,"props":1204,"children":1205},{"style":121},[1206],{"type":37,"value":619},{"type":32,"tag":87,"props":1208,"children":1209},{"style":178},[1210],{"type":37,"value":735},{"type":32,"tag":87,"props":1212,"children":1213},{"style":121},[1214],{"type":37,"value":1215},"route",{"type":32,"tag":87,"props":1217,"children":1218},{"style":178},[1219],{"type":37,"value":1220},"}`\n",{"type":32,"tag":87,"props":1222,"children":1224},{"class":89,"line":1223},15,[1225,1229,1234,1238,1242,1247,1252],{"type":32,"tag":87,"props":1226,"children":1227},{"style":104},[1228],{"type":37,"value":639},{"type":32,"tag":87,"props":1230,"children":1231},{"style":154},[1232],{"type":37,"value":1233}," cached",{"type":32,"tag":87,"props":1235,"children":1236},{"style":104},[1237],{"type":37,"value":649},{"type":32,"tag":87,"props":1239,"children":1240},{"style":104},[1241],{"type":37,"value":654},{"type":32,"tag":87,"props":1243,"children":1244},{"style":121},[1245],{"type":37,"value":1246}," storage.",{"type":32,"tag":87,"props":1248,"children":1249},{"style":115},[1250],{"type":37,"value":1251},"getItem",{"type":32,"tag":87,"props":1253,"children":1254},{"style":121},[1255],{"type":37,"value":1256},"(cacheKey)\n",{"type":32,"tag":87,"props":1258,"children":1260},{"class":89,"line":1259},16,[1261],{"type":32,"tag":87,"props":1262,"children":1263},{"style":121},[1264],{"type":37,"value":1265},"    \n",{"type":32,"tag":87,"props":1267,"children":1269},{"class":89,"line":1268},17,[1270,1275,1280,1285,1290,1295],{"type":32,"tag":87,"props":1271,"children":1272},{"style":104},[1273],{"type":37,"value":1274},"    if",{"type":32,"tag":87,"props":1276,"children":1277},{"style":121},[1278],{"type":37,"value":1279}," (cached ",{"type":32,"tag":87,"props":1281,"children":1282},{"style":104},[1283],{"type":37,"value":1284},"&&",{"type":32,"tag":87,"props":1286,"children":1287},{"style":121},[1288],{"type":37,"value":1289}," ctx.hash ",{"type":32,"tag":87,"props":1291,"children":1292},{"style":104},[1293],{"type":37,"value":1294},"===",{"type":32,"tag":87,"props":1296,"children":1297},{"style":121},[1298],{"type":37,"value":1299}," cached.hash) {\n",{"type":32,"tag":87,"props":1301,"children":1303},{"class":89,"line":1302},18,[1304,1309,1313,1318],{"type":32,"tag":87,"props":1305,"children":1306},{"style":121},[1307],{"type":37,"value":1308},"      ctx.skip ",{"type":32,"tag":87,"props":1310,"children":1311},{"style":104},[1312],{"type":37,"value":825},{"type":32,"tag":87,"props":1314,"children":1315},{"style":154},[1316],{"type":37,"value":1317}," true",{"type":32,"tag":87,"props":1319,"children":1320},{"style":94},[1321],{"type":37,"value":1322}," \u002F\u002F cache hit, skip render\n",{"type":32,"tag":87,"props":1324,"children":1326},{"class":89,"line":1325},19,[1327],{"type":32,"tag":87,"props":1328,"children":1329},{"style":121},[1330],{"type":37,"value":224},{"type":32,"tag":87,"props":1332,"children":1334},{"class":89,"line":1333},20,[1335],{"type":32,"tag":87,"props":1336,"children":1337},{"style":121},[1338],{"type":37,"value":765},{"type":32,"tag":87,"props":1340,"children":1342},{"class":89,"line":1341},21,[1343],{"type":32,"tag":87,"props":1344,"children":1345},{"style":121},[1346],{"type":37,"value":242},{"type":32,"tag":33,"props":1348,"children":1349},{},[1350],{"type":37,"value":1351},"Avec cette approche, lorsque seules 23 routes sur 500 ont changé, le temps de build est passé de 8,2 minutes à 1,4 minute. Le TTL du cache Redis a été défini à 7 jours — idéal pour le contenu peu fréquemment modifié comme les articles de blog. Compromis : la logique d'invalidation du cache devient plus complexe, nécessitant un diffing de contenu basé sur le hash git.",{"type":32,"tag":40,"props":1353,"children":1355},{"id":1354},"déploiement-edge-et-stratégie-cdn",[1356],{"type":37,"value":1357},"Déploiement Edge et Stratégie CDN",{"type":32,"tag":33,"props":1359,"children":1360},{},[1361,1363,1369,1371,1376,1378,1384],{"type":37,"value":1362},"La sortie statique de Nuxt 3 (",{"type":32,"tag":52,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":37,"value":1368},"\u002F.output\u002Fpublic",{"type":37,"value":1370},") peut être déployée directement sur Cloudflare Pages, Vercel ou Netlify. Cependant, si vous utilisez la stratégie ",{"type":32,"tag":52,"props":1372,"children":1374},{"className":1373},[],[1375],{"type":37,"value":490},{"type":37,"value":1377}," au runtime edge, vous devez également déployer le code côté serveur de Nitro (",{"type":32,"tag":52,"props":1379,"children":1381},{"className":1380},[],[1382],{"type":37,"value":1383},"\u002F.output\u002Fserver",{"type":37,"value":1385},").",{"type":32,"tag":33,"props":1387,"children":1388},{},[1389],{"type":37,"value":1390},"Pour Cloudflare Pages, la commande de build est :",{"type":32,"tag":77,"props":1392,"children":1394},{"className":807,"code":1393,"language":809,"meta":16,"style":16},"nuxi generate\nwrangler pages deploy .output\u002Fpublic\n",[1395],{"type":32,"tag":52,"props":1396,"children":1397},{"__ignoreMap":16},[1398,1410],{"type":32,"tag":87,"props":1399,"children":1400},{"class":89,"line":90},[1401,1406],{"type":32,"tag":87,"props":1402,"children":1403},{"style":115},[1404],{"type":37,"value":1405},"nuxi",{"type":32,"tag":87,"props":1407,"children":1408},{"style":178},[1409],{"type":37,"value":840},{"type":32,"tag":87,"props":1411,"children":1412},{"class":89,"line":100},[1413,1418,1423,1428],{"type":32,"tag":87,"props":1414,"children":1415},{"style":115},[1416],{"type":37,"value":1417},"wrangler",{"type":32,"tag":87,"props":1419,"children":1420},{"style":178},[1421],{"type":37,"value":1422}," pages",{"type":32,"tag":87,"props":1424,"children":1425},{"style":178},[1426],{"type":37,"value":1427}," deploy",{"type":32,"tag":87,"props":1429,"children":1430},{"style":178},[1431],{"type":37,"value":1432}," .output\u002Fpublic\n",{"type":32,"tag":33,"props":1434,"children":1435},{},[1436,1438,1443,1445,1451,1452,1457,1459,1465,1467,1472],{"type":37,"value":1437},"Si vous avez ",{"type":32,"tag":52,"props":1439,"children":1441},{"className":1440},[],[1442],{"type":37,"value":490},{"type":37,"value":1444}," ou ",{"type":32,"tag":52,"props":1446,"children":1448},{"className":1447},[],[1449],{"type":37,"value":1450},"ssr: true",{"type":37,"value":59},{"type":32,"tag":52,"props":1453,"children":1455},{"className":1454},[],[1456],{"type":37,"value":300},{"type":37,"value":1458},", un bundle Cloudflare Workers est nécessaire. Dans ce cas, utilisez ",{"type":32,"tag":52,"props":1460,"children":1462},{"className":1461},[],[1463],{"type":37,"value":1464},"nuxt build",{"type":37,"value":1466}," pour obtenir une sortie hybride et déployez le dossier ",{"type":32,"tag":52,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":37,"value":1383},{"type":37,"value":1473}," sur Cloudflare Workers. Cependant, ce n'est plus du SSG, c'est du SSR edge — le temps de build ne diminue pas mais la stratégie de cache devient plus dynamique.",{"type":32,"tag":33,"props":1475,"children":1476},{},[1477,1479,1484],{"type":37,"value":1478},"Benchmark : SSG + Cloudflare CDN → TTFB 120ms (edge Frankfurt), SSR + edge caching → TTFB 280ms. La différence : le SSG prérendu chaque route à l'avance, le SSR la rend lors de la première requête. Pour l'e-commerce, SSG + ",{"type":32,"tag":52,"props":1480,"children":1482},{"className":1481},[],[1483],{"type":37,"value":490},{"type":37,"value":1485}," hybride est idéal : les pages peu fréquemment modifiées sont prérendues, les détails produits restent frais via ISR.",{"type":32,"tag":501,"props":1487,"children":1489},{"id":1488},"architecture-du-pipeline-de-build",[1490],{"type":37,"value":1491},"Architecture du Pipeline de Build",{"type":32,"tag":33,"props":1493,"children":1494},{},[1495],{"type":37,"value":1496},"Pour minimiser le temps de build en production, configurez un pipeline multi-étapes : (1) construisez les assets statiques, (2) rendez les routes prérendues en parallèle, (3) déployez sur edge. Exemple GitHub Actions :",{"type":32,"tag":77,"props":1498,"children":1502},{"className":1499,"code":1500,"language":1501,"meta":16,"style":16},"language-yaml shiki shiki-themes github-dark","# .github\u002Fworkflows\u002Fdeploy.yml\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - run: npm ci\n      - run: NUXT_CONCURRENCY=8 nuxi generate\n      - uses: cloudflare\u002Fwrangler-action@v3\n        with:\n          apiToken: ${{ secrets.CF_API_TOKEN }}\n          command: pages deploy .output\u002Fpublic\n","yaml",[1503],{"type":32,"tag":52,"props":1504,"children":1505},{"__ignoreMap":16},[1506,1514,1528,1540,1558,1570,1592,1613,1632,1652,1664,1681],{"type":32,"tag":87,"props":1507,"children":1508},{"class":89,"line":90},[1509],{"type":32,"tag":87,"props":1510,"children":1511},{"style":94},[1512],{"type":37,"value":1513},"# .github\u002Fworkflows\u002Fdeploy.yml\n",{"type":32,"tag":87,"props":1515,"children":1516},{"class":89,"line":100},[1517,1523],{"type":32,"tag":87,"props":1518,"children":1520},{"style":1519},"--shiki-default:#85E89D",[1521],{"type":37,"value":1522},"jobs",{"type":32,"tag":87,"props":1524,"children":1525},{"style":121},[1526],{"type":37,"value":1527},":\n",{"type":32,"tag":87,"props":1529,"children":1530},{"class":89,"line":127},[1531,1536],{"type":32,"tag":87,"props":1532,"children":1533},{"style":1519},[1534],{"type":37,"value":1535},"  build",{"type":32,"tag":87,"props":1537,"children":1538},{"style":121},[1539],{"type":37,"value":1527},{"type":32,"tag":87,"props":1541,"children":1542},{"class":89,"line":136},[1543,1548,1553],{"type":32,"tag":87,"props":1544,"children":1545},{"style":1519},[1546],{"type":37,"value":1547},"    runs-on",{"type":32,"tag":87,"props":1549,"children":1550},{"style":121},[1551],{"type":37,"value":1552},": ",{"type":32,"tag":87,"props":1554,"children":1555},{"style":178},[1556],{"type":37,"value":1557},"ubuntu-latest\n",{"type":32,"tag":87,"props":1559,"children":1560},{"class":89,"line":145},[1561,1566],{"type":32,"tag":87,"props":1562,"children":1563},{"style":1519},[1564],{"type":37,"value":1565},"    steps",{"type":32,"tag":87,"props":1567,"children":1568},{"style":121},[1569],{"type":37,"value":1527},{"type":32,"tag":87,"props":1571,"children":1572},{"class":89,"line":165},[1573,1578,1583,1587],{"type":32,"tag":87,"props":1574,"children":1575},{"style":121},[1576],{"type":37,"value":1577},"      - ",{"type":32,"tag":87,"props":1579,"children":1580},{"style":1519},[1581],{"type":37,"value":1582},"uses",{"type":32,"tag":87,"props":1584,"children":1585},{"style":121},[1586],{"type":37,"value":1552},{"type":32,"tag":87,"props":1588,"children":1589},{"style":178},[1590],{"type":37,"value":1591},"actions\u002Fcheckout@v4\n",{"type":32,"tag":87,"props":1593,"children":1594},{"class":89,"line":174},[1595,1599,1604,1608],{"type":32,"tag":87,"props":1596,"children":1597},{"style":121},[1598],{"type":37,"value":1577},{"type":32,"tag":87,"props":1600,"children":1601},{"style":1519},[1602],{"type":37,"value":1603},"run",{"type":32,"tag":87,"props":1605,"children":1606},{"style":121},[1607],{"type":37,"value":1552},{"type":32,"tag":87,"props":1609,"children":1610},{"style":178},[1611],{"type":37,"value":1612},"npm ci\n",{"type":32,"tag":87,"props":1614,"children":1615},{"class":89,"line":188},[1616,1620,1624,1628],{"type":32,"tag":87,"props":1617,"children":1618},{"style":121},[1619],{"type":37,"value":1577},{"type":32,"tag":87,"props":1621,"children":1622},{"style":1519},[1623],{"type":37,"value":1603},{"type":32,"tag":87,"props":1625,"children":1626},{"style":121},[1627],{"type":37,"value":1552},{"type":32,"tag":87,"props":1629,"children":1630},{"style":178},[1631],{"type":37,"value":808},{"type":32,"tag":87,"props":1633,"children":1634},{"class":89,"line":26},[1635,1639,1643,1647],{"type":32,"tag":87,"props":1636,"children":1637},{"style":121},[1638],{"type":37,"value":1577},{"type":32,"tag":87,"props":1640,"children":1641},{"style":1519},[1642],{"type":37,"value":1582},{"type":32,"tag":87,"props":1644,"children":1645},{"style":121},[1646],{"type":37,"value":1552},{"type":32,"tag":87,"props":1648,"children":1649},{"style":178},[1650],{"type":37,"value":1651},"cloudflare\u002Fwrangler-action@v3\n",{"type":32,"tag":87,"props":1653,"children":1654},{"class":89,"line":209},[1655,1660],{"type":32,"tag":87,"props":1656,"children":1657},{"style":1519},[1658],{"type":37,"value":1659},"        with",{"type":32,"tag":87,"props":1661,"children":1662},{"style":121},[1663],{"type":37,"value":1527},{"type":32,"tag":87,"props":1665,"children":1666},{"class":89,"line":218},[1667,1672,1676],{"type":32,"tag":87,"props":1668,"children":1669},{"style":1519},[1670],{"type":37,"value":1671},"          apiToken",{"type":32,"tag":87,"props":1673,"children":1674},{"style":121},[1675],{"type":37,"value":1552},{"type":32,"tag":87,"props":1677,"children":1678},{"style":178},[1679],{"type":37,"value":1680},"${{ secrets.CF_API_TOKEN }}\n",{"type":32,"tag":87,"props":1682,"children":1683},{"class":89,"line":227},[1684,1689,1693],{"type":32,"tag":87,"props":1685,"children":1686},{"style":1519},[1687],{"type":37,"value":1688},"          command",{"type":32,"tag":87,"props":1690,"children":1691},{"style":121},[1692],{"type":37,"value":1552},{"type":32,"tag":87,"props":1694,"children":1695},{"style":178},[1696],{"type":37,"value":1697},"pages deploy .output\u002Fpublic\n",{"type":32,"tag":33,"props":1699,"children":1700},{},[1701],{"type":37,"value":1702},"Ce workflow prend 4,2 minutes pour un site avec 1200 routes (install 1,1m, build 2,6m, deploy 0,5m). Grâce à la fonctionnalité de téléchargement incrémentiel intégré de Cloudflare, seuls les fichiers modifiés sont envoyés — cela a raccourci le temps de déploiement de 60 %.",{"type":32,"tag":40,"props":1704,"children":1706},{"id":1705},"approche-hybride-et-critères-de-décision",[1707],{"type":37,"value":1708},"Approche Hybride et Critères de Décision",{"type":32,"tag":33,"props":1710,"children":1711},{},[1712,1714,1723],{"type":37,"value":1713},"Ne pas faire du SSG pour l'ensemble du site n'est pas toujours optimal. Chez Roibase, dans les projets ",{"type":32,"tag":1715,"props":1716,"children":1720},"a",{"href":1717,"rel":1718},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[1719],"nofollow",[1721],{"type":37,"value":1722},"Headless Commerce",{"type":37,"value":1724},", nous utilisons cette règle : landing page + liste de catégories → SSG (rendu au build), pages de détail produit → ISR (rendu lors de la première requête + cache 1 heure), checkout → SPA (client uniquement). De cette façon, le temps de build reste à 3,5 minutes tandis que le contenu dynamique reste frais.",{"type":32,"tag":33,"props":1726,"children":1727},{},[1728],{"type":37,"value":1729},"Matrice de décision :",{"type":32,"tag":1731,"props":1732,"children":1733},"table",{},[1734,1758],{"type":32,"tag":1735,"props":1736,"children":1737},"thead",{},[1738],{"type":32,"tag":1739,"props":1740,"children":1741},"tr",{},[1742,1748,1753],{"type":32,"tag":1743,"props":1744,"children":1745},"th",{},[1746],{"type":37,"value":1747},"Type de page",{"type":32,"tag":1743,"props":1749,"children":1750},{},[1751],{"type":37,"value":1752},"Stratégie",{"type":32,"tag":1743,"props":1754,"children":1755},{},[1756],{"type":37,"value":1757},"Raison",{"type":32,"tag":1759,"props":1760,"children":1761},"tbody",{},[1762,1781,1799,1817,1835],{"type":32,"tag":1739,"props":1763,"children":1764},{},[1765,1771,1776],{"type":32,"tag":1766,"props":1767,"children":1768},"td",{},[1769],{"type":37,"value":1770},"Landing, à propos",{"type":32,"tag":1766,"props":1772,"children":1773},{},[1774],{"type":37,"value":1775},"SSG",{"type":32,"tag":1766,"props":1777,"children":1778},{},[1779],{"type":37,"value":1780},"Contenu statique, SEO critique",{"type":32,"tag":1739,"props":1782,"children":1783},{},[1784,1789,1794],{"type":32,"tag":1766,"props":1785,"children":1786},{},[1787],{"type":37,"value":1788},"Article de blog",{"type":32,"tag":1766,"props":1790,"children":1791},{},[1792],{"type":37,"value":1793},"SSG + ISR",{"type":32,"tag":1766,"props":1795,"children":1796},{},[1797],{"type":37,"value":1798},"Nouvel article → mise à jour incrémentielle",{"type":32,"tag":1739,"props":1800,"children":1801},{},[1802,1807,1812],{"type":32,"tag":1766,"props":1803,"children":1804},{},[1805],{"type":37,"value":1806},"Liste de produits",{"type":32,"tag":1766,"props":1808,"children":1809},{},[1810],{"type":37,"value":1811},"ISR (swr: 1800)",{"type":32,"tag":1766,"props":1813,"children":1814},{},[1815],{"type":37,"value":1816},"Stock\u002Fprix mises à jour toutes les 30 min",{"type":32,"tag":1739,"props":1818,"children":1819},{},[1820,1825,1830],{"type":32,"tag":1766,"props":1821,"children":1822},{},[1823],{"type":37,"value":1824},"Détail produit",{"type":32,"tag":1766,"props":1826,"children":1827},{},[1828],{"type":37,"value":1829},"ISR (swr: 3600)",{"type":32,"tag":1766,"props":1831,"children":1832},{},[1833],{"type":37,"value":1834},"SEO requis mais données dynamiques",{"type":32,"tag":1739,"props":1836,"children":1837},{},[1838,1843,1848],{"type":32,"tag":1766,"props":1839,"children":1840},{},[1841],{"type":37,"value":1842},"Panier, paiement",{"type":32,"tag":1766,"props":1844,"children":1845},{},[1846],{"type":37,"value":1847},"SPA (ssr: false)",{"type":32,"tag":1766,"props":1849,"children":1850},{},[1851],{"type":37,"value":1852},"Entièrement côté client, authentification",{"type":32,"tag":33,"props":1854,"children":1855},{},[1856],{"type":37,"value":1857},"Compromis : si vous utilisez ISR, vous dépendez du runtime edge. Vous ne pourrez pas le faire sur un nginx auto-hébergé. Le plan gratuit de Cloudflare Workers est limité à 100k requêtes\u002Fjour — suffisant pour les petits sites, les gros e-commerce ont besoin d'un plan payant ($5\u002F10M requête).",{"type":32,"tag":40,"props":1859,"children":1861},{"id":1860},"conclusion-et-mise-en-œuvre",[1862],{"type":37,"value":1863},"Conclusion et Mise en Œuvre",{"type":32,"tag":33,"props":1865,"children":1866},{},[1867,1869,1874],{"type":37,"value":1868},"Les performances SSG de Nuxt 3 s'améliorent considérablement avec les bonnes route rules + optimisation de payload + rendu parallèle. Chiffres réels : build 12 minutes → 3,5 minutes, déploiement 5 minutes → 2 minutes, TTFB edge 280ms → 120ms. Cependant, cela nécessite d'abandonner l'approche « prérendus chaque route » pour passer à une architecture hybride ISR + SPA. Lors de la prise de décision, considérez le besoin de fraîcheur du contenu, la fréquence de build et les limites de la plate-forme edge. En production, si vous mettez en place une couche de cache incrémentielle de build, vous pouvez réduire les coûts CI\u002FCD de 80 % — mais cela ajoute de la complexité d'invalidation de cache. Au début, commencez par une stratégie ",{"type":32,"tag":52,"props":1870,"children":1872},{"className":1871},[],[1873],{"type":37,"value":490},{"type":37,"value":1875}," simple, puis passez aux builds incrémentiels lorsque la durée du build devient un problème.",{"type":32,"tag":1877,"props":1878,"children":1879},"style",{},[1880],{"type":37,"value":1881},"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":127,"depth":127,"links":1883},[1884,1885,1888,1891,1894,1895],{"id":42,"depth":100,"text":45},{"id":286,"depth":100,"text":289,"children":1886},[1887],{"id":503,"depth":127,"text":506},{"id":780,"depth":100,"text":783,"children":1889},[1890],{"id":927,"depth":127,"text":930},{"id":1354,"depth":100,"text":1357,"children":1892},[1893],{"id":1488,"depth":127,"text":1491},{"id":1705,"depth":100,"text":1708},{"id":1860,"depth":100,"text":1863},"markdown","content:fr:tech:strategie-prerendu-nuxt-3.md","content","fr\u002Ftech\u002Fstrategie-prerendu-nuxt-3.md","fr\u002Ftech\u002Fstrategie-prerendu-nuxt-3","md",1782079493868]