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.
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.
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.
- Faster - You browser does not have to handle the routing and the heavy things.
- 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.
- 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.
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.
Make a Nuxt project using
npx create-nuxt-app my-project.with the configuration of your choice.
now.jsonfile to your root of the project with the below json object.
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.
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.
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.