Next.js (Next) is a web-application framework that allows us to build server-side rendered react applications. It has built-in modules like easy routing and authentication. It has some advantages over a normal react application as well that help with performance and search engine optimization.
Next is different from what most people think of as a react framework, like create react app, which is a client-side rendered (CSR) javascript application. When you visit a page in a CSR app, no HTML is sent to the browser except for maybe some boilerplate HTML for the javascript to replace. However, in a server-side rendered (SSR) application like Next, each page's HTML is rendered before it is sent down to the browser, where the react application is still loaded into the runtime. The HTML it renders replaces the existing content, and the page is painted and is responsive faster. Then, when you navigate to the next page the framework will render it client-side.
Server-side rendering (SSR) is different from the Create React App (CRA) framework which is a client-side rendered (CSR) javascript application. When you visit a page in a CSR app, no HTML is sent to the browser except for maybe some boilerplate HTML for the javascript to replace. This is not always good. with search engine optimization (SEO), bots from sites like Google and Twitter don't use javascript and won't see the content.
However, in Next.js, each page's HTML is rendered before it is sent down to the browser, where the react application is still loaded into the runtime. The HTML it renders replaces what was already there, meaning the page is rendered and responds faster. Whenever the user navigates to another page in the application, it is loaded client-side, and the props for that component are loaded in automatically via the next framework.
One of the benefits of using Next.Js is that you don't have to write as many API requests. You can get your data in node on the server-side and pass it to the component as props when it is rendered by the server. This means that you no longer have to write nearly as many requests when building an application with a framework like CRA. Using an ORM like Prisma, you can easily make requests to your database in your component files. This can be especially useful in cases where you want to display content that is already stored somewhere, like a database or CMS, and are not worried about user-submitted data.
With many benefits provided out of the box and many more with official modules provided by the Next team, it makes sense why this react framework has taken off recently. If you are looking to build a frontend application with react and want good SEO, Next is a good choice.
Top comments (0)