Rendering Modes in Nuxt 3

Nuxt is an open source framework to make your Vue.js applications. Currently, Nuxt 3 has a release candidate and the stable version would be out soon. In this series, I would be taking us through Nuxt 3 concepts and APIs. In this first part, we would focus on rendering modes in Nuxt 3.

Setup

To quickly install Nuxt 3, lets use the nuxt 3 documentation.

Rendering modes

Nuxt 3 offers a couple of different rendering modes:

• Universal Rendering
• Client-side rendering
• Hybrid rendering

Each of this rendering modes have their use cases and benefits. In this article, we will take a look at their pros, and how to implement them in Nuxt 3.

Universal Rendering

Universal rendering allows for code to be pre-rendered at build time or rendered on the server before it is served to the client on request.

This results in very fast pages, because rendering on the server is faster and the user gets content on page load compared to Client-Side only rendering.

Nuxt 3 also improves this greatly by allowing code to be rendered not just on node-js servers, but also on CDN edge workers. This increases the site speed, and also helps reduces cost.

In Universal rendering, we can use pre-rendering. This means we can have some pages, or all pages, pre-rendered on build time, and other pages rendered at request time.

This is a great choice for static pages like website landing pages, blogs and some dynamic pages that don’t change often and have a finite number of pages.

Universal mode with server side rendering is best for sites with highly dynamic content that changes frequently, like ecommerce sites.

Pros

Search Engine Optimization: Universal rendered apps serve the page with the generated html content to the browser. This makes it easy for web crawlers to index such pages.

Performance: The performance of Universal rendered apps are fast compared to Client-side rendered apps because the page already contains the HTML code, and this does not rely on the users device to parse and render the HTML.

To deploy and use our Nuxt 3 application on a node-server in universal mode:

First in nuxt.config.js file

defineNuxtConfig({
  ssr: true,
  preset: 'node-server'
})

By default, SSR is set to true if it is not passed in the nuxt.config.js file. Also, preset is set to ‘node-server’ by default, but this can be changed to suit the deployment environment. For example, Vercel preset should be used for Vercel deployment. You can read here for available deployment presets.

When we run our build command:

yarn run build

This will generate the output folder with the app's entry point file.

Next, we can run the file with Node.

yarn run start

or

node .output/server/index.mjs

To deploy and use our Nuxt 3 application on a static server in universal mode:

First, in our nuxt.config.js file, we specify the pages to be generated:

defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [ '/article/100', '/article/101' ]
    }
  }
})

Now we can run our generate command:

yarn run generate

This will generate the output folder '.output/public' with the pages files and the related JS and CSS files. We can simply place this folder into any static hosting service, and access our application.

To generate our routes async, like a blog website, we can fetch our routes and then pass it to the route during build with this hook.

 defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [ '/article/100', '/article/101' ]
    }
  },
	hooks: {
		async 'nitro:config'( config ) {
			const routes = await generateBlogRoutes( config.runtimeConfig );
			config.prerender.routes.push( ...routes );
		}
	}
 });

Client side rendering

Client side rendering involves sending every request to a single file, usually ‘index.html’, with empty content and then linking them to the corresponding JS bundles, allowing the browser perform the parsing and rendering of the HTML.

Client side rendering is a great choice for heavily interactive websites with animations, like online gaming sites, Saas sites, etc.

Pros

Offline support: Client-side rendered apps can run offline once the dependent JavaScript files are downloaded if there is no internet. It is easy to make a client side rendered app a Progressive web app.

Cheap: Client-side rendered apps are the cheapest in terms of hosting as you do not need to run a server. They are made up of HTML and JS files which can be served from a static server.

To config our Nuxt 3 app to be fully client side rendered:

First in nuxt.config.js file

defineNuxtConfig({
  ssr: false
});

Now we can run our generate command:

yarn run generate

This will generate the output folder '.output/public/index.html' with the apps entry point file and the related js files. We can simply place this folder onto any static hosting service, and access our application.

Hybrid rendering

Hybrid rendering is an unreleased Nuxt 3 feature that allows developers to configure different rendering modes for different pages. This should be available later this year, and we will explore it in this series once it is.

For more official information about the hybrid rendering discussion.

In the next article, we will implement a simple webpage using the universal rendering. The webpage will have a blog which will be prerendered, and also a dynamic user page which will be server rendered.

I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github.