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
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.
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.
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.
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