Deployment Targets

Static Hosting

Nuxt also works as a static site generator. Statically render your Nuxt application and get all of the benefits of a universal app without a server. The nuxt generate command will generate a static version of your website. It will generate HTML for every one of your routes and put it inside of its own file in the dist/ directory. This improves performance as well as SEO and better offline support.

Deployment Targets - 图1

Dynamic routes are also generated thanks to the Nuxt Crawler

For static sites the target of static needs to be added to your nuxt.config file.

nuxt.config.js

  1. export default {
  2. target: 'static' // default is 'server'
  3. }

Running nuxt dev with the static target will improve the developer experience:

  • Remove req & res from context
  • Fallback to client-side rendering on 404, errors and redirects see SPA fallback
  • $route.query will always be equal to {} on server-side rendering
  • process.static is true

Deployment Targets - 图2

We are also exposing process.target for module authors to add logic depending on the user target.

Server Hosting

Server hosting means running Nuxt on a Node.js server. When the user opens your page, their browser will request that page from the server. Nuxt will handle the request, render the page and send back the resulting page with all its content.

You might need server hosting if you want to render HTML on each request rather than in advance at generate-time, or if you need serverMiddleware.

Deployment Targets - 图3

You can still run Nuxt with server hosting with ssr: false but Nuxt will not fully render the HTML for each page - leaving that task to the browser. You might choose this option if you need serverMiddleware but do not want fully server-side rendered HTML.

For server hosting, target: 'server' is used, which is the default value. You will use the build command to build your application.

nuxt.config.js

  1. export default {
  2. target: 'server'
  3. }