What's Nuxt.js?

04/01/2018

Vue js

Nuxt.js is a framework used to create server side rendered(SSR) Vue apps. This contrasts to a Vue SPA(single page application) which is client side rendered(CSR). It's meant to be the Vue version of Next.js a React SSR framework. Out of the box it includes a few common Vue modules: Vue Router, Vuex, Vue Server Side Renderer, and Vue-meta. Nuxt works by using a practical configuration and adhering to a directory structure which it reads to output a Vue app. Like Vue, and most other modern frameworks, Nuxt uses Babel and Webpack with some practical values to build the app.

If this is your first foray into Vue you should spin up a standard Vue app with their cli and play around with making some single page components first. The docs will have you up and running quickly.

I'm not going to dive into how to install Nuxt or get too detailed on how it works. It has decent docs and instead of reiterating what's already there you should check them out. I will cover more specific aspects of Nuxt in other articles. This talk by one of Nuxt's founders Alexandre Chopin gives a nice overview of Nuxt.

Why Nuxt?

I wanted to try out Nuxt because it's an extension of Vue.js. I've made a few small apps with Vue and a large one and find it's great to work with. I've worked with Angular quite a bit in the past and have made a couple sample apps with React and while both were fine I enjoy using Vue. Particularly it's single page components is a great design paradigm. It gets back to the simple structure of having some markup, a js script, and some styles and packaging that into a component architecture. It can be as simple or complicated as you require. Another benefit is its has excellent devtools and error messages which is something Angular lacks. Being able to debug quickly is very important to productive development. It's documentation is also excellent which is a big plus after coming from working with Angular.

While the most common use for Vue is SPAs Nuxt makes it easier to make Vue universal applications. Vue by itself has the ability to make an SSR app. Nuxt provides convention, a practical configuration, and build scripts to facilitate creating Vue universal apps. It also generates routes for you by reading the directory structure. One of it's primary benefits is that it can output a Nuxt app one of three ways: as an SSR(universal) app, a static(generated) app, or as an SPA.

Server side rendered

SSR apps have the an advantage over CSR apps in that they are more SEO friendly, initial page load is faster, and depending on your use case more flexible. A CSR app relies on the browser to do the work while an SSR app puts more work on the server.

When the browser loads the first page of an SSR app the html is viewable right away, in a CSR the page is viewable when the html and javascript finishes downloading. This means that the SSR app renders faster initially. It has to make requests to the server to get the next batch of content though. An SPA loads the entire application in the browser so subsequent route changes are fast. It then relies on AJAX requests to update and dynamically generate the page. It'd be interesting to try out an SSR + cache sometime to see how that compares to an SPA. In general if you have a site with dynamic content and/or has a lot of user interaction an SPA is the way to go.

SSR apps have an SEO advantage in that web crawlers will read web server's files to index them. With an SPA much of the content is dynamically generated so it isn't there for the search engine to read and index. This isn't an issue recently with Google but other search engines may not index the page properly.

An interesting approach for universal frameworks is to use a hybrid of SSR and SPA elements. I haven't tried this out yet so can't really speak to it.

Static Site Generation

Creating a web application as a static site has some real positives. It's affordable, easy to deploy once you have a workflow setup, SEO friendly, and speedy.

I originally started out with Nuxt to build this site as an SSR app just to try it out until I realized I could output a static site. I've always liked the workflow of projects like Jekyll or Hugo. Some of my coworkers used Jekyll for a blog and it seemed to work very well. It's nice to just be able to write some markdown to a file and push it to Git to add content to a site. Markdown is pretty ubiquitous and easy to pick up as well.

Nuxt makes it pretty easy to generate a static site. You develop how you normally would on the preconfigured local development server. When you're ready to package your app run npm run generate from the command line. This will read your directory structure, files, and any customization you have in nuxt.config.js then output the contents as static files to dist. Since they're static files it requires no server. You just have to upload them to a static file hosting provider. There are many solutions out there to do this. Some popular ones are: Github Pages, Gitlab Pages, Netlify, Google Cloud and AWS S3.

In a future post(or maybe three) I'll walk through all the steps involved in creating a static site with Nuxt and hosting it from start to finish. My tech stack for this is Nuxt, Gitlab with Gitlab CI, and AWS. There was a fair amount of configuration with all three but nothing too difficult.

In a nutshell to publish my site I merge master into a production branch. This kicks of a gitlab CI script which executes npm run generate and then synchs dist with an AWS S3 bucket. AWS then pushes the changes to Cloudfront CDN (content delivery network).

This workflow has been great so far. The generated content has a small file size so storing my content is inexpensive. Hosting on S3 is very cheap and using Cloudfront enables my files to load quickly and be distributed all over the world. The only downside to this is when I change content I have to wait for it to propagate to all the servers on the CDN or invalidate the cache. My content is usually available pretty quickly. Since they are just files served from storage it's easy for web crawlers to read adding SEO benefits. It's also nice not to have to manage and host a full fledged CMS(content management system) like Wordpress. If I ever decided I did need one I could refactor the app to be a CMS.

Static site generation is a great reason to use Nuxt. Whether or not you should use a static site depends on your use case. It's great for blogs, landing pages and marketing sites. It may be a bad fit for shopping sites or sites with a lot of dynamic content and interactivity.

Should you use Nuxt?

Vue's usage continues to climb which may bode well for continued adoption of Nuxt. Nuxt's NPM downloads have increased dramatically since it's 1.0 release in January 2018. Vue's use has skyrocketed over the past year so the traction is there for both of them. Both seem to have active approachable communities making positive contributions. Nuxt has a newish forum which is a good place to get help.

It depends highly on your use case but in general if it's mainly a document based site server side is probably the way to go and if it requires a lot of interactivity an SPA is. You'll have to weigh your use case and make a POC or two. There's a lot of buzz about universal frameworks right now but for most use cases an SPA will be adequate for the job. When I first started web development most webapps were SSR but technologies like JSP, JSF, PHP and such aren't very nice to work with. SPAs were a great leap forward for front end development. These newer universal web app frameworks offer a lot of improvements so it's possible that server side rendering gaining in popularity is a positive thing and not just a fad. For me Nuxt was fun to build this site with and I will push the static generation as far as I can to see what the possibilities are.

What's Nuxt.js?

Why Nuxt?

Server side rendered

Static Site Generation

Should you use Nuxt?

Links