Why Next.js

Let's talk about why you should use a React framework instead of just building a regular React application.

The problem of create-react-app

The first problem you can see is speed and performance.

Under the hood, create-react-app uses tools like webpack, Babel, ESLint, and other amazing projects to power your app, hidden from you behind a single dependency, making it easier to focus on your application itself. With CRA, you get a lot of configuration already in place for you and a folder structure for your application, so you don't have to worry about it. But there are some problems, precisely because they use client-side rendering.

With client-side rendering, when you make a URL request, your browser downloads a bare-bones HTML document, and all the content is entirely rendered in the browser with JavaScript.

Basically, all your application is sent down to your browser at the initial request. And then, React handles everything on the browser, like fetching data and rendering the views of your application depending on the route the user is visiting.

For example, with React, you have this HTML file with all your JavaScript dependencies and a single DOM element, which is the root of your application. Nothing else.

And then, when the client requests a page of your website, your browser downloads that single blank HTML page, loads all the JavaScript included and necessary to run your website, and finally, React renders your website's content by filling the HTML file.

Even if this kind of application is great because you don't have to refresh the entire page when having new data to display, the initial loading of your application can be pretty slow.

Your visitors have to wait for the JavaScript bundle to load and for the browser to build the DOM before any content is visible. Your visitors may see a blank page or a loading spinner while JavaScript is loading.

The second problem that comes with client-side rendering is about SEO.

With client-side rendering applications, Google has to run all your JavaScript code before it knows what's on your website and how to index it.

So it can take some time and delay your website ranking.

And, you don't even know if the Google web crawler will run your JavaScript the same way your browser is doing it.

Furthermore, your bare-bones HTML document lacks the keyword, description, and social media metadata necessary for search engine optimization and social media sharing.

React doesn't do this for you out-of-the-box. So you need something to help with that as well.

Why using a React framework?

One possible solution is Server-Side Rendering.

In contrast with traditional client-side rendering, in server-side rendering, HTML is generated and populated with all the necessary data on the server.

This process produces static HTML that does not require JavaScript to run on the browser.

In other words, your application will load much faster and will be interactive a lot sooner.

You will also improve your SEO because search engines can more quickly, reliably, and accurately parse your content and meta tags. This is because the page content is immediately available to Googlebot and any other search engine crawlers.

So server-side rendering addresses both concerns we have discussed so far with client-side rendering applications.

Hence, come Nextjs

With Next.js, HTML is generated at runtime each time a client sends a request to the server. Next.js is running on a Node.js server. And when it receives a request, it matches it with a specific page (or React component), requests the data from an API, a database, or a CMS, waits for this data, and then generates the HTML based on the received data and the React components and finally sends it to the browser.

you can also choose if you'd like a specific page to be rendered to static HTML at build time or use regular server-side rendering and generate HTML at runtime on each request.

This is pretty powerful because you can use the best of both worlds, SSG and SSR, inside the same framework. So you could build a website where you have, for example, the blog pages rendered at build time using SSG and render more dynamic pages of your website at runtime using regular SSR.

With Next.js, you can use any asynchronous or even synchronous data fetching technique, including fetch, REST, GraphQL, or even directly accessing a database. Next.js really does not care about how you do it. It's up to you!

Further benefits of Nextjs

Next.js lets you choose which pre-rendering technique you'd like to use for each page. You can create a "hybrid" Next.js app using Static Generation for most pages and using Server-side Rendering for others.

With Next.js, you get automatic image optimization, built-in internationalization, continuous analytics from real measurements, and you even have an all-in-one starter kit for e-commerce that you can use and fully customize.

In conclusion, we can see that Next.js is becoming the best React framework to actually build anything you want.