Image

scaling

4 min read
Last update: December 19, 2021

This course was created with Nuxt 2.3.4. Please check the Nuxt docs if you run into any issues using a newer version.

Static Site Generated Deployment

In the previous lesson, we learned how to deploy your Nuxt application in Universal Mode and get it up on a node server. In this lesson, we’ll dive into a special deployment mode for Nuxt: Static Generated Deployment. Let’s understand why to use it, how to use it, and how to deploy it easily.

What Universal Mode is Great For

When the data on our webpages is changing often, universal mode works great since our pages are pre-rendered on the server every time a request comes in. But what about when the data doesn’t change as often such as:

  • A blog with data only changing with new blog posts.
  • A store with data only changing with new products.
  • Documentation which only changes with new updates.
  • A content site like Vue Mastery where data only changes when new content is pushed.

In this case it Universal Mode can be overkill when we’re pulling from the API and rendering our pages on every request.

Universal vs Static Generated Deployment

The difference between these two modes is simply where the Vue app is rendered into HTML before being sent into our client’s browser. In Universal Mode the HTML is rendered (or generated) on every request. In Static Generated Deployment the HTML is generated once (possibly from your local computer) and deployed to the server. It all starts with one command:

$ npm run generate

This command will generate our website HTML into our code’s /dist directory.

For example, the following file structure:

-| pages/
----| index.vue
----| event/
--------| create.vue

Will generate:

-| dist/
----| index.html
----| event/
------| create/
---------| index.html

What Nuxt’s Static Site Deployment deployment does for you is run through all your routes with your data and create all of the HTML routes with data in place. This way our index.html page already has our events all rendered out and our page loads with proper data before Vue even starts up (just like Universal mode)

Now, if we fire up a basic HTTP server hosting from our /dist directory, we have a statically generated app that works, except for when you hit refresh on a dynamic route.

Rendering Data for Dynamic Routes

By default, dynamic routes are ignored by the generate command. For example, if you have the following directory:

-| pages/
---| index.vue
---| event/
-----| _id.vue

Only the route / will be generated by Nuxt.js. If you want Nuxt.js to generate routes with dynamic params, you need to set an array of dynamic routes.

We can add routes for /``event``/:id in nuxt.config.js:

nuxt.config.js

export default {
...
generate: {
routes: [
'/event/5928101'
]
}
}

Then when we launch npm run generate you’ll see /``event/5928101``/index.html in our /dist folder.

But obviously this isn’t very scalable, we don’t want to have to add an event to this file every time any user adds one. Instead we need a way to query our API here to generate a current list of events, so we can create a static file for each individual event. We can modify our nuxt.config to generate the routes like so:

nuxt.config.js

import EventService from './services/EventService.js'
...
export default {
...
generate: {
routes: () => {
return EventService.getEvents().then(response => {
return response.data.map(event => {
return '/event/' + event.id
})
})
}
}
}

In the example above, we’re using the event``.id from the server to generate the routes. If we then look inside the dist folder, we’ll see the following.

Now that all of the pages our user might land on are statically generated, so we get all the benefits of Univeral Mode, we can deploy it.

Deploying a Static Site

Since our website is now essentially just HTML, JavaScript, images, and CSS, we can deploy this to any place that can host static files. For personal websites many people deploy to Github pages. However, Netlify makes it SUPER simple to deploy a static site generated repository. If you’re interested in learning how you should just watch the video above, it’s very visual.

Wrapping Up

We hope this gives you a great overview on how to get up and running with Nuxt. There’s obviously lots more to learn, and I highly recommend you take a read through the Nuxt guide if you haven’t yet. Also, we cover lots of great Nuxt articles on the official Vue Newsletter and Podcast. Thanks for learning with me!