Middleware enterprise functionality comes to JavaScript, thanks to Vercel

JavaScript is widely used and well understood on servers and in web browsers to enable advanced functionality, but it hasn’t generally had middleware, until now.

Well-funded web development startup Vercel is now looking to advance its open-source next.js JavaScript framework with its new 12.2 version update on June 28, which includes what the company is referring to as JavaScript middleware. The concept of middleware is all about providing features needed for enterprise application delivery, 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 accelerate website delivery. In the past, organizations might have cached certain website pages in order to enable better performance, at the cost of not always having the most updated information. On-demand ISR will enable the faster delivery of pages with the most current information.

Vercel itself has been accelerating its development efforts over the past year, thanks in no small part to a $150 million funding round the company announced in November 2021. The company has raised a total of $313 million, with a post-money valuation of $2.5 billion. As companies of all sizes have raced to support digital transformation efforts that, more often than not, involve advanced website application functionality, Vercel and the next.js framework have been big benefactors.

“We’ve seen a lot of traction with ecommerce, consumer mobile web apps like TikTok and  Twitch, and we’ve seen a lot of success with travel websites, with the majority of top travel websites running on next.js,” Guillermo Rauch, founder and CEO of Vercel, told VentureBeat.

Why it’s time for JavaScript middleware

A key highlight of the next.js 12.2 update is the stable release of next.js middleware, which had been in beta since next.js 12.0 first appeared in October 2021.

Rauch explained that the reason why the term middleware is used is because the technology sits in between the user request and the content. He noted that next.js middleware enables developers to add dynamic code and routing into a JavaScript request.

“It allows you to do everything you would expect to do with other middleware technology like authentication, authorization, redirects and rewrites, as well as personalizing and testing new features,” Rauch said.

Middleware for other programming languages, such as Java – which is completely unrelated to JavaScript, despite the naming similarity – has often required separate server technologies in order to run. In contrast, next.js middleware is simply just a single file that is deployed on a web server.

“You literally add just one file, middleware.ts, and you start writing your logic,” Rauch said.

The middleware.ts file is in some respects an evolution of the next.js config file that defined the configuration parameters for a deployment. Rauch noted that the config file only provides what he referred to as “rudimentary” options such as custom headers and redirections. With middleware he said that developers can put in any logic that is needed for a business application to run.

Bringing middleware to the edge

It’s one thing for an open-source developer to integrate middleware configurations in application code, but it’s quite another to enable that configuration to run in an optimized approach.

That’s where Vercel’s Edge Middleware capability comes into the picture. 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 for supporting and delivering applications at scale. The Vercel service makes use of infrastructure from Amazon Web Services (AWS) as well as Cloudflare.

Moving beyond caching to on-demand ISR

The open-source next.js 12.2 update is also noteworthy for its introduction of on-demand ISR for web content.

Web content can be dynamically generated by a web server, but that process can take time, which is why the use of cached or static content is often preferred for high-traffic applications.

With ISR, Rauch explained, the static content is updated when there is a corresponding update in the source-data sources for a given application. Prior to the next.js 12.2 update, the way ISR worked was with web servers checking for updates on a periodic basis.

With the new on-demand capability, a web application can notify the server via webhook when data is updated, enabling faster updates with next.js 12.2 than prior releases of the JavaScript framework.

What’s next for next.js?

The next.js 12.2 release introduces several experimental capabilities that show possible future directions for the technology.

Among the experimental features is the use of the Edge Runtime. Rauch noted that next.js since its creation has used the node.js runtime, but now users have the option of using the Edge Runtime that is compatible with the WinterCG initiative, which aims to build web-interoperable runtimes for JavaScript.

“It’s a new era of JavaScript runtimes that are optimized for the server instead of the browser,” Rauch said. “Edge Runtime is basically an effort to say this is the Vercel implementation of WinterCG, and we’re going to be open sourcing that effort as well.”

VentureBeat’s mission is to be a digital town square for technical decision-makers to gain knowledge about transformative enterprise technology and transact. Learn more about membership.