Learn how Next.js improves SEO

Esteban Munch Jones

Published in

Eincode

6 min readMar 18, 2021

Resources:

Full Course: https://academy.eincode.com/courses/next-js

What is Next.js?

Next.js a JavaScript framework for building SSR (Server Side Rendering) applications, built on top of the popular React.js library.

Being a framework means that it’s got its own tooling, so, for example, there’s no need to add a router library because it’s already baked in. This is a great advantage over React, when we have to import many libraries to get the features for an app, with the overhead of version compatibility between them.

What’s the main difference with React?

The main difference is that the HTML content is rendered on the server when using Next.js, and when using React, it’s rendered on the client-side, which is the browser.

Rendering the app HTML content on the server or the client brings some differences that can impact the success or failure of a project on production, namely: discoverability and speed.

Discoverability

Let’s imagine that you, as the lead developer, finish a React app for hotel reservations in the US that is meant to be shared via a domain name, let’s say, smarthotel.com. After deploying it to that domain name, people struggle to find it on Google search or other search engines.

The above problem happens to many developers when they finish a React app, and then, when deployed, it has poor SEO.

What is SEO?

It stands for Search Engine Optimization, which is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.

When people look for your app on a search engine through one of its keywords, like ‘hotel reservation in the US,’ the smarthotel.com app should appear on the search results.

So, people interested in making a hotel reservation are accessing the app through a search engine, which is quality traffic through an organic search result.

But, how do search engines sort out the results?

They use bots to crawl each website on the web, indexing it. The indexing considers many factors, and one of them is the quality of the content that can be found in the HTML shipped to the browser.

Device hardware and internet speed

In React, as already mentioned, the rendering happens on the client-side, and this process relies on two things: the hardware of the device used to load the app, like a phone or a laptop, and the internet connection.

Let’s talk about the hardware: the processor and the RAM are used to execute the JavaScript code shipped to the browser, so having an old phone makes this task slow, with the risk of increasing bounce rates, which happens when users abandon the app without interacting with it.

In countries like the US or regions like Europe, the device speed wouldn’t be a problem because people have good phones, but it is a problem in other parts of the world.

So, it’s important to understand the target audience and see their limitations regarding their hardware when choosing a technology when building an app,

Internet speed is another factor that has to be considered when people are accessing our app. In rural areas, the phone connection is 3G in the best-case scenario, and if your app relies on APIs that are fetched on the client-side, this leads to a drop in the app loading times.

React vs. Next demos apps

Enough of theory; let’s see the HTML rendering differences in practice. We’re going to build a simple app with three pages: Home, About, and Contact, and each page has its own unique content. The app looks like this:

You can find the GitHub repos here:

The instructions for cloning and running them are included in their GitHub readmes.

React demo

A React app is a bunch of JavaScript, HTML, and CSS files shipped to the browser, and then the app is rendered on the client-side once the files are loaded in the browser.

Exploring the code:

The file structure of the folders and js files are:

./App.js./Layout.js./Home.js./About.js./Contact.js./index.js

Let’s now take a look at some files inside this React demo app:

Let’s take a look at what’s shipped to the browser on the index.html file of a basic React app by viewing the page source. To see the page source, right-click on the app in the browser, and then select ‘View Page Source”.

Then, we can see what’s inside the HTML file that is shipped to the browser.

Here, we can see only <div id=”root”><div>, which is the HTML element React uses to render all the HTML content of the app using JavaScript.

So an empty div doesn’t seem much content for a website. The thing is that the content is displayed after running the JavaScript files in the browser, and this is a thing search engine crawlers don’t like, so the indexing is not favorable for React apps.

So, let’s keep this in mind: search engine crawlers like seeing HTML content without running JavaScrip files.

Next demo

If we build the same app using Next, and we see the page source, we find out that we have each page's HTML content. Here is the content of the Home page:

If we view the page source of each page, we’ll see that the content is there.

What does the Next code look like?

Let’s first see how the folders and js files are structured:

components-->layout.jspages-->_app.js-->index.js-->contact.js-->about.js

The routes and the components rendered for each one are defined based on a file structure.

Key Concept: The routes are defined by the name of the files inside the ‘pages’ folder (we can’t change the name of this folder).

So, for the route ‘/’, the component inside ‘index.js’ will be rendered, and for the route ‘/about’, the component inside ‘about.js’ is rendered, so you get the idea.

Let’s see some code of this Next demo app:

As a side note, in React, to define routes and components, the ‘<Route>’ component from the ‘react-router-dom’ library is used instead, and there’s no restriction regarding where to place components, folder-wise.

Conclusion

Benefits of using Next:

-Improved SEO because search engine boots see HTML content.

-Improved performance on low-end devices because less JavaScript computation is done on the client (the browser)

-Improved loading times because the app is already pre-rendered when it reaches the browser

When to use Next.js over React?

When none of the above benefits matters to your app.

This case could be an app used as an internal tool in an enterprise, like a dashboard. This kind of apps is usually served in private networks and shared only between employees, who might reload the app once a day.

For the rest of the cases, use Next.js.

You can learn more about Next.js and create your own portfolio app at https://academy.eincode.com/courses/next-js