- September 10, 2021
- 4 min read
NuxtJS: Have your modern JS cake and SEO too
How NuxtJS addresses the challenge of building modern JavaScript applications that rank well in Google by rendering HTML that search engines index.
RISING COMPLEXITY
The Need for Modern JS
In short
- Modern JavaScript frameworks like React and Vue create complexity problems that tools like jQuery cannot handle, but these frameworks risk losing search engine rank.
- Search engines scan HTML only and do not run JavaScript, so server-side rendering runs JavaScript on the server to send more HTML to search engines.
- NuxtJS provides server-side rendering for Vue.js right out of the box, automatically rendering each page on the server while allowing Vue to handle browser interactions.
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.
RANKING CONCERNS
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?
SSR FRAMEWORK
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.
PLUGIN ECOSYSTEM
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.
WHY CHOOSE NUXT
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.
KEEP READING
Related Resources
Case Study
Custom Scheduling Platform for a National Specialty Pet Retailer
A new platform on AWS Lambda, API Gateway, and Aurora cut page load from 20 seconds to 1.5 and adds $800K a week in completed grooming appointments.
Read the pet retailer case study
Case Study
Custom Retail Storefront for Moda Operandi
The new site and mobile app launched, and first-year revenue beat the forecast.
Read the Moda Operandi case study
Guide
eCommerce Platforming Showdown: Saas vs On-Premise
SaaS and on-premise ecommerce platforms compared on cost, integration, customization, scale, upkeep, PCI compliance, and time to launch.
Get the white paper
