[{"data":1,"prerenderedAt":505},["ShallowReactive",2],{"page-\u002Fnuxt\u002Fmodes-de-rendu":3,"pieces-nuxt":459,"autour-\u002Fnuxt\u002Fmodes-de-rendu":488,"prerequis-\u002Fnuxt\u002Fmodes-de-rendu":492,"plan-nuxt":494},{"id":4,"title":5,"body":6,"description":428,"extension":429,"ligne":430,"meta":431,"motsCles":432,"navigation":440,"niveau":441,"path":442,"prerequis":443,"ressources":445,"seo":450,"sources":451,"stem":457,"__hash__":458},"docs\u002Fnuxt\u002F07.modes-de-rendu.md","Les modes de rendu",{"type":7,"value":8,"toc":418},"minimark",[9,14,35,39,43,46,50,58,61,95,102,106,146,149,153,169,176,190,194,200,285,305,312,316,376,380,414],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24,32],"ul",{},[18,19,20],"li",{},"Les quatre façons dont Nuxt peut fabriquer tes pages.",[18,22,23],{},"Les avantages et les limites de chacune.",[18,25,26,27,31],{},"Comment mélanger les modes route par route avec ",[28,29,30],"code",{},"routeRules",".",[18,33,34],{},"Comment préparer ton site pour la mise en ligne.",[10,36,38],{"id":37},"où-la-page-est-elle-fabriquée","Où la page est-elle fabriquée ?",[40,41,42],"p",{},"Une page HTML doit être fabriquée quelque part : au moment du build (une fois pour toutes), sur le serveur (à chaque visite), ou dans le navigateur du visiteur. Chaque mode fait un choix différent. Clique sur les onglets pour comparer :",[44,45],"modes-rendu",{},[10,47,49],{"id":48},"universel-le-choix-par-défaut","Universel : le choix par défaut",[40,51,52,53,57],{},"Sans rien configurer, Nuxt est en mode universel. Le serveur fabrique la page complète à chaque visite, puis Vue la rend interactive dans le navigateur : c'est l'",[54,55,56],"strong",{},"hydratation",". Tu as vu ce mécanisme au chapitre sur les données.",[40,59,60],{},"Pour la mise en ligne :",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm run build\nnode .output\u002Fserver\u002Findex.mjs\n","bash","",[28,69,70,86],{"__ignoreMap":67},[71,72,75,79,83],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sIXEE","npm",[71,80,82],{"class":81},"shWOn"," run",[71,84,85],{"class":81}," build\n",[71,87,89,92],{"class":73,"line":88},2,[71,90,91],{"class":77},"node",[71,93,94],{"class":81}," .output\u002Fserver\u002Findex.mjs\n",[40,96,97,98,101],{},"Le dossier ",[28,99,100],{},".output"," contient tout le nécessaire. Il te faut un hébergement capable de faire tourner un serveur (un VPS, ou une plateforme comme Vercel ou Netlify).",[10,103,105],{"id":104},"client-tout-dans-le-navigateur","Client : tout dans le navigateur",[62,107,112],{"className":108,"code":109,"filename":110,"language":111,"meta":67,"style":67},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","export default defineNuxtConfig({\n  ssr: false\n})\n","nuxt.config.ts","ts",[28,113,114,130,140],{"__ignoreMap":67},[71,115,116,120,123,127],{"class":73,"line":74},[71,117,119],{"class":118},"sOnC1","export",[71,121,122],{"class":118}," default",[71,124,126],{"class":125},"syCW7"," defineNuxtConfig",[71,128,129],{"class":77},"({\n",[71,131,132,136],{"class":73,"line":88},[71,133,135],{"class":134},"scfrF","  ssr: ",[71,137,139],{"class":138},"s5iOY","false\n",[71,141,143],{"class":73,"line":142},3,[71,144,145],{"class":77},"})\n",[40,147,148],{},"Le navigateur reçoit une page vide et JavaScript construit tout. C'est adapté à un outil réservé à des utilisateurs connectés (un tableau de bord), où le référencement ne compte pas. Pour un site public, c'est rarement le bon choix.",[10,150,152],{"id":151},"statique-tout-au-build","Statique : tout au build",[62,154,156],{"className":64,"code":155,"language":66,"meta":67,"style":67},"npx nuxt generate\n",[28,157,158],{"__ignoreMap":67},[71,159,160,163,166],{"class":73,"line":74},[71,161,162],{"class":77},"npx",[71,164,165],{"class":81}," nuxt",[71,167,168],{"class":81}," generate\n",[40,170,171,172,175],{},"Nuxt visite chaque page pendant le build et enregistre le HTML obtenu dans ",[28,173,174],{},".output\u002Fpublic",". Tu peux héberger ces fichiers n'importe où, souvent gratuitement (GitHub Pages, par exemple).",[177,178,179],"warning",{},[40,180,181,182,185,186,189],{},"Un site généré n'a plus de serveur : tes routes ",[28,183,184],{},"server\u002Fapi"," ne répondent pas en ligne. Les données appelées avec ",[28,187,188],{},"useFetch"," pendant le build sont enregistrées avec les pages, mais tout ce qui doit changer après (un formulaire, une recherche en direct) a besoin d'un service externe ou d'un autre mode.",[10,191,193],{"id":192},"hybride-chaque-route-son-mode","Hybride : chaque route son mode",[40,195,196,197,199],{},"Avec ",[28,198,30],{},", tu choisis le mode adresse par adresse, dans le même projet :",[62,201,203],{"className":108,"code":202,"filename":110,"language":111,"meta":67,"style":67},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002F': { prerender: true },          \u002F\u002F fabriquée au build\n    '\u002Frecettes\u002F**': { swr: 3600 },     \u002F\u002F fabriquée au serveur, gardée en cache une heure\n    '\u002Fadmin\u002F**': { ssr: false }        \u002F\u002F fabriquée dans le navigateur\n  }\n})\n",[28,204,205,215,220,238,256,274,280],{"__ignoreMap":67},[71,206,207,209,211,213],{"class":73,"line":74},[71,208,119],{"class":118},[71,210,122],{"class":118},[71,212,126],{"class":125},[71,214,129],{"class":77},[71,216,217],{"class":73,"line":88},[71,218,219],{"class":134},"  routeRules: {\n",[71,221,222,225,228,231,234],{"class":73,"line":142},[71,223,224],{"class":81},"    '\u002F'",[71,226,227],{"class":134},": { prerender: ",[71,229,230],{"class":138},"true",[71,232,233],{"class":134}," },          ",[71,235,237],{"class":236},"sd6ml","\u002F\u002F fabriquée au build\n",[71,239,241,244,247,250,253],{"class":73,"line":240},4,[71,242,243],{"class":81},"    '\u002Frecettes\u002F**'",[71,245,246],{"class":134},": { swr: ",[71,248,249],{"class":138},"3600",[71,251,252],{"class":134}," },     ",[71,254,255],{"class":236},"\u002F\u002F fabriquée au serveur, gardée en cache une heure\n",[71,257,259,262,265,268,271],{"class":73,"line":258},5,[71,260,261],{"class":81},"    '\u002Fadmin\u002F**'",[71,263,264],{"class":134},": { ssr: ",[71,266,267],{"class":138},"false",[71,269,270],{"class":134}," }        ",[71,272,273],{"class":236},"\u002F\u002F fabriquée dans le navigateur\n",[71,275,277],{"class":73,"line":276},6,[71,278,279],{"class":134},"  }\n",[71,281,283],{"class":73,"line":282},7,[71,284,145],{"class":77},[15,286,287,293,299],{},[18,288,289,292],{},[28,290,291],{},"prerender: true"," : la page est générée au build, comme en mode statique.",[18,294,295,298],{},[28,296,297],{},"swr: 3600"," : le serveur garde la page en cache et la refabrique en arrière-plan au plus toutes les 3600 secondes. Les visiteurs reçoivent toujours une réponse immédiate.",[18,300,301,304],{},[28,302,303],{},"ssr: false"," : rendu dans le navigateur, comme en mode client.",[40,306,307,308,311],{},"Les ",[28,309,310],{},"**"," veulent dire « toutes les adresses qui commencent par ». Comme certaines routes passent encore par le serveur, il faut un hébergement avec serveur.",[10,313,315],{"id":314},"comment-choisir","Comment choisir",[317,318,319,332],"table",{},[320,321,322],"thead",{},[323,324,325,329],"tr",{},[326,327,328],"th",{},"Ton projet",[326,330,331],{},"Mode conseillé",[333,334,335,348,356,366],"tbody",{},[323,336,337,341],{},[338,339,340],"td",{},"Blog, portfolio, documentation",[338,342,343,344,347],{},"Statique (",[28,345,346],{},"nuxt generate",")",[323,349,350,353],{},[338,351,352],{},"Site avec API, comptes, contenu qui change",[338,354,355],{},"Universel",[323,357,358,361],{},[338,359,360],{},"Outil interne derrière une connexion",[338,362,363,364,347],{},"Client (",[28,365,303],{},[323,367,368,371],{},[338,369,370],{},"Vitrine statique + espace membre",[338,372,373,374,347],{},"Hybride (",[28,375,30],{},[10,377,379],{"id":378},"à-retenir","À retenir",[15,381,382,385,390,398],{},[18,383,384],{},"Universel (par défaut) : page fabriquée au serveur à chaque visite, puis hydratée.",[18,386,363,387,389],{},[28,388,303],{},") : tout dans le navigateur, référencement faible.",[18,391,343,392,394,395,397],{},[28,393,346],{},") : tout au build, pas de ",[28,396,184],{}," en ligne.",[18,399,400,401,403,404,407,408,407,411,413],{},"Hybride : ",[28,402,30],{}," choisit le mode route par route (",[28,405,406],{},"prerender",", ",[28,409,410],{},"swr",[28,412,303],{},").",[415,416,417],"style",{},"html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":67,"searchDepth":88,"depth":142,"links":419},[420,421,422,423,424,425,426,427],{"id":12,"depth":88,"text":13},{"id":37,"depth":88,"text":38},{"id":48,"depth":88,"text":49},{"id":104,"depth":88,"text":105},{"id":151,"depth":88,"text":152},{"id":192,"depth":88,"text":193},{"id":314,"depth":88,"text":315},{"id":378,"depth":88,"text":379},"Universel, client, statique ou hybride : où la page est fabriquée, et comment choisir pour chaque partie du site.","md","nuxt",{},[433,434,435,303,436,346,437,30,406,410,438,439],"rendu","SSR","universel","SPA","statique","hybride","déploiement",true,"intermediaire","\u002Fnuxt\u002Fmodes-de-rendu",[444],"\u002Fnuxt\u002Froutes-api",[446],{"nom":447,"url":448,"type":449,"anglais":440},"Documentation officielle de Nuxt","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Frendering","doc",{"title":5,"description":428},[452,454],{"nom":453,"url":448},"Modes de rendu (en anglais)",{"nom":455,"url":456},"Déploiement (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fdeployment","nuxt\u002F07.modes-de-rendu","oE9WKJlB4RIEnK6RqKUESF2A7hos6mh0gJth3Wr_CkM",[460,464,468,472,476,480,483,484],{"path":461,"title":462,"stem":463},"\u002Fnuxt\u002Fintroduction","Introduction à Nuxt","nuxt\u002F01.introduction",{"path":465,"title":466,"stem":467},"\u002Fnuxt\u002Fstructure","La structure d'un projet","nuxt\u002F02.structure",{"path":469,"title":470,"stem":471},"\u002Fnuxt\u002Fpages-et-routage","Pages et routage","nuxt\u002F03.pages-et-routage",{"path":473,"title":474,"stem":475},"\u002Fnuxt\u002Fcomposants","Les composants","nuxt\u002F04.composants",{"path":477,"title":478,"stem":479},"\u002Fnuxt\u002Frecuperer-des-donnees","Récupérer des données","nuxt\u002F05.recuperer-des-donnees",{"path":444,"title":481,"stem":482},"Les routes API","nuxt\u002F06.routes-api",{"path":442,"title":5,"stem":457},{"path":485,"title":486,"stem":487},"\u002Fnuxt","Nuxt","nuxt\u002Findex",[489,491],{"title":481,"path":444,"stem":482,"description":490,"children":-1},"Écrire une petite API dans server\u002Fapi : lire, créer, renvoyer des erreurs, et garder les secrets côté serveur.",null,[493],{"path":444,"title":481,"ligne":430},[495,497,498,499,500,501,502,503],{"path":461,"title":462,"niveau":496,"stem":463},"debutant",{"path":465,"title":466,"niveau":496,"stem":467},{"path":469,"title":470,"niveau":496,"stem":471},{"path":473,"title":474,"niveau":496,"stem":475},{"path":477,"title":478,"niveau":441,"stem":479},{"path":444,"title":481,"niveau":441,"stem":482},{"path":442,"title":5,"niveau":441,"stem":457},{"path":485,"title":486,"niveau":504,"stem":487},"memo",1794583440816]