When planning your Nuxt project, you should start with the ending in mind, which build mode should you choose? Nuxt has a variety of ways of building your project and depending on your needs, the decisions you make now could make your life much easier later.

In this post, I'll explore the different ways to build your app and which methods favor which environments.

Method 1: Render at Runtime (Server Side Rendering)

With this method your code is built two ways, one for the server and one for the browser. The server code needs to be ran inside a node instance in order to work properly. Every time someone hits your site, the page is rendered server side and the output is returned in the initial response. Any navigation thereafter is all client-side.

Great for:

• Sites with highly dynamic content
• E-commerce sites with scheduled sales or frequently changing prices

Pro: Data is always up to date

Since your code is ran server side on every hit, you'll always have fresh data to return to the user.

Pro: Highly flexible and extendable

Using a real server gives you unlimited control over your application. You could cache local API hits for faster TTFB (Time to First Byte) or event schedule banner images that automatically start and stop without touching a terminal! The possibilities are endless.

Con: Runtime monitoring

Since your application is running on a server it's possible that it can crash! You have to be sure your production environment is stable and your application handles errors gracefully.

Con: Server-side poisoning

When your code runs on a server, all hits to your application run through a single Node instance. This means if you aren't careful with how you code, it's possible the state you meant for the current rendering user could spill over to ALL users! It can happen, don't ask me how I know :)

Con: Cost

Most hosting providers don't offer a free running server so you'll have to shell out some money at some point. It's possible to run Nuxt inside a serverless function, but again you don't have unlimited time and that time can be taken up pretty quickly by some unfriendly crawlers (I'm looking at you Googlebot)

Method 2: Render At Build-Time (Pre-rendering)

When using this method to build your app, Nuxt goes through each page in your project and renders them into an HTML file along with CSS and Javascript bundles. This produces files that are well suited for free hosting providers and CDNs (Content Distribution Networks). Since all assets are static and pre-rendered, TTFB metrics are much faster than server-side rendering. Even though all pages are pre-rendered, they are only used for initial hits. All navigation after the first hit is still a single page app.

Great for:

• Blogs
• Company or event sites
• Commercial campaign sites
• Small e-commerce sites where the prices and products don't change often

Pro: Amazing TTFB and scalability

The generated HTML files produced in the build can be hosted and cached in any CDN which are crazy fast and highly scalable.

Pro: Cheap hosting

There are a ton of great hosting providers that will host your static site for a very low price with generous traffic limits. Many host it for free!

Con: More complex build system

Since pages are pre-rendered, that means you will have to set up systems in your build pipeline to trigger a new build every time something changes. Nuxt knows when it should build the app vs pages, but keep in mind all pages are always built. There is no way to build just one page.

Con: Dynamic Urls

Since all pages are rendered when the site is built, dynamic urls can be tricky. Nuxt has no way of knowing all possible urls so you'll have to add some code to feed it the urls to render. A crawler was recently introduced to help reduce this problem.

Build Modes In Action

Now that we've covered the basics, let's dive in and see what these modes look like.

Server Side Rendering

To build your Nuxt project using Server Side Rendering (SSR) you need to ensure your target is server in your Nuxt config file. If the property is missing, that's fine, it's the default.

{
  target: 'server',
}

If you created your project using Nuxt Create App, just run yarn build to build it. If that script isn't in your package.json file, then you can run the build by running yarn nuxt build.

This starts a build process that creates two sets of bundles, one group for server and another for client.

After the build is complete you can run yarn start to start your project.

Pre-Rendering

To build your static (pre-rendered) site, you have to make sure target is set to static in your nuxt.config.js file.

{
  target: 'static',
}

This time, to build your site you have to run yarn generate. If you don't have that script setup in your package.json file, then it's yarn nuxt generate

Just like server-side rendering, Nuxt will generate a client side bundle. But, for the server bundle what it really does is build the generator that will pre-render all of your pages.

Toward the end of the build you can see a list of routes that Nuxt generated.

Even though there isn't a server built into the project, Nuxt still lets you preview what this would look like by running it's own internal server using yarn start (or yarn nuxt start)

SPA Build

There is another way to build your Nuxt app, but it's rarely used. You can build your app as a single page app (SPA) by using a property called ssr in your nuxt.config.js file.

{
  ssr: false,
}

This builds an 'old-school' SPA where the initial DOM isn't pre-rendered and only contains bare HTML with links to Javascript files. Some people use this mode when they want an SPA but also the folder structures, plugins and features of Nuxt.

This is what it looks like. As you can see, there is very little DOM with a bunch of Javascript files to load. It's highly recommended to not use this mode, as it negates most of the benefits of nuxt, unless you really know what you're doing.

<!doctype html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
  <head>
    <title>Mastering Nuxt</title><meta data-n-head="1" charset="utf-8"><link rel="preload" href="/_nuxt/38466b0.js" as="script"><link rel="preload" href="/_nuxt/cbd2cf7.js" as="script"><link rel="preload" href="/_nuxt/vendors/app.cd50e96.css" as="style"><link rel="preload" href="/_nuxt/56950eb.js" as="script"><link rel="preload" href="/_nuxt/app.80ac887.css" as="style"><link rel="preload" href="/_nuxt/b1d839b.js" as="script">
  <link href="/_nuxt/vendors/app.cd50e96.css" rel="stylesheet"><link href="/_nuxt/app.80ac887.css" rel="stylesheet"></head>
  <body class="my-style" data-n-head="%7B%22class%22:%7B%221%22:%5B%22my-style%22%5D%7D%7D">
    <div id="__nuxt"><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{auth:{cookieName:"idToken",clientId:"537712074419-0pao3sshf84cqqtaie3aumvmobmlseji.apps.googleusercontent.com"},algolia:{appId:"QXGX8RCAML",key:"f0ecada6cb5d32e6496eb1e42c3d7bbd"}},staticAssetsBase:void 0}</script>
  <script src="/_nuxt/38466b0.js"></script><script src="/_nuxt/cbd2cf7.js"></script><script src="/_nuxt/56950eb.js"></script><script src="/_nuxt/b1d839b.js"></script></body>
</html>

Well there ya have it, the two main ways to build your Nuxt application. As you can see, no matter the size of your project, Nuxt can handle it all by giving you options that help you manage growth. Weather it be a personal blog site, all the way up to a full scale e-commerce platform, Nuxt has your back.