Choosing a Nuxt Mode For Your Next Web App July 24th, 2018 • Emerson Matthews

Nuxt, one of the most popular Vue frameworks for new web apps, can greatly improve your app performance and SEO. One of the most important Nuxt configurations is the mode, as it determines how your app is built, deployed, and served. There are three main types of web apps out there today:

# Classic Single-Page App (SPA)

Nuxt makes it easy to switch between all three. We'll go over the pros and cons of each to help you decide what is best for your app.

In a classic SPA, the HTML served to the client is relatively empty, and JavaScript dynamically renders HTML once it gets to the client. Because of this, you may see a "white flicker" before the webpage is fully loaded.

You can use this mode in Nuxt with the typical nuxt build command and one line of configuration:

module . exports = { mode : 'spa' , } ;

Can handle any routing situation

Just static files, making it easy to deploy to a CDN

Slow initial load time

Poor SEO, especially if content is asynchronously loaded

# Universal/Isomorphic Web App (UWA)

In a UWA, JavaScript renders the initial HTML the same way SPAs do, but now the JavaScript runs on your Nuxt server before the content is sent back to the client. This way, the client receives the rendered HTML immediately, and will behave like a classic SPA afterwards.

You can use this mode in Nuxt with the typical nuxt build command and one optional line of configuration:

module . exports = { mode : 'universal' , } ;

Now just start your server with nuxt start

Can handle any routing situation

Fast initial load time

Good for SEO

You must setup a server to run Nuxt

High traffic may put strain on your server

You can only query and manipulate the DOM in certain hooks (you should avoid this anyway )

In a pre-rendered SPA, you render each of your routes during your build step. Your static deployed files will include pre-rendered HTML for each route, so no matter which route the client initially loads, they will receive the full content immediately, and the app will behave like a classic SPA afterwards.

Nuxt will only automatically do this for static routes. If you have any dynamic routes such as users/{userId} then you will need to inform Nuxt what the actual routes are so that it may "navigate" to that route and render it:

const axios = require ( 'axios' ) ; module . exports = { generate : { routes : ( ) => axios . get ( 'https://my-api/users' ) . then ( res => res . data . map ( ( user ) => ` /users/ ${ user . id } ` ) ) , } , } ;

Then, just use the nuxt generate command. Learn more about building for dynamic routes here

Just static files, making it easy to deploy to a CDN

Fast initial load time

Good for SEO

The more routes you have, the longer your build step will be

You can only query and manipulate the DOM in certain hooks (you should avoid this anyway )

# Further Information

You should now be able to infer intuitively when and where code in a Nuxt asyncData function will run for each mode, but feel free to test your conclusions with console logging!

Learn more about Nuxt and Vue SSR here: