When to switch to Next.js

Next.js is an up-and-coming web development framework that leverages both server side rendering (SSR) and React server components (RSC). The framework boasts many different benefits from faster performance to improved search engine optimization (SEO). It certainly appears that Next.js will be the next big thing to take the web development world by storm, but timing the switch to a new framework is always a challenging decision. Move too early and you risk adopting before the technology is robust and proven, move too late and you could be left in the dust.

What is Next.js and why is it the next big thing?

Next.js is an old idea made new and done excellently. The vast majority of its benefits come from its extremely efficient implementation of server side rendering utilizing React and RSC. Those who have been in the industry a long time or who have worked on more archaic systems will know that SSR used to be the industry standard for building a website. Both static personal websites and dynamic enterprise websites were made in this fashion before different options (like jQuery) were developed and adopted. I’ve personally had some experience with both PHP and Java JSPs, but always viewed the SSR style of these frameworks as an unfortunate relic of the early internet. It wasn’t until recently that I started to reassess these beliefs with the rise of frameworks like Next.js.

One of the simplest ways to contrast the difference between applications using SSR and modern single page applications (SPAs) is to think about where and when the loading happens. SPAs struggle with long initial load times since the JavaScript and CSS powering the entire application must be loaded with the initial request to the server. SSR applications usually have long load times when the user switches between pages since each page must be rendered by the server and returned to the user as pure HTML and css. The appeal of a seamless user experience with highly reduced load times while navigating within a website was one of the key reasons for the rise of SPAs and frameworks like React and Ember.

Enter Next.js attempting to be the best of both worlds. By default the framework uses server side pre-rendering to create the HTML for each page and return it just like many old SSR frameworks did. However, Next.js includes the flexibility to choose the most appropriate rendering method on a page-by-page or even component-by-component basis. This flexibility along with many optimizations to ensure that HTML is generated on the server as efficiently as possible are the foundation of what makes Next.js so powerful and appealing. Some practical benefits of offloading some or all work to the server include:

• Enhanced security — Moving logic to the server and only returning the resulting HTML keeps your code private and prevents exposure to bad actors.
• Search Engine Optimization — React and SPA’s generally struggle with SEO and web crawling due to their dynamic nature. Next.js allows more info to be fetched quickly from the server by a scraper or search engine.
• Caching — Allowing individual pages to be cached across multiple levels of the client-to-server request chain gives noticeable performance improvements.
• Initial load and paint — The Next.js docs explain this in great detail, but practically it means that the initial load of a website contains more relevant information in less time. An application no longer needs to spend a long time requesting data and showing the user nothing but a loading spinner.

The view from inside a small climate-tech startup

As part of the engineering team at Singularity Energy we have begun considering a switch to use Next.js as we look to the future of our platform. We have the benefit of being a small and agile company. It’s likely much easier to make a change like this in our codebase than it is for engineers at large enterprise companies. We also have regular opportunities to build new platforms and solutions as we grow and serve more customers. While our stack hasn’t changed much in the few years since the company’s founding, the continued growth of Next.js presents an exciting new opportunity that myself and the engineering team are eager to peruse. Another member of the team and I have both taken the time to research and learn the basics of Next.js, and an adoption within the company feels likely in the coming year.

When is the best time to switch?

The most important point to consider when attempting to answer this question is that Next.js is still in heavy development and regularly undergoing large changes. For example, in October of last year the framework updated to version 13 which included a default implementation of RSC as well as a beta version of the App Router which is now recommended for all new Next.js development. It wasn’t until May of this year that the App Router was declared stable and production ready.

Virtually any piece of software will undergo large changes throughout its lifetime. React itself had been widely used for years before functional components were introduced and completely changed the way developers write React applications. It’s not necessarily scary or bad that Next.js has recently had some large foundational changes. These changes are normal and healthy for frameworks, especially when they are early in development. However, it’s clear that things are still changing rapidly within the framework and that someone adopting it now should expect to continually follow and keep up with those changes.

All that being said, there has been no shortage of companies and developers ready to dive into Next.js recently. The framework is now broadly used and continues to gain momentum every month. I believe that this is a fundamental, key update to the way web development is done. I also think that it will gain mass adoption in the coming years. All things being equal I think that now is a great time to begin the process of adopting Next.js.

Interested in checking in on how the adoption process goes at Singularity? Do you think I missed some key considerations to framework adoption? Email us! We’re always hoping to make connections and grow 🌱