Hakan

Feb 17, 2022

Next.js - The React Library Your Project Needs

When React JS came along, it was a perfect fit since we were naturally using JavaScript on the front and back-end of our clients’ applications. So as React JS has developed and become almost de facto for building website front-ends, our heads were turned by the benefits of Next.js.

Server Side Rendering (SSR)

React components that make up the user-facing part of a website are all initially rendered on the server side. This means that once the HTML has been delivered to the client (the user’s browser), nothing else needs to happen for the user to be able to read the content on the page. This makes page loading times appear much faster to the user.

SSR also gives the benefit of an out-of-the-box, indexable and crawlable website, which is essential for Search Engine Optimisation (SEO) as the client side javascript does not need to be executed to see the page content. Essentially, our clients benefit from improved technical SEO. 

Automatic code splitting

Next.js is clever enough to only load the Javascript and CSS that are needed for any given page. This makes for much faster page loading times, as a user’s browser doesn't have to download Javascript and CSS that it doesn't need for the specific page the user is viewing. This increases performance as there is less for the user’s browser to download and the user benefits from seeing the page content quicker.

Hot Module Replacement

This is less important for the end users of an application but very important for developers. HMR allows developers to see any changes they have made during development, live in the application as soon as they have been made. However, unlike traditional "live reload" methods, it only reloads the modules that have actually changed, preserving the state the application was in and significantly reducing the amount of time required to see changes in action. Ultimately, the positive impact for our clients is that it takes us less time to develop because there are development efficiencies to be gained.