Next.js and the JavaScript content butler

Looking at JavaScript frameworks such as Next.js and Google’s Progressive Web Apps it’s plain to see that JavaScript maybe set to take an even greater role in the future of our websites and web applications.

Taking this website for example, at the time of writing, when a user clicks a link rather than navigating to the next page we’re instead using JavaScript to Ajax in the content for that page, animate away the old content and animate in the new. Updating the browser’s address bar via the History API along the way too. But that’s not all, JavaScript is also used to prefetch and cache the next page before the user has even clicked to initiate the navigation, taking advantage of the delay between a user hovering over a link and clicking on it to prefetch. If a user requests a page that’s already cached, there’s no request to the server at all just instant content.

This approach provides a number of benefits, primarily making the website’s navigation really fast and pretty much eliminating any pauses in the user experience while pages load. The net result being that visitors are hopefully engaged and explore the website for longer than they would otherwise.

Next.js has taken this type of approach even further, when a user first arrives onto a Next.js based website it will send the user the server rendered page, so a full HTML page but thereafter any links the user clicks on are also intercepted by JavaScript to request the content for the next page as JSON, which is returned via a Service Worker and then rendered using React. Next.js also aggressively prefetches content so generally by the time you click a link the content is already ready.

Common to both of these approaches is that JavaScript is no longer just embellishing a page or handling form validation, it’s responsible for fetching and serving content, which couldn’t be more fundamental to the user’s experience, almost acting like some sort of content butler! Of course this reliance on JavaScript is nothing new when it comes to web apps, JavaScript has steadily been taking hold there for many years but this is a change because it has the potential to revolutionise more content-driven sites, which normally are less JavaScript-reliant than their web app counterparts.

Whilst this may scare some, I actually feel that this is a natural and welcome progression. I like the elegance and performance benefits of only sending the user the data they need and prefetching content for instant performance. Whilst implementing these enhancements with a safe progressive enhancement approach allowing a simple fall-back to server rendered pages.