Introduction

Next.js is a JavaScript framework, within which the React library works. It could be used to develop static websites easily as it’s able to do this out of the box. However, nowadays it’s hard to find a website without any interactivity, and what Next.js is mainly appreciated for is the ability to preliminarily render the pages of dynamic websites on the server side. In this post we’re going to tell you how the developers have arrived at the idea that Next.js is necessary, why search engine results depend on the use of this framework, and when the team cannot do without a savvy JavaScript developer. 

Next.js: a framework or a library?

Sometimes the same development tools are called differently: either frameworks, or libraries, or environments, or platforms. What they have in common is that all of them are written in the program code. But let’s divide the frameworks from the libraries using React and Next.js as the example, especially considering that Next.js will be the focus of your attention in this post.

Operation of a library follows the developer’s commands who can start and stop the function at will. The framework, by contrast, assesses the situation and decides what to do next. This is their main difference, which is called the inversion of control. It’s similar to deciding between the private car and a taxi during a snowfall – you can either sweep the snow from your car first and then look for a route to work which is more or less free of traffic jams or have a warm and clean car with the driver who knows all detour routes and suggests turning on your favorite radio.  

React is a private car, a library with its own advantages. If we want to develop a website in it, we’ll have to call in individual tools for such tasks as page navigation, theming, tagging, webp files generation, SEO. At the same time, there exists the Next.js framework with the functionality covering all these tasks. Next.js contains React and expands its functionality. 

The world before and after single page applications

For a good while the websites used to present simple content: texts, pictures, gif images, audio, video. In layman’s terms we can describe the path of content to the user’s browser something like this: the user types in the website address or clicks on the link, the browser sends a query to the server via the HTTP protocol, the server passes the information in the form of an HTML document, CSS, and JavaScript files to the browser, and the browser creates the page based on this. Such websites are called static. A promo site, a landing page or a product catalog are examples of static websites. 

With time, the web grew more complex. Buttons, loaders, photo galleries, data submission forms, filters, search bars, likes, and other interactive elements appeared on website pages. Their behavior is controlled by JavaScript code. In the technical language, such websites are called dynamic. The need to accelerate the work on dynamic sites made Facebook developers to issue the React library, while Google’s team suggested Angular and Vue.js. 

RELATED: Building a Single Page Application with Vue.js [Step-by-step guide]

These libraries became the ideal tool to develop single page applications (Single Page Application or SPA), the concept of which emerged at the beginning of 2010s. When launching such an application, the browser loads a chunk of code which is responsible for painting only the page the user needs at the moment, and other data is downloaded from the server depending on the user’s actions. The data is downloaded using the AJAX method developed specifically to build interactive user interfaces. The server answers the AJAX queries using more light-weighted JSON files instead of HTML documents.

All this makes the web page work quickly and so smoothly that the user has the impression of staying on the same page whatever he/she is doing.

However, while SPA users enjoyed the speed of the application and various interactive tricks, the application owners and developers were dealing with the issue of poor indexation of such applications but search engine bots. The indexation is poor because the browser loads only the initial static HTML page of the single page application while the rest of content comes from the server based on the JavaScript request which is not supported by search bots. As a result, the bot sees an empty space for several seconds until the browser loads JavaScript.
 

And so Next.js comes

In 2016, ZEIT – now known as Versel – presented the Next.js framework to the development community. It offered a way to solve the main issue of SPAs written in React – poor SEO. And considering that you need to see your website at the top of results of keyword query in all popular search engines (or at least on the first page of the search engine results), this is your problem, too.

Next.js is popular and widely used as it’s able to paint the web page before it appears on the user’s screen. This can be done in three ways: Static Site Generator (SSG), Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR). In this post, we are interested in SSG and SSR most of all.

According to the SSG method, Next.js builds static pages and saves static HTML, CSS, and JavaScript files on the server so that it could send HTML pages based on the browser request. This is a good way to generate static websites such as promo sites, landing pages, and catalogs, where the content is not updated very often.

SSR is its alternative. This method implies that the browser sends a request to the server, and the server, in turn, sends a request for necessary data to the backend, then builds the page using this data and passes it to the browser in the ready form.

However, the page doesn’t respond to the user’s actions yet. To make this possible, the browser has to download the JavaScript files and run them. In a split second the user sees the interactive website with pages scanned by the search bot. It’s relevant for preliminary rendering as such, not just for the SSR method.

SSR reduces the load on the user’s device. But here the energy conservation law comes into operation: if the load on the user’s device reduces, the server load increases. Despite this, you need SSR if you want your users to see only the updated content on your React website and are ready to pay for additional server resources.

Let’s show the website Influize developed by ADCI Solutions as an example of Next.js single page application using the server side rendering. If you spend 10 seconds of your time looking through the site pages, you’ll notice that the page transitions are almost contiguous, almost as in a mobile application. You can find more details in our case.      

Supplementary SEO improvement methods

No matter whether your team uses Next.js or not, you can’t forget about the classical methods used to attract visitors to the site or web application. Among them are the following: 

• Meta tags. These are not the tags we use under the posts in social media though their ultimate task is similar – show your content to those who can be potentially interested in it. Meta tags form part of the code and tell the search bots what data exactly has to be shown in the preview on the search engine page. The Head component is in charge of placing meta tags in Next.js.
• Performance metrics. It’s important for search engines to know how much time elapses between the page download start and the appearance of first content on the page, as well as the time it takes to paint the most part of the content. The first metric is called the First Contentful Paint (FCP), the second is the Large Contentful Paint (LCP). 1.8 sec is a good FCP indicator, while waiting for more than 3 seconds would be equal to losing users, traffic, and profit. Next.js can measure the values of FCP and LCP using the function reportWebVitals.
• SSL certificate. Have you ever noticed that the url of some sites starts with HTTP, and that of the others – with HTTPS? In simple words, this means that the latter use data encryption protocols to transmit data, while the first do not. In 2014 Google announced that it will rank only the sites sending data via the HTTPS protocol. To this end, the website needs to have the SSL certificate. Though it’s not very expensive for a business, you can get the SSL certificate at no charge by deploying the application on a cloud platform that uses the services of the free certification center Let’s Encrypt.   

When do you need Next.js and Server-Side Rendering for your project

Each technology is good at its own time and place. This is why if your website is dynamic, it must start quickly and, most importantly, be scanned by the bots of such search engines as Google, Yandex, Bing, Baidu, and DuckDuckGo, the technology stack can’t do without Next.js. A developer who knows JavaScript and React.js will need less time to master the Next.js framework as compared to a novice.