[{"data":1,"prerenderedAt":1752},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fguide-ssg-nuxt-3-strategies-build-optimization":13},{"i18nKey":4,"paths":5},"tech-007-2026-07",{"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-and-build-optimization","\u002Fes\u002Ftech\u002Festrategia-ssg-nuxt-3-prerrender-optimizacion-build","\u002Ffr\u002Ftech\u002Fguide-ssg-nuxt-3-strategies-build-optimization","\u002Fit\u002Ftech\u002Fstrategie-prerender-nuxt-3-e-ottimizzazione-build","\u002Fru\u002Ftech\u002Fssg-strategii-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":1746,"_id":1747,"_source":1748,"_file":1749,"_stem":1750,"_extension":1751},"tech",false,"","Nuxt 3 SSG : Stratégies de Prerender et Optimisation de Build","Guide technique approfondi sur les fonctionnalités de static generation dans Nuxt 3. Route rules, nitro prerender, regeneration statique incrémentale.","2026-07-19",[21,22,23,24,25],"nuxt3","ssg","static-generation","prerender","web-performance",9,"Roibase",{"type":29,"children":30,"toc":1730},"root",[31,48,55,68,272,293,300,305,324,341,346,352,357,493,514,520,533,761,774,780,785,908,920,926,939,1020,1033,1039,1052,1196,1209,1215,1228,1332,1342,1348,1353,1361,1442,1453,1461,1503,1508,1518,1608,1613,1619,1624,1649,1667,1699,1715,1719,1724],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36,39,46],{"type":37,"value":38},"text","Le moteur de static site generation (SSG) de Nuxt 3, Nitro, combine pour la première fois dans l'écosystème Vue l'ISR (Incremental Static Regeneration) et le contrôle granulaire du prerender au niveau des routes, en production. En 2026, bien que certains ont prédit la mort du SSG avec la prolifération des plateformes de déploiement edge, les stratégies hybrides (SSG + ISR à la demande) se sont avérées être la solution la plus rentable pour optimiser les Core Web Vitals. L'API ",{"type":32,"tag":40,"props":41,"children":43},"code",{"className":42},[],[44],{"type":37,"value":45},"routeRules",{"type":37,"value":47}," de Nuxt 3 permet de gérer cette architecture hybride dans un seul fichier de configuration.",{"type":32,"tag":49,"props":50,"children":52},"h2",{"id":51},"stratégie-de-rendu-au-niveau-des-routes",[53],{"type":37,"value":54},"Stratégie de Rendu au Niveau des Routes",{"type":32,"tag":33,"props":56,"children":57},{},[58,60,66],{"type":37,"value":59},"Avec Nuxt 3, le mode de rendu n'est plus défini au niveau de l'application mais au niveau de chaque route. Dans ",{"type":32,"tag":40,"props":61,"children":63},{"className":62},[],[64],{"type":37,"value":65},"nuxt.config.ts",{"type":37,"value":67},", tu peux spécifier une stratégie distincte pour chaque route :",{"type":32,"tag":69,"props":70,"children":74},"pre",{"className":71,"code":72,"language":73,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","export default defineNuxtConfig({\n  routeRules: {\n    '\u002F': { prerender: true },\n    '\u002Fblog\u002F**': { swr: 3600 },\n    '\u002Fapi\u002F**': { cors: true, headers: { 'cache-control': 's-maxage=0' } },\n    '\u002Fadmin\u002F**': { ssr: false },\n    '\u002Fproduct\u002F**': { isr: 60 }\n  }\n})\n","typescript",[75],{"type":32,"tag":40,"props":76,"children":77},{"__ignoreMap":16},[78,107,116,142,165,208,231,255,264],{"type":32,"tag":79,"props":80,"children":83},"span",{"class":81,"line":82},"line",1,[84,90,95,101],{"type":32,"tag":79,"props":85,"children":87},{"style":86},"--shiki-default:#F97583",[88],{"type":37,"value":89},"export",{"type":32,"tag":79,"props":91,"children":92},{"style":86},[93],{"type":37,"value":94}," default",{"type":32,"tag":79,"props":96,"children":98},{"style":97},"--shiki-default:#B392F0",[99],{"type":37,"value":100}," defineNuxtConfig",{"type":32,"tag":79,"props":102,"children":104},{"style":103},"--shiki-default:#E1E4E8",[105],{"type":37,"value":106},"({\n",{"type":32,"tag":79,"props":108,"children":110},{"class":81,"line":109},2,[111],{"type":32,"tag":79,"props":112,"children":113},{"style":103},[114],{"type":37,"value":115},"  routeRules: {\n",{"type":32,"tag":79,"props":117,"children":119},{"class":81,"line":118},3,[120,126,131,137],{"type":32,"tag":79,"props":121,"children":123},{"style":122},"--shiki-default:#9ECBFF",[124],{"type":37,"value":125},"    '\u002F'",{"type":32,"tag":79,"props":127,"children":128},{"style":103},[129],{"type":37,"value":130},": { prerender: ",{"type":32,"tag":79,"props":132,"children":134},{"style":133},"--shiki-default:#79B8FF",[135],{"type":37,"value":136},"true",{"type":32,"tag":79,"props":138,"children":139},{"style":103},[140],{"type":37,"value":141}," },\n",{"type":32,"tag":79,"props":143,"children":145},{"class":81,"line":144},4,[146,151,156,161],{"type":32,"tag":79,"props":147,"children":148},{"style":122},[149],{"type":37,"value":150},"    '\u002Fblog\u002F**'",{"type":32,"tag":79,"props":152,"children":153},{"style":103},[154],{"type":37,"value":155},": { swr: ",{"type":32,"tag":79,"props":157,"children":158},{"style":133},[159],{"type":37,"value":160},"3600",{"type":32,"tag":79,"props":162,"children":163},{"style":103},[164],{"type":37,"value":141},{"type":32,"tag":79,"props":166,"children":168},{"class":81,"line":167},5,[169,174,179,183,188,193,198,203],{"type":32,"tag":79,"props":170,"children":171},{"style":122},[172],{"type":37,"value":173},"    '\u002Fapi\u002F**'",{"type":32,"tag":79,"props":175,"children":176},{"style":103},[177],{"type":37,"value":178},": { cors: ",{"type":32,"tag":79,"props":180,"children":181},{"style":133},[182],{"type":37,"value":136},{"type":32,"tag":79,"props":184,"children":185},{"style":103},[186],{"type":37,"value":187},", headers: { ",{"type":32,"tag":79,"props":189,"children":190},{"style":122},[191],{"type":37,"value":192},"'cache-control'",{"type":32,"tag":79,"props":194,"children":195},{"style":103},[196],{"type":37,"value":197},": ",{"type":32,"tag":79,"props":199,"children":200},{"style":122},[201],{"type":37,"value":202},"'s-maxage=0'",{"type":32,"tag":79,"props":204,"children":205},{"style":103},[206],{"type":37,"value":207}," } },\n",{"type":32,"tag":79,"props":209,"children":211},{"class":81,"line":210},6,[212,217,222,227],{"type":32,"tag":79,"props":213,"children":214},{"style":122},[215],{"type":37,"value":216},"    '\u002Fadmin\u002F**'",{"type":32,"tag":79,"props":218,"children":219},{"style":103},[220],{"type":37,"value":221},": { ssr: ",{"type":32,"tag":79,"props":223,"children":224},{"style":133},[225],{"type":37,"value":226},"false",{"type":32,"tag":79,"props":228,"children":229},{"style":103},[230],{"type":37,"value":141},{"type":32,"tag":79,"props":232,"children":234},{"class":81,"line":233},7,[235,240,245,250],{"type":32,"tag":79,"props":236,"children":237},{"style":122},[238],{"type":37,"value":239},"    '\u002Fproduct\u002F**'",{"type":32,"tag":79,"props":241,"children":242},{"style":103},[243],{"type":37,"value":244},": { isr: ",{"type":32,"tag":79,"props":246,"children":247},{"style":133},[248],{"type":37,"value":249},"60",{"type":32,"tag":79,"props":251,"children":252},{"style":103},[253],{"type":37,"value":254}," }\n",{"type":32,"tag":79,"props":256,"children":258},{"class":81,"line":257},8,[259],{"type":32,"tag":79,"props":260,"children":261},{"style":103},[262],{"type":37,"value":263},"  }\n",{"type":32,"tag":79,"props":265,"children":266},{"class":81,"line":26},[267],{"type":32,"tag":79,"props":268,"children":269},{"style":103},[270],{"type":37,"value":271},"})\n",{"type":32,"tag":33,"props":273,"children":274},{},[275,277,283,285,291],{"type":37,"value":276},"Cette structure offre plusieurs avantages : les pages statiques (landing pages, archives de blog) sont générées au moment du build, tandis que le contenu dynamique (pages produit) est prerendu à la demande. Pour la route ",{"type":32,"tag":40,"props":278,"children":280},{"className":279},[],[281],{"type":37,"value":282},"\u002Fblog\u002F**",{"type":37,"value":284},", le paramètre ",{"type":32,"tag":40,"props":286,"children":288},{"className":287},[],[289],{"type":37,"value":290},"swr: 3600",{"type":37,"value":292}," garantit que la page est servie par le CDN avec une stratégie stale-while-revalidate pendant 1 heure — l'utilisateur voit la version en cache tandis qu'une revalidation se déclenche en arrière-plan.",{"type":32,"tag":294,"props":295,"children":297},"h3",{"id":296},"décision-entre-isr-et-swr",[298],{"type":37,"value":299},"Décision entre ISR et SWR",{"type":32,"tag":33,"props":301,"children":302},{},[303],{"type":37,"value":304},"ISR (Incremental Static Regeneration) et SWR (Stale-While-Revalidate) sont souvent confondus. ISR crée des pages à la demande après le build et les met en cache avant une revalidation après une durée définie. SWR est une directive de cache HTTP — elle affiche la version en cache et procède à une mise à jour en arrière-plan.",{"type":32,"tag":33,"props":306,"children":307},{},[308,314,316,322],{"type":32,"tag":309,"props":310,"children":311},"strong",{},[312],{"type":37,"value":313},"Préfère ISR :",{"type":37,"value":315}," Pour le contenu rarement mis à jour mais recevant beaucoup de trafic, comme les catalogues de produits ou le contenu CMS. ",{"type":32,"tag":40,"props":317,"children":319},{"className":318},[],[320],{"type":37,"value":321},"isr: 60",{"type":37,"value":323}," = revalidation toutes les 60 secondes.",{"type":32,"tag":33,"props":325,"children":326},{},[327,332,334,339],{"type":32,"tag":309,"props":328,"children":329},{},[330],{"type":37,"value":331},"Préfère SWR :",{"type":37,"value":333}," Pour le contenu dont l'actualité n'est pas critique, comme les articles de blog ou la documentation. ",{"type":32,"tag":40,"props":335,"children":337},{"className":336},[],[338],{"type":37,"value":290},{"type":37,"value":340}," = cache CDN 1 heure + revalidation en arrière-plan.",{"type":32,"tag":33,"props":342,"children":343},{},[344],{"type":37,"value":345},"Sur les projets Roibase, nous avons réduit le temps de build de 73 % avec ISR (12 min → 3,2 min). Pour un site e-commerce avec 15 000 pages produits, au lieu de prérendrer chaque page, nous en générons 500 au moment du build et créons les autres à la demande avec ISR.",{"type":32,"tag":49,"props":347,"children":349},{"id":348},"crawler-nitro-prerender",[350],{"type":37,"value":351},"Crawler Nitro Prerender",{"type":32,"tag":33,"props":353,"children":354},{},[355],{"type":37,"value":356},"Le moteur de prerender de Nuxt 3, Nitro, analyse automatiquement les liens internes et génère les pages associées au moment du build. Cependant, contrôler le comportement de ce crawler est critique pour la performance :",{"type":32,"tag":69,"props":358,"children":360},{"className":71,"code":359,"language":73,"meta":16,"style":16},"export default defineNuxtConfig({\n  nitro: {\n    prerender: {\n      crawlLinks: true,\n      ignore: ['\u002Fadmin', '\u002Fapi'],\n      routes: ['\u002Fsitemap.xml', '\u002Frss.xml']\n    }\n  }\n})\n",[361],{"type":32,"tag":40,"props":362,"children":363},{"__ignoreMap":16},[364,383,391,399,416,444,471,479,486],{"type":32,"tag":79,"props":365,"children":366},{"class":81,"line":82},[367,371,375,379],{"type":32,"tag":79,"props":368,"children":369},{"style":86},[370],{"type":37,"value":89},{"type":32,"tag":79,"props":372,"children":373},{"style":86},[374],{"type":37,"value":94},{"type":32,"tag":79,"props":376,"children":377},{"style":97},[378],{"type":37,"value":100},{"type":32,"tag":79,"props":380,"children":381},{"style":103},[382],{"type":37,"value":106},{"type":32,"tag":79,"props":384,"children":385},{"class":81,"line":109},[386],{"type":32,"tag":79,"props":387,"children":388},{"style":103},[389],{"type":37,"value":390},"  nitro: {\n",{"type":32,"tag":79,"props":392,"children":393},{"class":81,"line":118},[394],{"type":32,"tag":79,"props":395,"children":396},{"style":103},[397],{"type":37,"value":398},"    prerender: {\n",{"type":32,"tag":79,"props":400,"children":401},{"class":81,"line":144},[402,407,411],{"type":32,"tag":79,"props":403,"children":404},{"style":103},[405],{"type":37,"value":406},"      crawlLinks: ",{"type":32,"tag":79,"props":408,"children":409},{"style":133},[410],{"type":37,"value":136},{"type":32,"tag":79,"props":412,"children":413},{"style":103},[414],{"type":37,"value":415},",\n",{"type":32,"tag":79,"props":417,"children":418},{"class":81,"line":167},[419,424,429,434,439],{"type":32,"tag":79,"props":420,"children":421},{"style":103},[422],{"type":37,"value":423},"      ignore: [",{"type":32,"tag":79,"props":425,"children":426},{"style":122},[427],{"type":37,"value":428},"'\u002Fadmin'",{"type":32,"tag":79,"props":430,"children":431},{"style":103},[432],{"type":37,"value":433},", ",{"type":32,"tag":79,"props":435,"children":436},{"style":122},[437],{"type":37,"value":438},"'\u002Fapi'",{"type":32,"tag":79,"props":440,"children":441},{"style":103},[442],{"type":37,"value":443},"],\n",{"type":32,"tag":79,"props":445,"children":446},{"class":81,"line":210},[447,452,457,461,466],{"type":32,"tag":79,"props":448,"children":449},{"style":103},[450],{"type":37,"value":451},"      routes: [",{"type":32,"tag":79,"props":453,"children":454},{"style":122},[455],{"type":37,"value":456},"'\u002Fsitemap.xml'",{"type":32,"tag":79,"props":458,"children":459},{"style":103},[460],{"type":37,"value":433},{"type":32,"tag":79,"props":462,"children":463},{"style":122},[464],{"type":37,"value":465},"'\u002Frss.xml'",{"type":32,"tag":79,"props":467,"children":468},{"style":103},[469],{"type":37,"value":470},"]\n",{"type":32,"tag":79,"props":472,"children":473},{"class":81,"line":233},[474],{"type":32,"tag":79,"props":475,"children":476},{"style":103},[477],{"type":37,"value":478},"    }\n",{"type":32,"tag":79,"props":480,"children":481},{"class":81,"line":257},[482],{"type":32,"tag":79,"props":483,"children":484},{"style":103},[485],{"type":37,"value":263},{"type":32,"tag":79,"props":487,"children":488},{"class":81,"line":26},[489],{"type":32,"tag":79,"props":490,"children":491},{"style":103},[492],{"type":37,"value":271},{"type":32,"tag":33,"props":494,"children":495},{},[496,498,504,506,512],{"type":37,"value":497},"L'option ",{"type":32,"tag":40,"props":499,"children":501},{"className":500},[],[502],{"type":37,"value":503},"crawlLinks: true",{"type":37,"value":505}," présente un risque : chaque tag ",{"type":32,"tag":40,"props":507,"children":509},{"className":508},[],[510],{"type":37,"value":511},"\u003Ca>",{"type":37,"value":513}," dans la page est visité, ce qui peut entraîner le prerender de routes non intentionnelles. Par exemple, les liens des réseaux sociaux dans le footer, bien que externes, peuvent être visités par le crawler.",{"type":32,"tag":294,"props":515,"children":517},{"id":516},"whitelist-de-routes-prerender",[518],{"type":37,"value":519},"Whitelist de Routes Prerender",{"type":32,"tag":33,"props":521,"children":522},{},[523,525,531],{"type":37,"value":524},"Pour ne prerendrer que certaines routes en production, utilise le tableau ",{"type":32,"tag":40,"props":526,"children":528},{"className":527},[],[529],{"type":37,"value":530},"routes",{"type":37,"value":532}," :",{"type":32,"tag":69,"props":534,"children":536},{"className":71,"code":535,"language":73,"meta":16,"style":16},"nitro: {\n  prerender: {\n    crawlLinks: false,\n    routes: async () => {\n      const { data: posts } = await $fetch('\u002Fapi\u002Fposts')\n      return posts.map(p => `\u002Fblog\u002F${p.slug}`)\n    }\n  }\n}\n",[537],{"type":32,"tag":40,"props":538,"children":539},{"__ignoreMap":16},[540,553,565,585,617,680,739,746,753],{"type":32,"tag":79,"props":541,"children":542},{"class":81,"line":82},[543,548],{"type":32,"tag":79,"props":544,"children":545},{"style":97},[546],{"type":37,"value":547},"nitro",{"type":32,"tag":79,"props":549,"children":550},{"style":103},[551],{"type":37,"value":552},": {\n",{"type":32,"tag":79,"props":554,"children":555},{"class":81,"line":109},[556,561],{"type":32,"tag":79,"props":557,"children":558},{"style":97},[559],{"type":37,"value":560},"  prerender",{"type":32,"tag":79,"props":562,"children":563},{"style":103},[564],{"type":37,"value":552},{"type":32,"tag":79,"props":566,"children":567},{"class":81,"line":118},[568,573,577,581],{"type":32,"tag":79,"props":569,"children":570},{"style":97},[571],{"type":37,"value":572},"    crawlLinks",{"type":32,"tag":79,"props":574,"children":575},{"style":103},[576],{"type":37,"value":197},{"type":32,"tag":79,"props":578,"children":579},{"style":133},[580],{"type":37,"value":226},{"type":32,"tag":79,"props":582,"children":583},{"style":103},[584],{"type":37,"value":415},{"type":32,"tag":79,"props":586,"children":587},{"class":81,"line":144},[588,593,597,602,607,612],{"type":32,"tag":79,"props":589,"children":590},{"style":97},[591],{"type":37,"value":592},"    routes",{"type":32,"tag":79,"props":594,"children":595},{"style":103},[596],{"type":37,"value":197},{"type":32,"tag":79,"props":598,"children":599},{"style":86},[600],{"type":37,"value":601},"async",{"type":32,"tag":79,"props":603,"children":604},{"style":103},[605],{"type":37,"value":606}," () ",{"type":32,"tag":79,"props":608,"children":609},{"style":86},[610],{"type":37,"value":611},"=>",{"type":32,"tag":79,"props":613,"children":614},{"style":103},[615],{"type":37,"value":616}," {\n",{"type":32,"tag":79,"props":618,"children":619},{"class":81,"line":167},[620,625,630,636,640,645,650,655,660,665,670,675],{"type":32,"tag":79,"props":621,"children":622},{"style":86},[623],{"type":37,"value":624},"      const",{"type":32,"tag":79,"props":626,"children":627},{"style":103},[628],{"type":37,"value":629}," { ",{"type":32,"tag":79,"props":631,"children":633},{"style":632},"--shiki-default:#FFAB70",[634],{"type":37,"value":635},"data",{"type":32,"tag":79,"props":637,"children":638},{"style":103},[639],{"type":37,"value":197},{"type":32,"tag":79,"props":641,"children":642},{"style":133},[643],{"type":37,"value":644},"posts",{"type":32,"tag":79,"props":646,"children":647},{"style":103},[648],{"type":37,"value":649}," } ",{"type":32,"tag":79,"props":651,"children":652},{"style":86},[653],{"type":37,"value":654},"=",{"type":32,"tag":79,"props":656,"children":657},{"style":86},[658],{"type":37,"value":659}," await",{"type":32,"tag":79,"props":661,"children":662},{"style":97},[663],{"type":37,"value":664}," $fetch",{"type":32,"tag":79,"props":666,"children":667},{"style":103},[668],{"type":37,"value":669},"(",{"type":32,"tag":79,"props":671,"children":672},{"style":122},[673],{"type":37,"value":674},"'\u002Fapi\u002Fposts'",{"type":32,"tag":79,"props":676,"children":677},{"style":103},[678],{"type":37,"value":679},")\n",{"type":32,"tag":79,"props":681,"children":682},{"class":81,"line":210},[683,688,693,698,702,706,711,716,720,725,730,735],{"type":32,"tag":79,"props":684,"children":685},{"style":86},[686],{"type":37,"value":687},"      return",{"type":32,"tag":79,"props":689,"children":690},{"style":103},[691],{"type":37,"value":692}," posts.",{"type":32,"tag":79,"props":694,"children":695},{"style":97},[696],{"type":37,"value":697},"map",{"type":32,"tag":79,"props":699,"children":700},{"style":103},[701],{"type":37,"value":669},{"type":32,"tag":79,"props":703,"children":704},{"style":632},[705],{"type":37,"value":33},{"type":32,"tag":79,"props":707,"children":708},{"style":86},[709],{"type":37,"value":710}," =>",{"type":32,"tag":79,"props":712,"children":713},{"style":122},[714],{"type":37,"value":715}," `\u002Fblog\u002F${",{"type":32,"tag":79,"props":717,"children":718},{"style":103},[719],{"type":37,"value":33},{"type":32,"tag":79,"props":721,"children":722},{"style":122},[723],{"type":37,"value":724},".",{"type":32,"tag":79,"props":726,"children":727},{"style":103},[728],{"type":37,"value":729},"slug",{"type":32,"tag":79,"props":731,"children":732},{"style":122},[733],{"type":37,"value":734},"}`",{"type":32,"tag":79,"props":736,"children":737},{"style":103},[738],{"type":37,"value":679},{"type":32,"tag":79,"props":740,"children":741},{"class":81,"line":233},[742],{"type":32,"tag":79,"props":743,"children":744},{"style":103},[745],{"type":37,"value":478},{"type":32,"tag":79,"props":747,"children":748},{"class":81,"line":257},[749],{"type":32,"tag":79,"props":750,"children":751},{"style":103},[752],{"type":37,"value":263},{"type":32,"tag":79,"props":754,"children":755},{"class":81,"line":26},[756],{"type":32,"tag":79,"props":757,"children":758},{"style":103},[759],{"type":37,"value":760},"}\n",{"type":32,"tag":33,"props":762,"children":763},{},[764,766,772],{"type":37,"value":765},"Ce pattern offre un contrôle du prerender basé sur des appels API. Tu récupères la liste des routes depuis un CMS et ne génères que celles-ci. Sur un projet de ",{"type":32,"tag":767,"props":768,"children":769},"em",{},[770],{"type":37,"value":771},"commerce headless",{"type":37,"value":773}," avec 8 000 pages, cette approche a réduit le temps de build de 18 min à 4,5 min.",{"type":32,"tag":49,"props":775,"children":777},{"id":776},"séparation-de-bundle-et-élimination-de-code",[778],{"type":37,"value":779},"Séparation de Bundle et Élimination de Code",{"type":32,"tag":33,"props":781,"children":782},{},[783],{"type":37,"value":784},"Même en utilisant SSG, le bundle JavaScript contient tous les composants. Tu peux l'optimiser avec la séparation du code au niveau des routes :",{"type":32,"tag":69,"props":786,"children":788},{"className":71,"code":787,"language":73,"meta":16,"style":16},"export default defineNuxtConfig({\n  experimental: {\n    payloadExtraction: true\n  },\n  router: {\n    options: {\n      hashMode: false,\n      scrollBehaviorType: 'smooth'\n    }\n  }\n})\n",[789],{"type":32,"tag":40,"props":790,"children":791},{"__ignoreMap":16},[792,811,819,832,840,848,856,872,885,892,900],{"type":32,"tag":79,"props":793,"children":794},{"class":81,"line":82},[795,799,803,807],{"type":32,"tag":79,"props":796,"children":797},{"style":86},[798],{"type":37,"value":89},{"type":32,"tag":79,"props":800,"children":801},{"style":86},[802],{"type":37,"value":94},{"type":32,"tag":79,"props":804,"children":805},{"style":97},[806],{"type":37,"value":100},{"type":32,"tag":79,"props":808,"children":809},{"style":103},[810],{"type":37,"value":106},{"type":32,"tag":79,"props":812,"children":813},{"class":81,"line":109},[814],{"type":32,"tag":79,"props":815,"children":816},{"style":103},[817],{"type":37,"value":818},"  experimental: {\n",{"type":32,"tag":79,"props":820,"children":821},{"class":81,"line":118},[822,827],{"type":32,"tag":79,"props":823,"children":824},{"style":103},[825],{"type":37,"value":826},"    payloadExtraction: ",{"type":32,"tag":79,"props":828,"children":829},{"style":133},[830],{"type":37,"value":831},"true\n",{"type":32,"tag":79,"props":833,"children":834},{"class":81,"line":144},[835],{"type":32,"tag":79,"props":836,"children":837},{"style":103},[838],{"type":37,"value":839},"  },\n",{"type":32,"tag":79,"props":841,"children":842},{"class":81,"line":167},[843],{"type":32,"tag":79,"props":844,"children":845},{"style":103},[846],{"type":37,"value":847},"  router: {\n",{"type":32,"tag":79,"props":849,"children":850},{"class":81,"line":210},[851],{"type":32,"tag":79,"props":852,"children":853},{"style":103},[854],{"type":37,"value":855},"    options: {\n",{"type":32,"tag":79,"props":857,"children":858},{"class":81,"line":233},[859,864,868],{"type":32,"tag":79,"props":860,"children":861},{"style":103},[862],{"type":37,"value":863},"      hashMode: ",{"type":32,"tag":79,"props":865,"children":866},{"style":133},[867],{"type":37,"value":226},{"type":32,"tag":79,"props":869,"children":870},{"style":103},[871],{"type":37,"value":415},{"type":32,"tag":79,"props":873,"children":874},{"class":81,"line":257},[875,880],{"type":32,"tag":79,"props":876,"children":877},{"style":103},[878],{"type":37,"value":879},"      scrollBehaviorType: ",{"type":32,"tag":79,"props":881,"children":882},{"style":122},[883],{"type":37,"value":884},"'smooth'\n",{"type":32,"tag":79,"props":886,"children":887},{"class":81,"line":26},[888],{"type":32,"tag":79,"props":889,"children":890},{"style":103},[891],{"type":37,"value":478},{"type":32,"tag":79,"props":893,"children":895},{"class":81,"line":894},10,[896],{"type":32,"tag":79,"props":897,"children":898},{"style":103},[899],{"type":37,"value":263},{"type":32,"tag":79,"props":901,"children":903},{"class":81,"line":902},11,[904],{"type":32,"tag":79,"props":905,"children":906},{"style":103},[907],{"type":37,"value":271},{"type":32,"tag":33,"props":909,"children":910},{},[911,912,918],{"type":37,"value":497},{"type":32,"tag":40,"props":913,"children":915},{"className":914},[],[916],{"type":37,"value":917},"payloadExtraction: true",{"type":37,"value":919}," exporte le payload de données des pages prerendues dans des fichiers JSON séparés. Lors des transitions de page, seuls les diffs sont chargés, réduisant le bundle initial de 40 %.",{"type":32,"tag":294,"props":921,"children":923},{"id":922},"tree-shaking-et-nettoyage-de-code-inutilisé",[924],{"type":37,"value":925},"Tree Shaking et Nettoyage de Code Inutilisé",{"type":32,"tag":33,"props":927,"children":928},{},[929,931,937],{"type":37,"value":930},"Nuxt 3 utilise l'auto-import, ce qui peut inclure des composants inutilisés dans le bundle. Désactive la recherche automatique avec ",{"type":32,"tag":40,"props":932,"children":934},{"className":933},[],[935],{"type":37,"value":936},"components: { dirs: [] }",{"type":37,"value":938}," et importe manuellement uniquement les composants que tu utilises :",{"type":32,"tag":69,"props":940,"children":942},{"className":71,"code":941,"language":73,"meta":16,"style":16},"export default defineNuxtConfig({\n  components: false,\n  imports: {\n    dirs: ['composables']\n  }\n})\n",[943],{"type":32,"tag":40,"props":944,"children":945},{"__ignoreMap":16},[946,965,981,989,1006,1013],{"type":32,"tag":79,"props":947,"children":948},{"class":81,"line":82},[949,953,957,961],{"type":32,"tag":79,"props":950,"children":951},{"style":86},[952],{"type":37,"value":89},{"type":32,"tag":79,"props":954,"children":955},{"style":86},[956],{"type":37,"value":94},{"type":32,"tag":79,"props":958,"children":959},{"style":97},[960],{"type":37,"value":100},{"type":32,"tag":79,"props":962,"children":963},{"style":103},[964],{"type":37,"value":106},{"type":32,"tag":79,"props":966,"children":967},{"class":81,"line":109},[968,973,977],{"type":32,"tag":79,"props":969,"children":970},{"style":103},[971],{"type":37,"value":972},"  components: ",{"type":32,"tag":79,"props":974,"children":975},{"style":133},[976],{"type":37,"value":226},{"type":32,"tag":79,"props":978,"children":979},{"style":103},[980],{"type":37,"value":415},{"type":32,"tag":79,"props":982,"children":983},{"class":81,"line":118},[984],{"type":32,"tag":79,"props":985,"children":986},{"style":103},[987],{"type":37,"value":988},"  imports: {\n",{"type":32,"tag":79,"props":990,"children":991},{"class":81,"line":144},[992,997,1002],{"type":32,"tag":79,"props":993,"children":994},{"style":103},[995],{"type":37,"value":996},"    dirs: [",{"type":32,"tag":79,"props":998,"children":999},{"style":122},[1000],{"type":37,"value":1001},"'composables'",{"type":32,"tag":79,"props":1003,"children":1004},{"style":103},[1005],{"type":37,"value":470},{"type":32,"tag":79,"props":1007,"children":1008},{"class":81,"line":167},[1009],{"type":32,"tag":79,"props":1010,"children":1011},{"style":103},[1012],{"type":37,"value":263},{"type":32,"tag":79,"props":1014,"children":1015},{"class":81,"line":210},[1016],{"type":32,"tag":79,"props":1017,"children":1018},{"style":103},[1019],{"type":37,"value":271},{"type":32,"tag":33,"props":1021,"children":1022},{},[1023,1025,1031],{"type":37,"value":1024},"Cette approche radicale a réduit le bundle de 28 % (340 KB → 245 KB gzip). Le compromis : l'expérience développeur souffre, tu dois importer chaque composant manuellement. Approche hybride : auto-importe les composants du répertoire ",{"type":32,"tag":40,"props":1026,"children":1028},{"className":1027},[],[1029],{"type":37,"value":1030},"\u002Fcomponents\u002Fglobal",{"type":37,"value":1032},", gère les autres manuellement.",{"type":32,"tag":49,"props":1034,"children":1036},{"id":1035},"stratégies-dhydratation",[1037],{"type":37,"value":1038},"Stratégies d'Hydratation",{"type":32,"tag":33,"props":1040,"children":1041},{},[1042,1044,1050],{"type":37,"value":1043},"Le plus grand coût du SSG est l'hydratation — créer l'instance Vue côté client ajoute 200-400 ms de TBT (Total Blocking Time). L'option ",{"type":32,"tag":40,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":37,"value":1049},"ssr: false",{"type":37,"value":1051}," de Nuxt 3 le désactive complètement mais entraîne une perte SEO.",{"type":32,"tag":69,"props":1053,"children":1057},{"className":1054,"code":1055,"language":1056,"meta":16,"style":16},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CClientOnly>\n      \u003CHeavyInteractiveWidget \u002F>\n    \u003C\u002FClientOnly>\n    \u003CStaticContent \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[1058],{"type":32,"tag":40,"props":1059,"children":1060},{"__ignoreMap":16},[1061,1080,1097,1114,1132,1148,1164,1180],{"type":32,"tag":79,"props":1062,"children":1063},{"class":81,"line":82},[1064,1069,1075],{"type":32,"tag":79,"props":1065,"children":1066},{"style":103},[1067],{"type":37,"value":1068},"\u003C",{"type":32,"tag":79,"props":1070,"children":1072},{"style":1071},"--shiki-default:#85E89D",[1073],{"type":37,"value":1074},"template",{"type":32,"tag":79,"props":1076,"children":1077},{"style":103},[1078],{"type":37,"value":1079},">\n",{"type":32,"tag":79,"props":1081,"children":1082},{"class":81,"line":109},[1083,1088,1093],{"type":32,"tag":79,"props":1084,"children":1085},{"style":103},[1086],{"type":37,"value":1087},"  \u003C",{"type":32,"tag":79,"props":1089,"children":1090},{"style":1071},[1091],{"type":37,"value":1092},"div",{"type":32,"tag":79,"props":1094,"children":1095},{"style":103},[1096],{"type":37,"value":1079},{"type":32,"tag":79,"props":1098,"children":1099},{"class":81,"line":118},[1100,1105,1110],{"type":32,"tag":79,"props":1101,"children":1102},{"style":103},[1103],{"type":37,"value":1104},"    \u003C",{"type":32,"tag":79,"props":1106,"children":1107},{"style":1071},[1108],{"type":37,"value":1109},"ClientOnly",{"type":32,"tag":79,"props":1111,"children":1112},{"style":103},[1113],{"type":37,"value":1079},{"type":32,"tag":79,"props":1115,"children":1116},{"class":81,"line":144},[1117,1122,1127],{"type":32,"tag":79,"props":1118,"children":1119},{"style":103},[1120],{"type":37,"value":1121},"      \u003C",{"type":32,"tag":79,"props":1123,"children":1124},{"style":1071},[1125],{"type":37,"value":1126},"HeavyInteractiveWidget",{"type":32,"tag":79,"props":1128,"children":1129},{"style":103},[1130],{"type":37,"value":1131}," \u002F>\n",{"type":32,"tag":79,"props":1133,"children":1134},{"class":81,"line":167},[1135,1140,1144],{"type":32,"tag":79,"props":1136,"children":1137},{"style":103},[1138],{"type":37,"value":1139},"    \u003C\u002F",{"type":32,"tag":79,"props":1141,"children":1142},{"style":1071},[1143],{"type":37,"value":1109},{"type":32,"tag":79,"props":1145,"children":1146},{"style":103},[1147],{"type":37,"value":1079},{"type":32,"tag":79,"props":1149,"children":1150},{"class":81,"line":210},[1151,1155,1160],{"type":32,"tag":79,"props":1152,"children":1153},{"style":103},[1154],{"type":37,"value":1104},{"type":32,"tag":79,"props":1156,"children":1157},{"style":1071},[1158],{"type":37,"value":1159},"StaticContent",{"type":32,"tag":79,"props":1161,"children":1162},{"style":103},[1163],{"type":37,"value":1131},{"type":32,"tag":79,"props":1165,"children":1166},{"class":81,"line":233},[1167,1172,1176],{"type":32,"tag":79,"props":1168,"children":1169},{"style":103},[1170],{"type":37,"value":1171},"  \u003C\u002F",{"type":32,"tag":79,"props":1173,"children":1174},{"style":1071},[1175],{"type":37,"value":1092},{"type":32,"tag":79,"props":1177,"children":1178},{"style":103},[1179],{"type":37,"value":1079},{"type":32,"tag":79,"props":1181,"children":1182},{"class":81,"line":257},[1183,1188,1192],{"type":32,"tag":79,"props":1184,"children":1185},{"style":103},[1186],{"type":37,"value":1187},"\u003C\u002F",{"type":32,"tag":79,"props":1189,"children":1190},{"style":1071},[1191],{"type":37,"value":1074},{"type":32,"tag":79,"props":1193,"children":1194},{"style":103},[1195],{"type":37,"value":1079},{"type":32,"tag":33,"props":1197,"children":1198},{},[1199,1201,1207],{"type":37,"value":1200},"Le composant ",{"type":32,"tag":40,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":37,"value":1206},"\u003CClientOnly>",{"type":37,"value":1208}," rend uniquement côté client la section qu'il enveloppe. Dans l'HTML généré par SSG, cette section reste un placeholder, et Vue l'ignore pendant l'hydratation. Avec ce pattern, nous avons réduit le TBT d'un dashboard d'analytics intégré à une landing page de 420 ms à 180 ms.",{"type":32,"tag":294,"props":1210,"children":1212},{"id":1211},"hydratation-sélective",[1213],{"type":37,"value":1214},"Hydratation Sélective",{"type":32,"tag":33,"props":1216,"children":1217},{},[1218,1220,1226],{"type":37,"value":1219},"Avec Nuxt 3.8+, le composant ",{"type":32,"tag":40,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":37,"value":1225},"nuxt-island",{"type":37,"value":1227}," offre l'hydratation partielle :",{"type":32,"tag":69,"props":1229,"children":1231},{"className":1054,"code":1230,"language":1056,"meta":16,"style":16},"\u003Ctemplate>\n  \u003CNuxtIsland name=\"ProductCard\" :props=\"{ id: 123 }\" \u002F>\n\u003C\u002Ftemplate>\n",[1232],{"type":32,"tag":40,"props":1233,"children":1234},{"__ignoreMap":16},[1235,1250,1317],{"type":32,"tag":79,"props":1236,"children":1237},{"class":81,"line":82},[1238,1242,1246],{"type":32,"tag":79,"props":1239,"children":1240},{"style":103},[1241],{"type":37,"value":1068},{"type":32,"tag":79,"props":1243,"children":1244},{"style":1071},[1245],{"type":37,"value":1074},{"type":32,"tag":79,"props":1247,"children":1248},{"style":103},[1249],{"type":37,"value":1079},{"type":32,"tag":79,"props":1251,"children":1252},{"class":81,"line":109},[1253,1257,1262,1267,1271,1276,1280,1285,1289,1294,1299,1304,1309,1313],{"type":32,"tag":79,"props":1254,"children":1255},{"style":103},[1256],{"type":37,"value":1087},{"type":32,"tag":79,"props":1258,"children":1259},{"style":1071},[1260],{"type":37,"value":1261},"NuxtIsland",{"type":32,"tag":79,"props":1263,"children":1264},{"style":97},[1265],{"type":37,"value":1266}," name",{"type":32,"tag":79,"props":1268,"children":1269},{"style":103},[1270],{"type":37,"value":654},{"type":32,"tag":79,"props":1272,"children":1273},{"style":122},[1274],{"type":37,"value":1275},"\"ProductCard\"",{"type":32,"tag":79,"props":1277,"children":1278},{"style":103},[1279],{"type":37,"value":532},{"type":32,"tag":79,"props":1281,"children":1282},{"style":97},[1283],{"type":37,"value":1284},"props",{"type":32,"tag":79,"props":1286,"children":1287},{"style":103},[1288],{"type":37,"value":654},{"type":32,"tag":79,"props":1290,"children":1291},{"style":122},[1292],{"type":37,"value":1293},"\"",{"type":32,"tag":79,"props":1295,"children":1296},{"style":103},[1297],{"type":37,"value":1298},"{ id: ",{"type":32,"tag":79,"props":1300,"children":1301},{"style":133},[1302],{"type":37,"value":1303},"123",{"type":32,"tag":79,"props":1305,"children":1306},{"style":103},[1307],{"type":37,"value":1308}," }",{"type":32,"tag":79,"props":1310,"children":1311},{"style":122},[1312],{"type":37,"value":1293},{"type":32,"tag":79,"props":1314,"children":1315},{"style":103},[1316],{"type":37,"value":1131},{"type":32,"tag":79,"props":1318,"children":1319},{"class":81,"line":118},[1320,1324,1328],{"type":32,"tag":79,"props":1321,"children":1322},{"style":103},[1323],{"type":37,"value":1187},{"type":32,"tag":79,"props":1325,"children":1326},{"style":1071},[1327],{"type":37,"value":1074},{"type":32,"tag":79,"props":1329,"children":1330},{"style":103},[1331],{"type":37,"value":1079},{"type":32,"tag":33,"props":1333,"children":1334},{},[1335,1340],{"type":32,"tag":40,"props":1336,"children":1338},{"className":1337},[],[1339],{"type":37,"value":1261},{"type":37,"value":1341}," est rendu sur le serveur et envoyé au client sous forme HTML ; l'hydratation se déclenche uniquement pour ce composant. Le reste de la page reste statique. Sur un site e-commerce, en plaçant les cartes produit en islands, nous avons réduit le coût d'hydratation de 64 % (TBT 380 ms → 135 ms).",{"type":32,"tag":49,"props":1343,"children":1345},{"id":1344},"optimisation-de-la-performance-de-build",[1346],{"type":37,"value":1347},"Optimisation de la Performance de Build",{"type":32,"tag":33,"props":1349,"children":1350},{},[1351],{"type":37,"value":1352},"Quand un build SSG dépasse 20 minutes pour 15 000+ pages, le pipeline CI\u002FCD stagne. Il y a 3 façons d'améliorer la performance de build :",{"type":32,"tag":33,"props":1354,"children":1355},{},[1356],{"type":32,"tag":309,"props":1357,"children":1358},{},[1359],{"type":37,"value":1360},"1. Prerender Parallèle :",{"type":32,"tag":69,"props":1362,"children":1364},{"className":71,"code":1363,"language":73,"meta":16,"style":16},"nitro: {\n  prerender: {\n    concurrency: 20,\n    interval: 0\n  }\n}\n",[1365],{"type":32,"tag":40,"props":1366,"children":1367},{"__ignoreMap":16},[1368,1379,1390,1411,1428,1435],{"type":32,"tag":79,"props":1369,"children":1370},{"class":81,"line":82},[1371,1375],{"type":32,"tag":79,"props":1372,"children":1373},{"style":97},[1374],{"type":37,"value":547},{"type":32,"tag":79,"props":1376,"children":1377},{"style":103},[1378],{"type":37,"value":552},{"type":32,"tag":79,"props":1380,"children":1381},{"class":81,"line":109},[1382,1386],{"type":32,"tag":79,"props":1383,"children":1384},{"style":97},[1385],{"type":37,"value":560},{"type":32,"tag":79,"props":1387,"children":1388},{"style":103},[1389],{"type":37,"value":552},{"type":32,"tag":79,"props":1391,"children":1392},{"class":81,"line":118},[1393,1398,1402,1407],{"type":32,"tag":79,"props":1394,"children":1395},{"style":97},[1396],{"type":37,"value":1397},"    concurrency",{"type":32,"tag":79,"props":1399,"children":1400},{"style":103},[1401],{"type":37,"value":197},{"type":32,"tag":79,"props":1403,"children":1404},{"style":133},[1405],{"type":37,"value":1406},"20",{"type":32,"tag":79,"props":1408,"children":1409},{"style":103},[1410],{"type":37,"value":415},{"type":32,"tag":79,"props":1412,"children":1413},{"class":81,"line":144},[1414,1419,1423],{"type":32,"tag":79,"props":1415,"children":1416},{"style":97},[1417],{"type":37,"value":1418},"    interval",{"type":32,"tag":79,"props":1420,"children":1421},{"style":103},[1422],{"type":37,"value":197},{"type":32,"tag":79,"props":1424,"children":1425},{"style":133},[1426],{"type":37,"value":1427},"0\n",{"type":32,"tag":79,"props":1429,"children":1430},{"class":81,"line":167},[1431],{"type":32,"tag":79,"props":1432,"children":1433},{"style":103},[1434],{"type":37,"value":263},{"type":32,"tag":79,"props":1436,"children":1437},{"class":81,"line":210},[1438],{"type":32,"tag":79,"props":1439,"children":1440},{"style":103},[1441],{"type":37,"value":760},{"type":32,"tag":33,"props":1443,"children":1444},{},[1445,1451],{"type":32,"tag":40,"props":1446,"children":1448},{"className":1447},[],[1449],{"type":37,"value":1450},"concurrency: 20",{"type":37,"value":1452}," rend 20 routes simultanément. Attention au risque de fuite mémoire — testé sans problème sur 32 GB RAM, mais peut entraîner des erreurs OOM sur 8 GB.",{"type":32,"tag":33,"props":1454,"children":1455},{},[1456],{"type":32,"tag":309,"props":1457,"children":1458},{},[1459],{"type":37,"value":1460},"2. Build Incrémental (Expérimental) :",{"type":32,"tag":69,"props":1462,"children":1464},{"className":71,"code":1463,"language":73,"meta":16,"style":16},"experimental: {\n  buildCache: true\n}\n",[1465],{"type":32,"tag":40,"props":1466,"children":1467},{"__ignoreMap":16},[1468,1480,1496],{"type":32,"tag":79,"props":1469,"children":1470},{"class":81,"line":82},[1471,1476],{"type":32,"tag":79,"props":1472,"children":1473},{"style":97},[1474],{"type":37,"value":1475},"experimental",{"type":32,"tag":79,"props":1477,"children":1478},{"style":103},[1479],{"type":37,"value":552},{"type":32,"tag":79,"props":1481,"children":1482},{"class":81,"line":109},[1483,1488,1492],{"type":32,"tag":79,"props":1484,"children":1485},{"style":97},[1486],{"type":37,"value":1487},"  buildCache",{"type":32,"tag":79,"props":1489,"children":1490},{"style":103},[1491],{"type":37,"value":197},{"type":32,"tag":79,"props":1493,"children":1494},{"style":133},[1495],{"type":37,"value":831},{"type":32,"tag":79,"props":1497,"children":1498},{"class":81,"line":118},[1499],{"type":32,"tag":79,"props":1500,"children":1501},{"style":103},[1502],{"type":37,"value":760},{"type":32,"tag":33,"props":1504,"children":1505},{},[1506],{"type":37,"value":1507},"Les routes inchangées sont lues du cache. Cependant, jusqu'à Nuxt 3.12, ce mode est bêta — l'invalidation du cache peut dysfonctionner.",{"type":32,"tag":33,"props":1509,"children":1510},{},[1511,1516],{"type":32,"tag":309,"props":1512,"children":1513},{},[1514],{"type":37,"value":1515},"3. Chunking de Routes :",{"type":37,"value":1517},"\nDivise les routes en lots et construis-les en parallèle :",{"type":32,"tag":69,"props":1519,"children":1523},{"className":1520,"code":1521,"language":1522,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Pipeline CI\u002FCD\nnuxt build --prerender-routes=\"\u002F,\u002Fabout\"\nnuxt build --prerender-routes=\"\u002Fblog\u002F**\" --append\nnuxt build --prerender-routes=\"\u002Fproduct\u002F**\" --append\n","bash",[1524],{"type":32,"tag":40,"props":1525,"children":1526},{"__ignoreMap":16},[1527,1536,1559,1584],{"type":32,"tag":79,"props":1528,"children":1529},{"class":81,"line":82},[1530],{"type":32,"tag":79,"props":1531,"children":1533},{"style":1532},"--shiki-default:#6A737D",[1534],{"type":37,"value":1535},"# Pipeline CI\u002FCD\n",{"type":32,"tag":79,"props":1537,"children":1538},{"class":81,"line":109},[1539,1544,1549,1554],{"type":32,"tag":79,"props":1540,"children":1541},{"style":97},[1542],{"type":37,"value":1543},"nuxt",{"type":32,"tag":79,"props":1545,"children":1546},{"style":122},[1547],{"type":37,"value":1548}," build",{"type":32,"tag":79,"props":1550,"children":1551},{"style":133},[1552],{"type":37,"value":1553}," --prerender-routes=",{"type":32,"tag":79,"props":1555,"children":1556},{"style":122},[1557],{"type":37,"value":1558},"\"\u002F,\u002Fabout\"\n",{"type":32,"tag":79,"props":1560,"children":1561},{"class":81,"line":118},[1562,1566,1570,1574,1579],{"type":32,"tag":79,"props":1563,"children":1564},{"style":97},[1565],{"type":37,"value":1543},{"type":32,"tag":79,"props":1567,"children":1568},{"style":122},[1569],{"type":37,"value":1548},{"type":32,"tag":79,"props":1571,"children":1572},{"style":133},[1573],{"type":37,"value":1553},{"type":32,"tag":79,"props":1575,"children":1576},{"style":122},[1577],{"type":37,"value":1578},"\"\u002Fblog\u002F**\"",{"type":32,"tag":79,"props":1580,"children":1581},{"style":133},[1582],{"type":37,"value":1583}," --append\n",{"type":32,"tag":79,"props":1585,"children":1586},{"class":81,"line":144},[1587,1591,1595,1599,1604],{"type":32,"tag":79,"props":1588,"children":1589},{"style":97},[1590],{"type":37,"value":1543},{"type":32,"tag":79,"props":1592,"children":1593},{"style":122},[1594],{"type":37,"value":1548},{"type":32,"tag":79,"props":1596,"children":1597},{"style":133},[1598],{"type":37,"value":1553},{"type":32,"tag":79,"props":1600,"children":1601},{"style":122},[1602],{"type":37,"value":1603},"\"\u002Fproduct\u002F**\"",{"type":32,"tag":79,"props":1605,"children":1606},{"style":133},[1607],{"type":37,"value":1583},{"type":32,"tag":33,"props":1609,"children":1610},{},[1611],{"type":37,"value":1612},"Avec cette approche, un build de 18 min réparti sur 3 jobs parallèles dure 6,5 min au total.",{"type":32,"tag":49,"props":1614,"children":1616},{"id":1615},"considérations-de-déploiement-edge",[1617],{"type":37,"value":1618},"Considérations de Déploiement Edge",{"type":32,"tag":33,"props":1620,"children":1621},{},[1622],{"type":37,"value":1623},"Lors du déploiement du SSG sur Cloudflare Pages, Vercel Edge ou Netlify, note les points suivants :",{"type":32,"tag":33,"props":1625,"children":1626},{},[1627,1632,1634,1640,1642,1648],{"type":32,"tag":309,"props":1628,"children":1629},{},[1630],{"type":37,"value":1631},"Cloudflare Pages :",{"type":37,"value":1633}," L'option ",{"type":32,"tag":40,"props":1635,"children":1637},{"className":1636},[],[1638],{"type":37,"value":1639},"nitro.preset: 'cloudflare-pages'",{"type":37,"value":1641}," est obligatoire. Pas de support ISR, seul SWR fonctionne. Configure manuellement cache-control via le fichier ",{"type":32,"tag":40,"props":1643,"children":1645},{"className":1644},[],[1646],{"type":37,"value":1647},"_headers",{"type":37,"value":724},{"type":32,"tag":33,"props":1650,"children":1651},{},[1652,1657,1659,1665],{"type":32,"tag":309,"props":1653,"children":1654},{},[1655],{"type":37,"value":1656},"Vercel :",{"type":37,"value":1658}," Support ISR natif mais ",{"type":32,"tag":40,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":37,"value":1664},"vercel.json",{"type":37,"value":1666}," peut surcharger les route-rules — risque de conflit de config. Utilise la config Nuxt comme source unique de vérité.",{"type":32,"tag":33,"props":1668,"children":1669},{},[1670,1675,1677,1683,1685,1690,1692,1698],{"type":32,"tag":309,"props":1671,"children":1672},{},[1673],{"type":37,"value":1674},"Netlify :",{"type":37,"value":1676}," Les fichiers ",{"type":32,"tag":40,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":37,"value":1682},"_redirects",{"type":37,"value":1684}," et ",{"type":32,"tag":40,"props":1686,"children":1688},{"className":1687},[],[1689],{"type":37,"value":1647},{"type":37,"value":1691}," sont générés automatiquement mais SWR nécessite une configuration manuelle dans ",{"type":32,"tag":40,"props":1693,"children":1695},{"className":1694},[],[1696],{"type":37,"value":1697},"netlify.toml",{"type":37,"value":724},{"type":32,"tag":33,"props":1700,"children":1701},{},[1702,1704,1713],{"type":37,"value":1703},"Sur les projets ",{"type":32,"tag":1705,"props":1706,"children":1710},"a",{"href":1707,"rel":1708},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[1709],"nofollow",[1711],{"type":37,"value":1712},"Headless",{"type":37,"value":1714}," de Roibase, nous construisons les storefronts avec Nuxt 3 SSG et les déployons sur Cloudflare Pages. La combinaison edge caching + ISR ramène le TTFB (Time to First Byte) en dessous de 40 ms et le LCP (Largest Contentful Paint) autour de 1,2 s.",{"type":32,"tag":1716,"props":1717,"children":1718},"hr",{},[],{"type":32,"tag":33,"props":1720,"children":1721},{},[1722],{"type":37,"value":1723},"Maîtriser le SSG de Nuxt 3, c'est choisir le bon mode de rendu pour chaque route. En combinant prerender à la construction, ISR à la demande et SWR, tu optimises les Core Web Vitals tout en réduisant les coûts de build. Revois les stratégies d'hydratation — réduire la charge JavaScript côté client représente 60 % des gains de performance.",{"type":32,"tag":1725,"props":1726,"children":1727},"style",{},[1728],{"type":37,"value":1729},"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":118,"depth":118,"links":1731},[1732,1735,1738,1741,1744,1745],{"id":51,"depth":109,"text":54,"children":1733},[1734],{"id":296,"depth":118,"text":299},{"id":348,"depth":109,"text":351,"children":1736},[1737],{"id":516,"depth":118,"text":519},{"id":776,"depth":109,"text":779,"children":1739},[1740],{"id":922,"depth":118,"text":925},{"id":1035,"depth":109,"text":1038,"children":1742},[1743],{"id":1211,"depth":118,"text":1214},{"id":1344,"depth":109,"text":1347},{"id":1615,"depth":109,"text":1618},"markdown","content:fr:tech:guide-ssg-nuxt-3-strategies-build-optimization.md","content","fr\u002Ftech\u002Fguide-ssg-nuxt-3-strategies-build-optimization.md","fr\u002Ftech\u002Fguide-ssg-nuxt-3-strategies-build-optimization","md",1785218707310]