Nuxt 3 : Difference nuxt start / nuxt preview?

Question

Is there a difference between nuxt start + nuxt preview?

And is it correct to start a server with an ssr nuxt app in production mode with: npm run build (nuxt build)
npm run start (nuxt start) ?
For me, the docs are a little bit confusing, https://v3.nuxtjs.org/api/commands/preview/ "The preview command starts a server to preview your Nuxt application after running the build command."

Tavish

from this documentation nuxt.com/docs/api/commands/preview : This command sets process.env.NODE_ENV to production so, I think we can use this command for production. npm run build and then npm run preview – Denaedenarius

@Denaedenarius if you do not preview it with the production environment, it will indeed not look like a production preview but rather a dev one (defeating the whole purpose). Still, it is not an actual bundle recommended for a real-world production environment. – Divot

"nuxt preview" and "nuxt start" are aliases. Check their CLI outputs when flagged with help like "nuxt preview --help". They print the same output: ` Usage: npx nuxi preview|start [--dotenv] [rootDir] ⋮ Launches nitro server for local testing after nuxi build. Use npx nuxi [command] --help to see help for each command ` – Oys

Answer 1

There are mainly 4 things:

• nuxt dev, purely for development purposes
• nuxt build for SSR or nuxt generate for SSG
• nuxt preview to get a preview locally of what would the final bundle look like
• nuxt start what should be running on the actual production server

At the end, Nuxt's team made this simple for us by detecting the platform you're pushing your code too. But at the end, you could have nuxt ship or nuxt yoloooo doing the exact same thing, it all depends of your own preferences.

Most of the defaults are adapting or overriding some possible mistakes by analyzing what are your project's settings and reacting accordingly.

---

Depending on where you deploy your app, you can get various behaviors as explained in the doc: https://v3.nuxtjs.org/getting-started/deployment

If you want to deploy your app on Heroku (SSR), your nuxt start command will look something like this

"scripts": {
  "build": "nuxt build",
  "start": "node .output/server/index.mjs"
}

as shown here: https://nitro.unjs.io/deploy/providers/heroku

If you're publishing your code to some SSG platform, it will usually use a "lighter Nginx/Apache server" for free and do basically the same as serve for your static assets (with nuxt start).

---

The only thing NOT to do is to ship a nuxt dev on production.

Divot

Is it possible to have SSR with SSG? If so, do you use nuxt generate or nuxt build? – Baro

@Baro SSR is quite a superset of SSG tbh. If it's for the cost part, you could probably trigger some cloud/edge functions to make some clever work. TLDR: some more details are welcome regarding your use case and wished end goal! – Divot

I am using nuxt/content for blogs and I have landing pages. On top of that I have a dashboard. I can't use SSR or SSG with my dashboard pages, because there is just too much to render and it would be to expensive. So i use ssr: false (SPA) for that. Currently my entire application is ssr: false. However, for my blogs to work (nuxt/content) I need to either prerender (SSG) or use ssr: true (SSR). My landing pages are preferably SSG for performance and seo. I can't make my blogs SSG, since I want the user to search and paginate through the blogs. Meaning I wouuld have to use routeRules. – Baro

@Baro you can use SPA only for the dashboard side and SSG for the rest (make the search on the client-side with something simple, pagination will not be an issue). Feel also free to open a brand new question. – Divot

Answer 2

I think, nuxt start and nuxt preview is similar.

Depend on this documentation https://nuxt.com/docs/getting-started/deployment

To deploy nuxt into server, we can use node .output/server/index.mjs

At the same time, when we use command nuxt preview this also execute the similar entry point.

---

Depend on this documentation https://nuxt.com/docs/api/commands/preview/

This command sets process.env.NODE_ENV to production

So my conclusion is we can use command nuxt preview for production.

Denaedenarius

No you cannot use preview for production, because the preview will not bundle the app efficiently for that environment. Having your app working as dev or prod is totally different and could lead to actual security/performance issues. There's a reason it's called preview (so that it can allow us to have a quick glance at the result without waiting for the whole build step to be done). – Divot

hmm. refers to this doc nuxt.com/docs/getting-started/deployment the command for deployment is node .output/server/index.mjs which is same as the npm run preview command. – Denaedenarius

How you run and how you bundle your app are 2 different things. – Divot

Yarn preview shouldn't be used for production – Jeanette

Answer 3

Packaging for production is achieved by running npm run build

While to launch the application we can run either: node .output/server/index.mjs or npm run preview

Note: nuxt documentation specifies that npm run start is an alias for npm run preview (both will run the command: node .output/server/index.mjs)

Ref. documentation:

• Nuxt deployment
• Nuxt commands

Aires

There is a difference between SSG (nuxt generate) and SSR (nuxt build) tho, you don't need a NodeJS server with SSG, hence node .output/server/index.mjs and npm run preview are NOT equivalent because it depends on how you bundle your app in the first place, check my answer for more details. – Divot

I understand your point, in my previous answer, I assume that the Nuxt application will be deployed on a Node.js server and that the rendering mode will be "universal rendering" (SSR) nuxt.com/docs/guide/concepts/rendering#universal-rendering – Guildsman