Next JS SEO

Next.Js is an open source framework built on top of React that is often leveraged for Search Engine Optimization purposes. React is a framework used primarily for building front-end user interfaces in the form of single page applications (SPAs). SPAs were a great improvement on user experience (UX), and in many cases developer experience as well. 

React offers the flexibility of handling DOM rendering, routing, and state management all on the client. The declarative and intuitive tooling of React is popular among devs, and users were in turn presented with websites and web pages that felt more fluid, interactive, attention grabbing and dynamic. That’s great news! So what’s the problem? Well, the issues that arise from the React SPA model are multifaceted, and mostly related to SPA SEO and google search. Rather than attempting to squash an explanation into a tiny intro paragraph, let’s take a closer look at the details of search engine optimization within a single-page application, and how NextJs addresses each search engine problem in turn.

TL;DR: Next JS SEO Optimization & Quick Links

How NextJs Improves SEO for React SPAs

The following is a summary of common search related issues that arise with SEO for React SPAs, followed by the associated solutions offered by the NextJs framework.

React SPA | Overview of SEO Related Problems

Empty HTML Shell at Initial Page Load.

On the client, React works by injecting Javascript into an otherwise empty HTML page. This means that when the client requests a page, let’s say a homepage, that’s all they get; a blank canvas. After the blank canvas arrives, only then is the Javascript file(s) requested and sent to the client, which ‘paints’ your empty canvas with the rest of the content that makes up the page.

Bloated Javascript Files

The Javascript files needed to load the SPA are typically large and cumbersome files due to the complex nature of essentially building an entire website from code. Developers have made great progress optimizing these bundles, but the inherent nature of the issue makes it a tough optimization problem, especially in the context of search engine optimization. Simply put, there’s just too much going on and the bundlers can only shrink files so much.

Slow Initial Page Load

The previous issue of bloated Javascript files results in slow page loads, which amounts to quite a few poor SEO metrics. Important speed measurements such as first contentful paint (FCP) and largest contentful paint (LCP) suffer, as will your Google rank.

Poor Crawlability

When content isn’t presented fast, the result is a website that simply cannot be crawled efficiently by Googlebot crawlers. Google has improved its crawling software in recent years, allowing it to wait on the Javascript to finish loading before initiating the crawl sequence. However, these changes have proven to be unreliable in practice, resulting in long delays in indexing new content on most SPA websites and poor search engine optimization.

Also, it’s important to remember that other smaller search engines haven’t even begun tackling the problem of waiting for large Javascript files to populate the DOM, compounding the issue of accessibility, crawlability and indexing even further.

NextJs | Overview of SEO Related Solutions

No More Empty HTML Shells

NextJs doesn’t send an empty HTML shell for the initial load. Instead, a combination of other techniques are used to ensure that content is always served at initial load, resulting in faster first contentful paint and other important SEO related metrics.

Option for Either SSG or SSR

Static site generation (SSG) and server side rendering (SSR) are combined to create high performance applications that still benefit from React tooling and the intuitive workflow developers have come to know and love.

Ability to Dynamically Import Components

When a website loads, all aspects of the page aren’t needed at once. NextJs leverages React to allow devs to dynamically load components on demand, allowing for the prioritization of content.

Built-in Image Optimization

A key web metric related to SEO is image size and quality. For improved search engine optimization, NextJs comes with an Image component that handles most image optimization issues for you, resizing and compressing images that are tailored for a preset group of screen sizes.

Enhanced Crawlability

Because NextJs always serves content fast, and never a blank canvas, Googlebot can happily crawl Next apps quick and easy. This results in fast indexing of content and better Google rank which means better search engine optimization.

Rendering for Every Occasion | SSG and SSR

Static site generation (SSG) and server side rendering (SSR) are the two pillars of NextJs. Let’s take a look at each and what they bring to the table as relates to optimal SEO performance.

What is SSG?

One could argue that the concept behind SSG goes all the way back to the inception of the internet itself. In the beginning, there were static HTML pages grouped in a hierarchy on the back-end. No fancy Javascript or CSS, no AJAX calls, just barebones HTML files that were served to the client.

This is static at the extreme, and doesn’t exactly apply to our more modern SSG conceptual model. However, the comparison is valid and can help understand why static site generation exists in the first place.

SSG refers to a process of website creation in which each webpage HTML file is generated at build time, rather than on a per request basis.

Builds can be triggered by the developer after making changes, or by hooks after a new piece of content is added to a linked CMS.

SSG Example

As an example, let’s say you own a blog built with NextJs and a headless content management system (CMS). When you add a blog post to the CMS, your website now has access to that new data. 

With an SSG implementation, a build command is executed after the article is saved, which creates an actual HTML file injected with the data from your saved blog post.

This static file is now ready to be served, either via a single server or via a CDN such as cloudflare, with no extra work to be done when a client requests it. It’s a fully completed HTML file, sitting there ready to go with all your content already inside. As you can imagine, this is highly effective for improving crawlability and overall SEO metrics. The content is just there.

SSG isn’t the End All be All

Although this technique is great for search engine optimization in less complex sites like blogs, it’s not so great for sites that rely heavily on a constantly changing data collection. Picture Twitter implemented with SSG; the website would constantly be generating static pages for every new Tweet!

