What is Nuxtjs' SSR/Universal mode and how to host it (for free 😉)

Some context on why I am writing this article

I recently was looking for a way to host my side project tvflix.co with SSR, but it was very small project & purchasing a server specifically for it was a overkill. After researching some fair amount, I found out Zeit lets you host Nuxtjs & Nextjs apps with SSR mode with their free/hobby plan, got this confimed from the team, you can only host non commercial apps for free on thi tier.

Whats SSR?

Server side rendering used to be a very common thing before, you must have seen webpages with .jsp, .asp & .php extensions, it means that a server is controlling the HTML of these pages and these are not served as static html files, instead the HTML is responded back to the browser like a API responds back JSON, and the response headers will be having type 'HTML' for browsers to understand and render it. SSR apps will be usually having each page rendered seperately and send back the rendered page when a browser requests it, this is called routing, where each page will have a route, the catch here is, this requires a backend cloud server.

SSR Alternatives

A few years later SPAs were introduced, which means these Single Page Applications will be literally just one index.html page and technically, still be having different pages, but everything controlled within the browser via javascript, even the routing with javascripts history API. SPAs changed the way websites work, because they dont need a server at all, everything is static and controlled by javascript. Soon web became more and more powerful which means these SPAs relied more on javascript than ever, to give a example of how powerful SPAs are, Gmail, one of the worlds largest email service is a SPA. This way of making websites is interesting but can sometimes become difficult to maintain & become extremely slow if they are not built properly, since the HTML inside dom is injected and manipulated by javascript, this can eat up a lot of ram & crash your browser(experienced this from a SPA made by a company I worked for, just by opening two tabs 😑).

What's Nuxtjs' Universal mode?

Nuxt js offers two modes of making Vue projects. SPA & Universal, we will be focusing on how and why to use the universal mode. Basically universal mode offers Vuejs' SSR out of the box with zero configuration and it uses a node server to process your app, it also prerenders all the html for each page or route you have made in your project.

Some of the advantages of Nuxt SSR

1. Faster - You browser does not have to handle the routing and the heavy things.
2. Universal - The Universal here just means you will be writing Javascript on both your client and server.
3. Power of vue - Traditional SSR apps do not have this power of completely utilising modern frameworks like Vue and React. Nuxtjs lets you write your client app in Vuejs.
4. Prerendered - Have a look at any SPA's source code, you'll usually find that it only has one html element inside body tag, everything is handled by javascript. Nuxt prerenders each single route and converts them to html pages, which work much faster.
5. Better SEO - Because your dynamic routes will prerendered whenever a search engine crawls your page.

I am currently migrating a side project tvflix.co to Nuxtjs from vue & here's the improvement I saw.

How do we host a Nuxt SSR app?

SSR apps usually require a server because typically they use a programming language which run only on a full fledged cloud based servers (a computer basically), like Heroku, Digital Ocean, AWS, Google Cloud etc, and setting them up usually requires some linux & terminal knowledge, you will have to handle the port routing & proxies via Nginx, setup the correct node versions, install databases (if needed) etc, setup SSL certificates and some other things as well, but my project was small and had very few pages, purchasing a server was not feasible.

I found out Zeit lets you host api's, ssr apps and other server based things for free on their platform, it supports Nodejs, PHP, Golang & Ruby for serverless functions, and the biggest advantage is, you dont have to setup anything from scratch, plus they have a built in CI/CD workflow where your code with be always in sync with your github/gitlab repo, whenever you push some update to your project code, zeit will auto trigger and deploy your project with the latest commit.

So Here's how you can host a Nuxtjs SSR app on their platform.

1. Make a Nuxt project using npx create-nuxt-app my-project. with the configuration of your choice.

2. Add a now.json file to your root of the project with the below json object.

1. Make a account on zeit.co and click Import Project and select From Git Repository. Select Github/Gitlab/Bitbucket wherever your code is hosted. Select your project and click Import and give it name.

2. Leave the root directory blank, unless you have change it to something else (which you usually shouldn't) ***and proceed. Zeit will auto detect that you are on a Nuxt project(awesome). leave the config as is, because in now.json file we added in step 2 has a custom builder made by the nuxt community, which handles all of this setup on its own. *I had overidden them while deploying my code for the first time and it messed up the project completely, hence its best to follow the guide from Nuxt.

3. Click Deploy and voila, zeit will build it and generate a URL for you.

Some internal things that happen in a nuxt project when you want them hosted in SSR mode. Unlike spa mode, where you run command npm run generate to make a production build and get a dist folder with all you working deployable code, which you just paste in a host provider and it just works, with SSR mode it's a little different. To make a build in Universal/SSR mode, you run command npm run build and this wont generate a dist folder, instead your deployable code will be generated inside .nuxt/dist/ which again contains two folders named client and server, the entry point of your app.

If zeit's free sevrer isn't enough and you want to host it on a full fledged server like heroku and digital ocean - here's the nginx config.

Note: Its not always necessary to use SSR, SPAs have their own advantages, like you get to host them without the having to set up a server, they just get the work done, and you get a lot more options to host static SPAs for free like Netlify, Zeit, Surge etc.