JavaScript is widely used and well understood on servers and in web browsers to enable advanced functionality, but it has generally lacked middleware until now.
Well-funded web development startup Vercel is now looking to improve its open-source next.js JavaScript framework with its new 12.2 version update on June 28, which includes what the company calls JavaScript middleware. The concept of middleware is all about providing functions necessary for the delivery of business applications, such as authorization and geographic localization.
In addition to middleware, the open-source next.js 12.2 release also introduces a capability known as on-demand Incremental Static Regeneration (ISR), which will help to significantly speed up website delivery. In the past, organizations may have cached certain web pages to enable better performance, at the cost of not always having the most up-to-date information. On-demand ISR ensures faster delivery of pages with the most up-to-date information.
Vercel itself has accelerated its development efforts over the past year, thanks in no small part to a $150 million financing round the company announced in November 2021. The company has raised a total of $313 million, with a retrospective valuation of $2.5 billion. As companies of all sizes have raced to support digital transformation efforts that, more often than not, include advanced website application functionality, Vercel and the next.js framework have been big benefactors.
“We’ve seen a lot of traction with e-commerce, consumer mobile web apps like TikTok and Twitch, and we’ve seen a lot of success with travel websites, with most of the best travel websites running on next.js,” Guillermo Rauch, founder and CEO of Vercel, to VentureBeat.
Why it’s time for JavaScript middleware
A major highlight of the next.js 12.2 update is the stable release of next.js middleware, which has been in beta since next.js 12.0 first appeared in October 2021.
Rauch explained that the reason the term middleware is used is because the technology sits between the user request and the content. I noticed that next.js allows middleware developers to add dynamic code and routing to a JavaScript request.
“It allows you to do everything you would expect to do with other middleware technology, such as authentication, authorization, redirects and rewrites, as well as personalizing and testing new features,” said Rauch.
Middleware for other programming languages, such as Java — which, despite the naming convention, has absolutely nothing to do with JavaScript — often requires separate server technologies to run. In contrast, next.js middleware is just a single file deployed on a web server.
“You literally just add one file, middleware.ts, and you start writing your logic,” Rauch said.
The middleware.ts file is in some ways an evolution of the next.js configuration file that defined the configuration parameters for an implementation. Rauch noted that the configuration file only offers what he called “rudimentary” options, such as custom headers and redirects. With middleware, he said, developers can put in all the logic needed to run a business application.
Bringing Middleware to the Edge
It’s one thing for an open source developer to integrate middleware configurations into application code, it’s quite another to run that configuration in an optimized approach.
That’s where Vercel’s Edge Middleware capability comes in. Edge Middleware is a commercially supported service that runs next.js on the Vercel platform to provide faster performance and lower latency.
Vercel is the lead developer of the open-source next.js framework and provides a commercial service to support and deliver applications at scale. The Vercel service uses infrastructure from both Amazon Web Services (AWS) and Cloudflare.
More than caching to on-demand ISR
The open-source next.js 12.2 update is also notable for introducing on-demand ISR for web content.
Web content can be dynamically generated by a web server, but that process can take some time. Therefore, it is often preferred to use cached or static content for high traffic applications.
With ISR, Rauch explained, the static content is updated whenever there is a corresponding update in the source data sources for a particular application. Prior to the next.js 12.2 update, ISR worked with web servers that periodically checked for updates.
The new on-demand capability allows a web application to notify the server via webhook when data is updated, enabling faster updates with next.js 12.2 than previous releases of the JavaScript framework.
What’s next for next.js?
The release of next.js 12.2 introduces several experimental capabilities that show possible future directions for the technology.
One of the experimental features is the use of the Edge Runtime. Rauch noted that next.js has used the node.js runtime since its inception, but now users have the option to use the Edge Runtime compatible with the WinterCG initiative, which aims to provide web-interoperable runtimes for JavaScript build.
“It’s a new era of JavaScript runtimes optimized for the server rather than the browser,” says Rauch. “Edge Runtime is basically an attempt to say that this is the Vercel implementation of WinterCG, and we’re going to open source that effort as well.”
The mission of VentureBeat should be a digital city square for tech decision makers to gain knowledge about transformative business technology and transactions. Learn more about membership.