Next.js; what is it and why do we use it?

 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?

 
Frustration with slow websites

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:

Comments

Post a Comment

Popular posts from this blog

Making open source JavaScript pay

Image
Money isn’t everything to the success of the most popular JavaScript frameworks. Or is it? Looking at the  2019 State of JavaScript report , something stands out: Money apparently can’t buy everything. Or, at least, not every major front-end and back-end programming framework is sponsored by a big company. Sure, we have Google to thank for  Angular , and Facebook gets credit for  React , but what about  Vue.js ? Or Gatsby? Or Next.js? While these (and other) open source projects do seem to suggest a future without Big Corps shoveling Big Money into open source, the reality is a bit more nuanced. For the developers looking to pay their way through open source, however, reality isn’t nuanced at all. For every Vue.js founder  Evan You making $16,000 per month with Patreon contributions , there are thousands of developers struggling to scrape together $16 for the important open source work they’re doing. [  Also on InfoWorld: 15 great alternatives t...
Read more

How artificial intelligence is making the education system more relevant?

Image
Digital learning solutions equipped with artificial intelligence are making revolutionary changes to the way education is imparted in students with varied interests and capabilities. When we think of artificial intelligence, there is a hardwired imagery of gigantic thinking machines working in sci-fi environment. This imagery often comes from the science fiction that we have been watching or reading since childhood. However, deep diving suggests that artificial intelligence is an advanced form of algorithm that empowers machines to emulate human behavior under real life situations. Today, there is no industry untouched by the ripples caused by artificial intelligence. Education sets the foundation of human behavior. Educational ecosystem is formed by knowledge base, teaching skills and experience, learning capability, and evolving teaching methods. Digital learning solutions equipped with artificial intelligence are making revolutionary changes to the way educat...
Read more

What Is Brutalism in Web Design?

Image
3   min read   Brutalism is a special breed of web design, working well for quirky, creative brands and individuals. However, this rule-bending design technique must be employed with care. Read this guide to find out how. Brutalism is one of those trends that seems to come and go in web design. It’s not because there isn’t much value in brutalist design. It’s more that it doesn’t always fit with the style and tone of the times.  That’s part of what makes brutalism so intriguing though. When most websites tend to fall in line and adopt the same basic trends from year to year, a website that doesn’t play by the rules can easily steal the spotlight.  You just need to know whether that’s the right kind of light you want to shine on the brand. Brutalism can sometimes come off as cold and somber. If it’s not properly executed or not used for the right kind of brand, it can send the wrong signals to website visitors.  In this guide to brutalism in web design, we’l...
Read more