NuxtJS: Have your modern JS cake and SEO too

The Need for Modern JS

The demand for user interface responsiveness had grown immensely with the rise of the modern web. As countless consumers and businesses move from desktop programs to strictly browser-based applications, the complexity of software increases accordingly. In the past, tools such as jQuery or plain JavaScript were sufficient to meet the needs of the time. Over the last few years, developers sought to manage complexity using more structured and robust coding approaches, leading to projects like AngularJS, React, and Vue.JS.

​

The Challenge to Maintain SEO

SEO, or search engine optimization, is a high priority of many firms. In order for a website and its pages to appear near the top of Google search results, the HTML code must follow a strict set of practices. When Google indexes the web and determines which webpages should have the highest rank in the search, it scans HTML for very specific content. The important thing to understand is that it looks at HTML only and does not run JavaScript code. This means websites using a significant amount of JavaScript to create webpages are at risk of losing their rank in search engines. There is one way to avoid this problem, which is a technique known as Server-Side Rendering or SSR.

With server-side rendering, the major portions of webpages' JavaScript will be run on the web server, resulting in much more HTML being sent to search engines. As a result, the search engine will be able to index the page with a high rank even though the page uses a large amount of JavaScript. Because of server-side rendering, Google will see the webpage as if it were pure HTML, not even needing to recognize that JavaScript was utilized; thus, the page will be ranked identically as if it were full HTML.

While jQuery and plain JavaScript made minor changes to webpages by adding bits of responsiveness without affecting SEO performance, front-end JS frameworks tend to alter the structure of code to the point of becoming a trade-off between the robustness of apps and SEO capabilities. In many cases, such a compromise is less than ideal. For example, a retail site would desire (1) attracting customers by being at the top of Google then (2) closing the deal with convenient shopping cart controls and upsells fitting to user behavior.

In other words, the problem with heavily JS-based sites lies in the fact that search engines' web crawlers are unable to execute JavaScript sufficiently. To gain the benefits of modern JS frameworks while remaining friendly with search engines, the webpage must be returned from the server with all the necessary SEO components, then the JavaScript in the browser can pick up where the server left off. As this task will likely be a common one, the question of concern is: What is the standard framework for this?

​

Introducing NuxtJS

NuxtJS takes Vue.JS and provides server-side rendering right out-of-the-box. Similar to Vue's create command for quick and easy project generation, NuxtJS has its own command, create-nuxt-app. It also includes URL routing, Vuex, and static asset handling.

NuxtJS automatically renders each page on the server-side while allowing Vue.JS to handle interactions in the browser. This includes interactions with the Vuex store and transferring the current state to the browser. A special lifecycle method, fetch, is provided, making AJAX calls easy regardless of whether the request was on the server-side or the client.

​

NuxtJS Has Many Useful Extras

Concerned about transitioning the old site to the Nuxt version? Check out @nuxtjs/proxy, which will allow you to use Nuxt while serving your pages of choice straight from the old site.

Not sure how to go about implementing authentication on the front-end? @nuxtjs/auth will make that easier. The user data will be made conveniently available to any component by placing it in the Vuex store.

Wanting to make your app a progressive web app, possibly later down the road? Nuxt PWA will help with that.

Furthermore, you have the ability to work with TypeScript.

Besides NuxtJS-specific extras, nearly all the great components from the Vue.JS open-source community are available.

​

Summary

Modern JS approaches to front-end development are essential as is search engine optimization. The usefulness of Vue.JS makes Nuxt.JS an excellent choice when it comes to getting the best of both worlds.