Prerequisites

This article will end your worries if you constantly worry about SEO, no matter what your skill set. This post is aimed at developers and non-developers, but I suggest focusing on the implantation topics if you’re a developer and the concept topics if you’re skilled in other ways. Make sure to check the resources topic to learn more!

Outcomes

This post will help you:

1. Understand the concerns regarding modern front-end frameworks with SEO.

2. Know what prerendering is and how to implement it on a Nuxt.js app.

3. Know what server-side rendering is and how to implement it on a Nuxt.js app.

4. Learn about how your Contentful content fits into all of this.

Modern front-end frameworks and SEO: Are they bad for each other?

Front-end frameworks have reduced the effort and time required to build a web application from scratch to production-ready. However, because front-end frameworks use Javascript, content search engines like Google find it difficult to crawl these web apps. Search engine crawlers do what’s known as “indexing” your web application and, in certain situations, the likelihood of 100% indexing is low.

Complexity involved in rendering web applications

Complexity can be measured by the amount of Javascript and the time taken to load it on the kind of devices your audience tends to use the most. You can ask yourself a question like, “How long does it take X MB of Javascript to load on X device?” If the answer to this question is a value that is too high (more than 5s on PCs and 2s on mobiles), then you likely have poor SEO.

Performance optimizations in certain search engines

Search engine crawlers have a lot of websites and links to go through each day. To make this process efficient, search engine developers include certain performance optimizations that usually lead to uncrawled content. For example, Google’s crawlers have something known as a “crawl budget,” which is a serious concern when it comes to medium-to-large web apps.

You could assume that most search engine crawlers are not perfectly crawling web apps with a lot of Javascript (which is often the case when using front-end frameworks) and, as such, the results are not guaranteed. This is why you should take a look at Nuxt.js, and use prerendering and server-side rendering to get guaranteed results.

Understanding prerendering: Static HTML files

Prerendering is a method that has received a lot of attention in recent years, especially when it comes to web applications that have a serverless architecture. It is also known as dynamic rendering or client-side rendering.

Concept

The core of prerendering is to send all the users that visit your website a feature-rich Javascript website and send search engine crawlers a prerendered static HTML file(s) that is just enough to perform the necessary steps to index or crawl your website as a whole.

To do this you must identify a search engine crawler, then send all your HTML and Javascript through a renderer that will generate the static HTML file, which will then be sent to the crawler. Some very popular services help you do this — Prerender.io and Rendertron — but these aren’t always that flexible.

Implementation

Make sure to pick the correct option during the initial setup of the project when you run create-nuxt-app using either npm or yarn if you’re prerendering in Nuxt.js. When the CLI asks you for the rendering mode, select the Single Page App mode.

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name A test project
# The unnecessary questions have been collapsed
? Choose rendering mode (Use arrow keys) <--- This question
   Universal (SSR)
 > Single Page App <--- This option

Use the arrow keys to go through the options and the space key to select the option before hitting enter

This will generate a Vue.js project that you can simply prerender by running nuxt generate to receive a full static generated version of it. When you deploy your project, ensure that you insert nuxt generate as the build command and dist as the publish directory.

However, if you are dealing with dynamic routes (routes like /articles/:article-title), the page at the end of that dynamic route will not be prerendered because it is not possible to know what that route will yield. To ensure that these dynamic routes are captured, you must configure the generate property in nuxt.config.js.

For example, let’s say we have a Contentful content type called Articles. It contains two fields: title and body. We want to be able to view these articles with a dynamic route like /articles/:article-title, then you’d have to add a routes() function that fetches each article and creates an array of static routes that contains the article title.

Here’s how that code might look like:

import contentful from "contentful";
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";

const listArticles = async () => {
  // You can get both the space id and the token in the Contentful web app
  const space = "qwertyuiop";
  const accessToken = "xxx";

  const client = contentful.createClient({
    space,
    accessToken,
  });

  const { items } = await client.getEntries();

  return items.map((item) => {
    return {
      title: item.fields.title,
      body: documentToHtmlString(item.fields.body), // because "body" is a Rich Text field, we need to convert it to HTML
    };
  });
};

