Sometimes, you find yourself facing a specific problem and you feel like you're the only one stuck in this rut as you're becoming so desperate to find a proper web development solution for the issue that you've even dared to look on the fifth page of Google.Now, that's a Problem with a capital P.
One of these issues can be finding the best hosting option for a Nuxt.js SSR/Universal mode project. Especially, if it’s a small project, and you think that buying a server for it would be too much. So, if have a non-commercial project in your pocket and don’t know where to host it, this blog post is for you.
But before we get into it, let’s speak about the basics.
Nuxt SSR: What is it?
You probably know that server-side rendering has been around for a while now. You’ve also probably seen .jsp, .asp & .php extension webpages. This means that the server controls the HTML of the pages and they are not served as static HTML files but they are responded to the browser (pretty much like an API does to JSON), and the response headers will type HTML for the browser to render and understand it. These apps will have each page rendered usually separately and then send back the rendered page when there’s a request for it (routing). Each page will have its dedicated route, but for this to run smoothly, you need a backend cloud server.
Alternatives for Nuxt SSR
Following SSR, SPAs or Single-Page Applications were introduced: one index.html page which technically, still has different pages, but every page is controlled via JavaScript within the browser, including the routing and JS history API. These single-page solutions managed to change the way web development works because these sites don’t require a server. Everything is controlled by JavaScript and everything is static. As development tech advanced, SPAs started to rely even more on JS (think about Gmail, for example). This particular method of making websites has its perks but at times, maintenance can become difficult and the sites are not built properly, these sites can often become very slow as well because these sites can eat up a lot of ram and result in an unpleasant browser crash.
Nuxt and Universal Mode to The Rescue
Now, you probably know that Nuxt offers two different modes when it comes to hammering out Vue projects: Universal and SPA. Well, the universal mode offers the SSR from Vue.js right out of the box without the need to configure it. It also uses a node server for app-processing and prerenders all the HTML for all your pages and routes you have in your project.
Nuxt SRR is also faster and enables you to use JavaScript on both the client- and server-side. It also allows using prerendered pages, not to mention it can also improve your SEO because the dynamic routes will be prerendered whenever an engine starts to crawl the page.
Nuxt SSR App Hosting
In the case of SSR apps, you will typically need a server because they usually use a programming language that usually runs fully-fledged cloud-based services, like Heroku, AWS, and so on. Setting these applications up usually requires you to terminal and Linux knowledge as you will have to deal with port routing, database installs, certification setups, and a handful of other things.
However, if your project is very small, you can use hosting providers like Zeit, that let you host SSR apps on their platform. It also supports PHP, Node.js, Golang, and Ruby for serverless options. You don’t have to start anything from scratch and you also have a built-in CI/CD workflow where the code will always be synchronized with your GitLab/GitHub repo, meaning that all updates to the code will trigger a deployment with the latest changes.
Nuxt SRR App Hosting
In the case of SRR apps, you will typically need a server because they usually use a programming language that usually runs fully-fledged cloud-based services, like Heroku, AWS, and so on. Setting these applications up usually requires you to terminal and Linux knowledge as you will have to deal with port routing, database installs, certification setups, and a handful of other things.
However, if your project is very small, you can use free hosting providers like Zeit, that let you host SSR apps on their platform. Some of these free platforms also support PHP, Node.js, Golang, and Ruby for serverless options. You don’t have to start anything from scratch on them, and you might also get to use neat features like a built-in CI/CD workflow where the code will always be synchronized with your GitLab/GitHub repo, meaning that all updates to the code will trigger a deployment with the latest changes.
Hosting
So, to get started with the hosting itself, create a Nuxt project using npx create-nuxt-app my-project command with the config you prefer the most. After that, add a now.json to the project with the json object seen below:
{
“version”: 2,
“builds”: [
{
“src”: “nuxt.config.js”,
“use”: “@nuxtjs/now-builder”,
“config”: {
“serverFiles”: [
“package.json”
]
}
}
]
Once, you?re done with that, create an account on a platform of your choice and import your project and select the From Git Repository option. After that select the option wherever your code is hosted and import. Now, give it a name.
After this, leave the root directory blank as most handier free hosting platforms will automatically detect that you are using a Nuxt project and the json file we added above also has a custom builder that handles all setup-related tasks on its own.
Once your setup is done, just click on deploy and the platform will generate a URL.
Putting it Together
Please note, that this is just an example. When you’re dealing with large projects, or apps that you will have to scale in the near future, you may need to look for more serious plan-based hosting options with additional features. Also, you shouldn’t always stick to one single option. Both SRR and SPA solutions have their place, advantages, and possible drawbacks. As a developer, you already know all this, and you also know that you should focus on the best interests of the end result whenever you’re presented with a new idea or project.