SSG isn’t great for dynamic data, which is why NextJs also offers SSR.

What is SSR?

The history of SSR doesn’t quite go back to the web’s inception, but it has had an interesting evolution nonetheless. After static pages became boring and databases entered the scene, server side rendering allowed developers to create sites dynamically, injecting saved data from databases to help create a more user defined experience.

SSR refers to a process of website creation in which each webpage HTML file is generated on the server, real-time on a per request basis.

As an example, let’s again consider Twitter. When you login to your Twitter account, a request is made to the server. The server identifies who you are, retrieves content from the database relating to your account, and populates the page with all of the user-related Tweets and other content.

When compared with a client side SPA, SSR offers flexibility by offering the option to serve some content immediately, while selectively choosing which content can wait.

Combining SSG and SSR 

SSG and SSR both have their strengths and weaknesses, so why can’t we have a website that utilizes both? NextJs has made this a reality, allowing devs to specify whether a page is SSG or SSR with only a few lines of code.

Using NextJs, each page is represented by a page component, and within this component is where the React and Next code goes. Deciding whether a particular component is SSG or SSR is a simple matter of including a NextJs lifecycle method at the end of the component.

To create a static page, we include the getStaticProps() method.

To create a server rendered page, we include the getServerSideProps() method.

Simple right? Well, obviously things can get complex when implementing any data-driven architecture. However, it’s always great when an underlying principle can be explained in such simple terms.

Combining SSR and SSG with Deferred Loading

We mentioned earlier that NextJs allows developers to prioritize content, specifying which content can wait until other more important content is finished loading. This is an important feature for SEO, because it can often be secondary content such as modal boxes and images at the bottom of a page that slow things down and result in poor search engine optimization.

When dynamic imports are combined with SSG and SSR, we can then yield React in all its magnificent glory. This is what NextJs accomplishes seamlessly, offering developers the best of React and decent search engine optimization without worrying about many of the complex details of implementation.

Code Splitting and Bundling with NextJs

Deferred loading is accomplished by splitting up React bundles into smaller chunks of code that can be served on demand.

At a high level view, the steps could be described as follows:

1. A developer runs a build prior to placing the app in production.
2. The build tool and transpiler, usually WebPack and Babel, bundles all the React/Next code into a vanilla Javascript file.
3. The bundle is then broken down, or split, into smaller chunks of code to be served as needed.

React templates usually come equipped to handle steps one and two out of the box. However, things become a little more complicated when configuring step 3, which is why NextJs comes with the next/dynamic library to streamline the process.

NextJs Image Optimization

No conversation about SEO is complete without the mention of Next Js image optimization. You’d be hard pressed to find a site that doesn’t use images in some fashion, and Google is pretty picky about how these images are served.

According to the Google developer docs, in terms of search engine optimization, Google considers everything from image file size and placement to proper context and URL naming convention. The NextJs Image component can’t help with everything, but it certainly helps with proper image formatting.

When an image is imported via the NextJs Image component, it is automatically compressed to the highly efficient webp formatting.

The image is made available in multiple sizes to be served depending on screen resolution in order to achieve optimal page load speed.

This is awesome for search engine optimization! NextJs scores yet another point for enhancing SEO metrics.

Handling metadata with NextJs

For any site built with the goal of organic discoverability, it’s important to consider how your team plans on handling metadata maintenance. NextJs helps facilitate this by offering components for maintaining the head tag, as well as sitemap and robots files.

We won’t go over these SEO related topics in detail here. If you’d like to learn more, head over to our comprehensive write-ups in the links above.

NextJs is an Abstraction of React 

When dealing with frameworks on top of frameworks, it’s important not to lose sight of all the abstraction going on. React is a framework that abstracts a ton of web development features, and NextJs is a framework that abstracts much of React.

React is capable of doing everything NextJs does, if you’re willing to put in the work. The name for SSR and SSG in the React world is isomorphic React, which is a fancy way to say that React can be coded in much the same way regardless of the environment (browser, server, etc.).

Many developers opted to stay away from isomorphic React because of its complexity, which in many ways led to the ubiquity of client-side SPAs and the subsequent SEO problems.

NextJs simplifies the implementation of isomorphic React, offering developers an easier way to code SSR and SSG React apps and less search engine optimization related problems.

NextJs SEO | Overview and Concluding Thoughts

Using NextJs to build websites allows developers to leverage React and all of its great features in a way that doesn’t compromise SEO performance. By implementing isomorphic React and streamlining the process of creating an SSG and/or SSR solution, developers and clients get the best of both worlds.

NextJs is more than just a tool for improving SEO metrics and Google rank. However, when thought of in the context of search engine optimization, it becomes apparent that Next is a great tool for building websites spanning across multiple industries.

Where to go from here?

NextJs can pretty much handle whatever we throw at it. In the ever evolving world of SEO, it’s comforting to build with a framework that keeps up with the pace of these shifts and curves.When a framework is built that can efficiently handle such a broad spectrum of projects, it’s worth taking note. We recommend reading about React and NextJs on our blog, and diving into the NextJs world with confidence!