export default {
  generate: {
    routes() {
      return listArticles().then((articles) => {
        return articles.map((article) => ({
          route: `/articles/${article.title}`,
          payload: article,
        }));
      });
    },
  },
};

Developers tend to prefer prerendering over server-side rendering as it promotes a serverless architecture. There is still a possibility that your website may experience some SEO issues, but it is far less likely than if you didn’t use prerendering.

Understanding server-side rendering: Universal SPAs

Often referred to as the “traditional method” when it comes to ensuring the best possible SEO, server-side rendering is guaranteed to provide results if done right. Unlike prerendering, it’s generally challenging and requires a server, which leads to a higher cost. Regardless, Nuxt.js makes it easy.

Concept

The term server-side rendering is self-explanatory. It uses your webserver to rerender your web application when required so that you can serve static HTML files like you would when you do not use a front-end framework. The SEO benefits in doing this are very high, so why not use SSR for every web application? There are a few reasons why you should think carefully about which one to use.

1. The overall speed in rendering your website is lower.

2. The number of server requests might slow down the server if your web application is rich in interactions.

3. Investing on a server to perform SSR can be quite difficult if your budget is fairly low.

If you expect your web application to receive a lot of user-generated content that your web application’s SEO thrives off of (a blog, for example), then SSR is worth it.

Implementation

The process of implementing SSR with Nuxt.js begins with making the right choice when creating your project using create-nuxt-app using npm or yarn. Make sure to pick the Universal (SSR) option as the render method.

Developers tend to prefer prerendering over server-side rendering as it promotes a serverless architecture. There is still a possibility that your website may experience some SEO issues, but it is far less likely than if you didn’t use prerendering.

Understanding server-side rendering: Universal SPAs

Often referred to as the “traditional method” when it comes to ensuring the best possible SEO, server-side rendering is guaranteed to provide results if done right. Unlike prerendering, it’s generally challenging and requires a server, which leads to a higher cost. Regardless, Nuxt.js makes it easy.

Concept

The term server-side rendering is self-explanatory. It uses your webserver to rerender your web application when required so that you can serve static HTML files like you would when you do not use a front-end framework. The SEO benefits in doing this are very high, so why not use SSR for every web application? There are a few reasons why you should think carefully about which one to use.

1. The overall speed in rendering your website is lower.

2. The number of server requests might slow down the server if your web application is rich in interactions.

3. Investing on a server to perform SSR can be quite difficult if your budget is fairly low.

If you expect your web application to receive a lot of user-generated content that your web application’s SEO thrives off of (a blog, for example), then SSR is worth it.

Implementation

The process of implementing SSR with Nuxt.js begins with making the right choice when creating your project using create-nuxt-app using npm or yarn. Make sure to pick the Universal (SSR) option as the render method.

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name A test project
# The unnecessary questions have been collapsed
? Choose rendering mode (Use arrow keys) <--- This question
 > Universal (SSR) <--- This option
   Single Page App

Use the arrow keys to go through the options and the space key to select the option before hitting enter.

Nuxt.js will take care of the rest. Build your application as usual and call the Contentful API as you normally would. All that is left to do is run npm run build (the build command) and finally npm start to view your SSR web application.

Summary

Nuxt.js is such a powerful tool when it comes to enhancing SEO! Let’s take a look at what we covered:

1. Modern front-end frameworks make it easy to develop web applications, but search engine crawlers often perform poorly when it comes to the SEO of such web applications.

2. Nuxt.js allows you to prerender your web application so that search engine crawlers see a set of static HTML files, which does not require a server, and how to integrate it with the Contentful API.

3. Nuxt.js makes it very easy to server-side render your web application so that SEO is guaranteed, but requires a server and is often costly.

4. You can access additional resources in the Nuxt.js documentation, learn more about Javascript SEO basics, and use the Contentful JavaScript library.