As a web developer, I pay attention to current trends and technologies in web development. React stood out to me in the last few years as a framework for building interactive user interfaces. Its component-based architecture and virtual DOM make it effective for building efficient and scalable web applications. I have used React in many of my web development projects and found it to be versatile and user-friendly.
I became interested in Next.js when trying to make my web apps, built with React, more SEO-friendly. I looked into it a few months ago and decided to give it a try. Now, I'm ready to share what I've learned during the development process. The advantages, disadvantages and differences between Next.js and React.
What is Next JS?
Next.js offers features for building server-rendered apps. This leads to better performance, improved SEO, and faster initial load times. It supports server-side rendering (SSR) which renders the initial state of the app on the server and updates content on the client side. It also supports static site generation (SSG), which creates static pages during build time.
Next.js also has image optimization built-in. This optimizes images on the fly, reducing file size and improving load time. This feature is available out of the box with Next.js, making it easy for developers to optimize their images.
It also has, in the development environment, built-in support for hot module replacement, allowing developers to see their changes in real-time.
What is React?
React Components are the building blocks of a React app. They handle rendering, accept inputs (props) and maintain the internal state. They can be composed to create a more complex UI.
State in React is data or variables that determine a component's behaviour and render information to the user. It can be modified and updated, causing the component to re-render and update the UI.
Next JS vs React: What's the difference between the two?
Next.js supports all core aspects of React, like Components, JSX, TypeScript, and React Hooks. But, it requires a server running NodeJS to host the web app. This server should be sized based on your audience. A React bundle created with "Create React App" can be hosted anywhere, without a specific server's requirement.
The main difference is server-side rendering. React applications can use ReactDOMServer but it doesn't provide the same positive developer experience as Next.js.
Another key aspect that sets Next.js apart from React is the way it organises the codebase. Next.js combines the server and client code into one bundle and organises the routes in a more structured manner through the use of folders and files. When using "Create React App", instead, you'll have to choose and install a library to handle the routing.
Creating pages in a Next.js project is simple. Add a file to the pages folder and it's available as a route that can be linked in the header component or any other page. For example, if you add the file "my-blog-post.js" inside the "pages" folder, your page will be accessible under "https://yourdomain.com/my-blog-post". Some React developers find that it simplifies the development process and makes the project more manageable.
Next JS vs React: Server-Side Rendering vs Client-Side Rendering
Server-side rendering: When a client requests a webpage, the server prepares HTML by getting data from a database and sending it to the client. The browser then uses this HTML to show the page. No extra requests are needed. It's fast and SEO-friendly.
With a basic React App, client-side rendering is achieved. With Next.js, both server-side and client-side rendering can be achieved. I will use images to better illustrate client-side rendering in a React application and server-side rendering in a Next.js application.
In a typical Next.js application, when a specific URL is requested, the client sends a request to the Next.js server. The server then executes backend logic to retrieve data from the database or external API, and constructs the final HTML using React on the server. However, this is not the only way it functions.
Next.js also allows for static generation of pages which are generated during the build process on deployment and stored in a cache folder. When a request is sent, the server sends back the cached version.
It's also possible to combine all three, Static Site Generation, Server-Side Rendering and Client-Side Rendering in a Next.js app, as I have done so in a personal project.
Next JS documentation
I will not compare Next.js documentation to React documentation. It's clear that because Next.js is a framework built on top of React, the decision to use Next.js should not be based on how the two documentations differ from each other. If you choose Next.js, you will still need to refer to the React documentation.
The Next.js documentation is well-organized, clear and easy to navigate. I found all the information I needed and rarely had to search elsewhere. It's divided into several main sections, such as "Getting Started," "Basic Features," "Routing," "API Routes," "Advanced Features," and "Migration from Other Libraries or Frameworks." In the "Basic Features" section, you'll find everything you need to know to create pages, fetch data and achieve server-side rendering. Additionally, if you have existing projects created with "Create React App" and "React Router," you'll find instructions on how to migrate them to Next.js.
In summary, my experience using the framework and following its documentation was positive. I am confident that you can build a complete Next.js application in less than a day. For more information, I recommend checking out the Next.js documentation.
Next.js vs React: Comparing performance
On the other hand, Next.js, which utilizes server-side rendering, prioritizes overall performance. The server constructs the HTML page with the necessary data before sending it to the client. This means that the initial load time may be slower, but once the page is loaded, the user can interact with the fully rendered page, which leads to faster performance as it doesn't need to fetch data on the client side.
However, in certain situations, Next.js may offer a significant performance boost. One example of this is when Next.js serves pre-rendered pages that were generated during the build process, this can lead to faster load times for the client.
As mentioned before, it's possible to implement a combination of all three type of rendering (SSG, SSR and CSR) in a Next.js application. This allows for flexibility and the ability to fine-tune for optimal performance.
Next.js vs React: SSR and SEO
On the other hand, Next JS ensures that all crawlers, including search engines, are able to correctly render the content of the page.
One of the advantages of using Next JS is the ability to generate a sitemap for dynamic content, making it easier for search engines to crawl and index the website.
There's a good artcile on ahrefs, if you want to find out more about React SPAs and SEO.
Next.js vs React: Sharing URLs on social media platforms
In contrast, a Next JS app allows for setting unique OpenGraph meta tags for each page, which will be properly retrieved by social media platforms. This is an additional benefit of using Next JS over a standard React application.
Next JS popularity among web developers
Many developers consider the popularity of a framework when deciding to adopt it. This can be for various reasons. For example, when React became popular, many developers began to use it, leading to an increase in companies building products with that technology. Now, React developers are in higher demand than those using other frameworks. Additionally, developers may only want to adopt a new framework when it is considered mature enough, and popularity can be, but not always, an indicator of maturity.
The image above, taken from Google Trends, illustrates the current popularity of NextJS in Google search.
Upon exploring the number of users who have starred NextJS on Github, I was quite impressed with the results. The framework has amassed an impressive amount of almost 100,000 stars, which is quite remarkable as it is half the number of stars that React, a similar framework, has on Github. This serves as a testament to its growing popularity among developers. To put this in perspective, when compared to other popular frameworks such as Angular, NextJS has significantly more stars with Angular having only 86,000 stars on Github.
React and Next.js are both powerful tools for developers, each with its own set of benefits. React provides flexibility and freedom to build according to your preferences, and has a dedicated community. On the other hand, Next.js streamlines the development process with its built-in tools and conventions and a strong user community.
Consider using Next.js in your next React project if SEO and server-side rendering are important. It also helps handle high-traffic websites by generating static HTML pages.