As a digital design and build agency, we have been using Node.js since its very inception. Having identified it as a game changer for us, it has been pivotal in allowing us to deliver highly scalable, data intensive, real time back-end services to power the websites and apps for many of our clients including The Times, Riot Games, The Wall Street Journal and many more. A laser-like focus on speed and performance has always been a guiding star for us. 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.

So first up, what is Next.js?

Quite simply, Next.js is a React framework for developing single page Javascript applications. The benefits of this framework are numerous, both for our clients’ applications as well as for our development team. The more we, as users, interact digitally, the more impatient we become as our expectations are not met by websites and apps that fail to load within milliseconds. Technology decisions play a large part in being able to deliver highly performant, scalable, successful applications and as such, we have started using Next.js for a number of reasons; for the most part related to speed and performance. So what are the benefits specifically?

Photo by Chris Liverani on Unsplash

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.

If you are wondering what the difference is between Server Side Rendering and Client Side Rendering, this is a great article to read.

​Rendering the same components on the server side as on the client side (universal rendering) means that development time is reduced as we can build our React components once and Next JS takes care of everything to do with re-rendering those components in the user’s browser. Developers can just concentrate on building components and not have to worry (too much!) about which environment a component is being rendered in.

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 (HMR)

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.

In summary, the primary benefits of Next.js are:

• Improved development process = cost and time benefit to our clients
• Improved performance = faster applications
• Improved SEO = more indexable, SEO friendly applications

If you want to find out more, or are looking to outsource development of a tailored application, call us on 01923 261166.