React vs. Next.js

If you're not the reading type, you can check out my video that I made comparing the two frameworks here!

Here's a brief overview of my comparison between the two frameworks vanilla React and Next.js which is a React framework I guess. This overview would be useful for people who do not know what server-side rendering vs. client-side rendering is. It would also be useful for people who know the basics of React, but perhaps are not too familiar with Next.js, or people who simply have absolutely no idea about Next.js.

One Is Better For SEO

If you right-click on a page source that has been made by React you will notice nothing more than a bunch of JavaScript gibberish. Whereas clicking on a Next.js project you will see HTML. One of the core advantages of Next.js is that it is good for SEO. When a search engine crawls through a website, for example the React project, it will not get the necessary data it needs as it will only retrieve a JavaScript file. However with the Next.js application it can go through the proper information, such as the meta and headers and catalogue those details. So SEO is generally a core reason why some would consider choosing Next.js over vanilla React.

You can see a side by side example on the image below. These two page sources coming from two identical websites I had made, the left showing vanilla React while the right shows Next.js. Notice the HTML on the right side and the JavaScript on the left (click on the image if you need to enlarge it):

One Is Faster Than The Other

Another key factor - one which personally blew my mind at the time I discovered it, is speed. When using vanilla React combined with a backend API, such as Python's very own Django REST framework, a brilliant framework which I often incorporate into my own projects - I had found that when clicking on a page to both retrieve and load the data that it is slow and cumbersome. Why? Because it must go into the backend, load the application (which in Django's case would be hosted on Heroku, a platform that takes a minute to load the application when not in use for more than one hour), it then takes that data and populates it onto the frontend, the vanilla React program. All of this taking many, many seconds. Which in a world of fast speeds is just not very practical! Compare this now with Next.js. Using Next.js' very own create static props, when a project is deployed it builds the pages statically. This means that whatever data you have is built at deployment time and created like it would be a regular HTML page. Say for example I have a projects page. With Next.js, those pages have already been made when I deploy the website. So it doesn't need to go into the backend and retrieve anything, the pages are already there! Magic. The catch is these pages have to be updated every time there is a new page, as in, it needs to be re-deployed. There is a way around that however, with Next.js create server-side props. This updates information dynamically, so no more constant deployment. The catch is the pages will load a little bit slower than with static props, still much faster than vanilla React.

I hope you found this to be useful, it kind of blew my mind when first discovering the difference between the two. If you are reasonably new to React, this is something you should definitely look more into and consider.