JavaScript is widely used and well-understood in servers and web browsers to enable advanced functionality, but until now it has generally lacked middleware.
Well-funded web development startup Vercel is now evolving its open-source next.js JavaScript framework with a new 12.2 version update on June 28th. This includes what the company calls JavaScript middleware. The concept of middleware is to provide functionality required 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 feature called On-Demand Incremental Static Regeneration (ISR). This helps to significantly accelerate the delivery of your website. In the past, organizations cached certain website pages to improve performance, but the information wasn’t always up-to-date. On-demand ISR allows you to deliver pages with up-to-date information more quickly.
Vercel itself has accelerated its development efforts over the past year thanks to a $150 million funding round the company announced in November 2021. Vercel and the next.js framework have been big benefactors as companies of all sizes have raced to support their digital transformation efforts, which often involve advanced website application functionality.
“We have seen a lot of traction in e-commerce, consumer mobile web apps like TikTok and Twitch. Most of it runs on next.js,” says Guillermo Rauch. Vercel founder and CEO told VentureBeat:
Why you need JavaScript middleware
A key 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 term middleware is used because technology sits between user requests and content. He said that next.js middleware allows developers to add dynamic code and routing to JavaScript requests.
“It can do everything you would expect from other middleware technologies: authentication, authorization, redirection, rewriting, personalizing and testing new features,” Rauch said.
Despite their similar names, middleware for other programming languages such as Java, which has nothing to do with JavaScript, often requires another server technology to run. In contrast, next.js middleware is just a single file that is deployed to your web server.
“You can literally just add one file, middleware.ts, and start writing your logic,” says Rauch.
The middleware.ts file is in some respects an evolution of the next.js configuration file, which defines configuration parameters for deployment. Rauch pointed out that the configuration file only offers what he calls “rudimentary” options such as custom headers and redirects. With middleware, developers can build in any logic they need to run their applications, he said.
Bring middleware to the edge
For open source developers, integrating middleware configuration into application code is one thing, but enabling that configuration to run in an optimized approach is quite another.
This is where Vercel’s Edge Middleware capabilities come into play. 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 commercial services for supporting and delivering applications at scale. Vercel services are powered by Amazon Web Services (AWS) and Cloudflare infrastructure.
Migrating from caching to on-demand ISR
The open source next.js 12.2 update is also notable for the introduction of on-demand ISRs for web content.
Web content can be dynamically generated by a Web server, but the process can be time consuming. As such, high-traffic applications often prefer using cached or static content.
According to Rauch, with ISRs static content is updated when there is a corresponding update in the source data source for a given application. Prior to the next.js 12.2 update, the way ISRs worked was the web server periodically checking for updates.
A new on-demand feature allows web applications to notify servers via webhooks when data is updated, making updates faster in next.js 12.2 than in previous releases of the JavaScript framework.
What’s next for next.js?
The next.js 12.2 release introduces several experimental features that show the future direction of the technology.
Among the experimental features is the use of the Edge runtime. Rauch said that next.js has used the node.js runtime since its creation, but now users are using You mentioned that you have the option to use the Edge runtime compatible with the WinterCG initiative.
“This is a new era of JavaScript runtimes optimized for the server, not the browser,” said Rauch. “The Edge runtime is basically an effort to say that this is his Vercel implementation of WinterCG, and we plan to open source that effort as well.”
Mission of VentureBeat will become a digital town square for technical decision makers to gain knowledge on innovative enterprise technology and trade. Watch the briefing.
