Graph of NPM weekly downloads for 3 common React frameworks

NextJS is a framework for React released back in 2016. Since then it has grown hugely in popularity with over 2 million weekly downloads, and major companies such as Netflix, Uber and Starbucks using it in production. Vercel, the company behind NextJS, raised $150m in Series D funding in November 2021 providing an overall valuation of over $2.5 billion.¹ We can understand this huge rise in popularity through looking at the major benefits to businesses provided by NextJS.

NextJS is great for SEO

SEO, or search engine optimization, is the practice of trying to increase your sites ranking in search results. In practice, since Google's share of the search market has stayed consistently over 80% for the last 10 years², this means increasing your search ranking on Google.

Businesses care about SEO because 'Organic Traffic' (i.e. visitors who arrive on your site through clicking on a result in a search engine) is one of the most valuable forms of traffic for a few reasons:

1. Conversion - High conversion rates for organic visitors (14.6% according to Hubspot compared to 1.7% for outbound leads³)
2. Trust - Increased confidence in your brand as customers know you are the best result based on their search term.
3. Cost - Other than the initial cost of optimisation there are no operational costs associated with a good search ranking

Even according to the biggest paid advertising brand in the world, Google, organic search is five times more valuable than Google Advertising⁴.

So how does NextJS help with this? Well, in order to rank your site, Google first has discover all of its individual pages. After that it will analyse their content in a process called indexing. Over 200 variables calculated as part of this indexing process are then used to determine your ranking in search results.

The problem with React and other client-side rendered applications is that Google uses the semantic HTML of a page in order to determine its contents. With client-side rendered applications an almost-empty HTML document is initially delivered on page load and then Javascript is used to render the rest of the page.

Despite progress in determining the contents of client-side rendered applications, Google still encounters issues including:

1. Client-side rendered Javascript often returns success status codes when it should return error codes making it hard for Google to figure out which pages exist
2. If the page takes a long time to render the HTML document then Google may fail to index the page

NextJS solves these issues, among others, by using server-side rendering (SSR). This is where the HTML document is rendered on the server and then sent directly to the client, meaning the HTML of the page is immediately viewable. This means that the Google bot is immediately delivered a full HTML document when it visits your page, allowing for easier indexing and a better search ranking.

In recognition of the superior SEO performance of server-side rendering, Google have advocated for a 'Dynamic Rendering' scheme⁵. This is where webpages are client-side rendered for users but server-side rendered for search engines. However due to the potential performance gains of SSR for your end users (detailed below), people like John Mueller (Search Advocate at Google), espouse the benefits of SSR for both SEO and performance⁶.

Airbnb were early to this conclusion. Back in 2012 they started building Hypernova, an SSR framework, in part to improve the SEO of their React frontend⁷.

With SSR built in, NextJS allows you to build Search Engine Optimised sites more easily than ever before, driving increased traffic and conversion rates for your business.

NextJS is great for performance

In a talk given in 2012⁸, Walmart presented a series of incredible statistics about how web performance was linked to revenue. A couple of examples were:

1. For every 1 second improvement in page load speed, they experienced up to a 2% increase in conversions
2. For every 100ms of improvement, they grew incremental revenue by up to 1%

Examples from further afield include:

1. Furniture Village reduced their page load time by 20% resulting in a 10% increase in conversions⁹
2. In 'Milliseconds Make Millions' Deloitte found that on average a 0.1s improvement in page speed leads to a 10% increase in conversions¹⁰

The bottom line is: Better site performance leads to increased conversions and revenue. Users that are not forced to wait behind loading spinners are less likely to 'bounce' (view a single page and then leave) and more likely to stick around and convert.

Vercel claim that 2022 will be their 'fastest year yet' and there are a bunch of high-performance features built into NextJS:

1. SSR - As well as better SEO this can result in faster page 'time to visible'
2. Code splitting - Javascript is automatically split between pages resulting in less data to download per page, causing them to load faster
3. ISR - This stands for Incremental Static Regeneration and is a killer feature of NextJS. It allows you to build a static site and then periodically re-build pages with new data. This leads to a fast static site that can be delivered from the edge while still maintaining up to date content. This can be great in E-Commerce use cases where occasionally showing stale data is not too much of an issue.

The above features and more lead to Cruise Critic (a subsidiary of Tripadvisor) experiencing an 85% decrease in page download time after migrating to NextJS.¹¹

Leveraging the built in performance features of NextJS leads to sites with excellent performance metrics, resulting in decreased user bounce rates and increased user conversion.

NextJS is built on top of React

Frontend web technology ages poorly, as a rule. The big 3 frontend frameworks today: React, Angular and Vue were only released in 2013, 2010 and 2015 respectively. It's important for businesses creating new web products today to back the right horses when it comes to the libraries and frameworks they use in order to prevent expensive migrations down the line when they fall out of vogue or become deprecated.

React is an excellent choice when it comes to staying power. The framework was built by Facebook and is still supported by a permanent team there. Over 10 million website use React¹² including businesses like Uber, Instagram and the BBC. It also consistently leads in areas such as developer usage¹³, hiring trends¹⁴, and Google trends¹⁵.

Since NextJS is only a thin wrapper on top of React, React developers will find NextJS comfortably familiar. This allows a company to leverage the entire existing React support and hiring ecosystem, instead of the new training and hiring requirements that usually come with new technologies. It also makes migrating an existing React application a much easier task.

Built on the bedrock of React, companies using NextJS can be sure that the technology underlying it is popular and widely supported, bringing benefits in hiring, training and insuring against future migrations.

NextJS has a wealth of industry support

While React may be pretty future-proof, it's also important to measure the level of support for NextJS itself and the major players involved in its development. As mentioned in the introduction, NextJS is built by Vercel, a $2.5 billion company at last valuation. Vercel provide a permanent team working on NextJS, in addition to this NextJS is open source and receives contributions from the developer community. Google have also provided support from their own development team, improving the performance of the framework.

With big technology companies like Twitch, Hulu and Uber migrating to NextJS and a wealth of open source support, the future of NextJS seems secure even excluding Vercel.

Conclusion

For all the reasons listed above, NextJS has replaced React as my standard frontend of choice. I've seen the benefits it can bring to businesses in the E-Commerce space and other sectors with excellent performance and SEO benchmarks achieved on multiple projects. For your next project, strongly consider NextJS as your frontend solution.