What is NextJS?

It was created by Vercel, and unlike React, which is a JavaScript library for building interfaces, NextJS is a React framework. Therefore, it adds different functionalities and already established patterns for your development.

Lib vs Framework?

To quickly summarize the differences between a library and a framework: with a library, the developer has more freedom because the base is more flexible, giving them more control. On the other hand, a framework has a ready-made or predefined structure to use and follow during development. Of course, this doesn’t necessarily mean that one is better than the other; they are different tools with different purposes.

What is the purpose of NextJS?

The framework was initially built with two main objectives: to improve the performance of React applications and to solve a significant headache caused by the “Era of SPAs (Single Page Applications)”—the problem of indexing in search engines, also known as SEO (Search Engine Optimization).

Indexing Problems in React

To better explain the solution NextJS brought to SEO optimization, it’s necessary to understand the current scenario created by React, which came precisely to solve the problems generated by itself. How do the applications we call SPAs (Single Page Applications) work today? The structure involves a classic client-server communication where the client is our browser (shown in the bottom left corner). Using React code, it generates our JavaScript bundle to display specific information on the interface. This dynamic information is obtained via an API request (Backend), which returns all requested data, whether it’s new or has been changed. In the image example, a list of users is requested, and the API returns the response in JSON format. Then, the entire interface is generated to list those users, which the end user will see.

The problem with this methodology is that the page becomes entirely dependent on JavaScript to generate the content. Since it is the key to generating the HTML containing all the page information, when a search engine or crawler tries to index a page made in React, it usually doesn’t wait for our application to load the JavaScript, make all API calls, and construct the HTML of the entire page to do this work. In other words, the search results will either be empty or missing the relevant information needed for our application to be indexed on Google properly. Depending on the application, this can be a significant problem for the growth of a product. For example, an e-commerce site or a real estate sales website would obviously benefit greatly from search engines. Ideally, when someone searches for a product or property, your product should appear as one of the top results in the search.

The Solution: SSR (Server-Side Rendering)

To generate the entire page for the browser, NextJS uses a Node.js server, which acts as an important intermediary within this flow shown earlier, responsible for rendering everything and returning it to the client fully ready. So, the change in the flow is that now, between the client and the server, we have NextJS, which receives the client’s request, takes that React code that will make all the API calls, and then assembles the content itself, i.e., all the HTML, CSS, and JavaScript, and delivers it fully to the end-user’s browser. This way, when the page loads in the browser, it already loads with all the content that we previously expected the JavaScript to execute.

For indexing purposes, this is an excellent solution, as search engines will always index the data that was previously only generated dynamically after executing JavaScript code. This behavior is called Server-Side Rendering. The choice of Node.js, obviously, is because it natively understands JavaScript.

Some Examples of Sites Using NextJS:

• Vercel
• Twitch
• TikTok
• Magazine Luiza