Ves al contingut
Tornar al blog

Publicar Nuxt amb SSR: build de Node i comprovacions

Tria entre Nuxt estàtic i SSR, genera el servidor Node de Nitro i valida rutes, variables i domini abans de publicar des de Git amb Projects.

  • Nuxt
  • Node.js
  • SSR
  • Projects

Nuxt pot generar fitxers estàtics o executar un servidor Node.js. La decisió depèn de com l’aplicació gestiona les rutes, les dades i el codi de servidor. No triïs el mode estàtic només per simplificar la publicació si això elimina funcions que necessita el lloc.

Aquesta guia prepara la sortida Node de Nitro i explica què has de revisar en connectar-la a Hostbrid Projects. Projects admet serveis Node i contenidors segons el pla i els recursos disponibles; consulta els límits i preus actuals abans de triar. No s’hi afirma que tots els mòduls de Nuxt funcionin sense canvis.

Tria entre renderització estàtica i servidor

nuxi generate prerenderitza les rutes compatibles i deixa la sortida pública a .output/public. El servidor Node és l’opció per a pàgines que es renderitzen a cada petició, endpoints del servidor o funcions que depenen de Nitro. Nuxt descriu les dues opcions a la seva guia oficial de desplegament.

Abans de canviar el mode, revisa nuxt.config, package.json, els mòduls i les rutes amb defineEventHandler. Si el projecte necessita renderització per petició, galetes o secrets disponibles només al servidor, no substitueixis SSR per HTML estàtic sense comprovar cada funció.

Genera i prova el servidor Node

Conserva el fitxer de bloqueig de dependències i fes servir el mateix gestor que el va crear. En un projecte npm:

npm ci
npm run build
NODE_ENV=production node .output/server/index.mjs

El preset node-server de Nitro crea el punt d’entrada .output/server/index.mjs; Nuxt indica que el port predeterminat és el 3000 i permet configurar PORT i HOST. En local, prova PORT=3000 HOST=127.0.0.1 NODE_ENV=production node .output/server/index.mjs i comprova la portada, una ruta dinàmica i una URL inexistent. Fes servir l’script build real del teu package.json; si executa una altra ordre, entén-ne el motiu abans de copiar aquestes instruccions.

Mantén les variables privades

Nuxt separa runtimeConfig privat de runtimeConfig.public. Les variables NUXT_PUBLIC_* s’exposen al navegador i no han de contenir contrasenyes, claus de proveïdor ni tokens administratius. Desa els secrets a la configuració privada del servei, no a Git ni al codi que s’inclou al paquet del navegador. La guia de configuració de runtime explica la relació entre la configuració i les variables d’entorn.

Publica i comprova les rutes

Connecta el repositori a Projects, tria la branca correcta i configura la build, l’ordre d’arrencada i el runtime segons l’aplicació i el pla. Si el preset del servei no coincideix amb l’artefacte Nitro, aporta un Dockerfile que executi npm ci, npm run build i arrenqui node .output/server/index.mjs; configura el port que exposa el contenidor. No copiïs una configuració genèrica sense revisar la versió de Node i el package.json del repositori.

Comença amb el domini temporal. Comprova SSR real, rutes amb barra final i sense, recursos, formularis, autenticació, crides a API i registres. Després configura el domini final i repeteix les proves amb HTTPS. Si només necessites pàgines prerenderitzades, compara la sortida estàtica amb Sites i evita mantenir un procés que no et cal.

Comprovació local (9 d’octubre de 2026): una app mínima de Nuxt 4.6.0 va compilar amb el preset node-server; node .output/server/index.mjs va servir la portada amb HTTP 200 i una ruta inexistent amb HTTP 404. No s’ha desplegat aquest exemple en un compte de Projects ni s’ha provat la compatibilitat de mòduls de tercers.

Referències: desplegament de Nuxt, configuració de runtime, Projects i plans actuals.

Gestiona els teus webs, servidors i correu.

És gratis i triga un minut.

Mínim 8 caràcters. Ni només números ni una contrasenya comuna.

T’enviarem un correu per confirmar el compte.