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.1 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 years2, 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:
- Conversion - High conversion rates for organic visitors (14.6% according to Hubspot compared to 1.7% for outbound leads3)
- Trust - Increased confidence in your brand as customers know you are the best result based on their search term.
- 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 Advertising4.
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.
Despite progress in determining the contents of client-side rendered applications, Google still encounters issues including:
- 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' scheme5. 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 performance6.
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 frontend7.
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 20128, Walmart presented a series of incredible statistics about how web performance was linked to revenue. A couple of examples were:
- For every 1 second improvement in page load speed, they experienced up to a 2% increase in conversions
- For every 100ms of improvement, they grew incremental revenue by up to 1%
Examples from further afield include:
- Furniture Village reduced their page load time by 20% resulting in a 10% increase in conversions9
- In 'Milliseconds Make Millions' Deloitte found that on average a 0.1s improvement in page speed leads to a 10% increase in conversions10
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:
- SSR - As well as better SEO this can result in faster page 'time to visible'
- 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.11
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 React12 including businesses like Uber, Instagram and the BBC. It also consistently leads in areas such as developer usage13, hiring trends14, and Google trends15.
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.
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.