Speed Up Your Server-Rendered Pages with Turbolinks
Turbolinks is a JavaScript library that makes navigation in a web app faster. It can be used to speed up navigation between pages, between sub-menus and even form submissions and redirects. It can give your webabb the responsiveness of a single page application (SPA) while the HTML is still static pages delivered by the server. In other words, you can develop your whole application using a backend framework like Django or Rails and make it feel like an SPA.
The problem with server rendered pages
When HTML is rendered on the server and delivered to the browser, for each page load the browser needs to reconstruct the render tree and set up CSS and JavaScript. Even though your server response time might be very good, say below 50 ms, it is the re-rendering of the page that takes time, often 0.5–1 seconds. This is enough of a delay that the server rendered web apps don’t feel as smooth and instantaneous to the user as SPAs. SPAs achieve this by receiving only data from the server through AJAX and updating just parts of the DOM tree.
Turbolinks to the rescue
Turbolinks uses a neat trick to circumvent the page re-rendering in the browser. When a request is sent to the server (the user clicks a link or submits a form) Turbolinks intercepts the request, prevents the browser from following it and requests the new page using XMLHttpRequest. When the server returns the HTML Turbolinks swaps the body part of current HTML with the new content. In the latest version of Turbolinks it is also possible to use partial updates, swapping only parts of the HTML.
The result is that the load time for e.g. page navigation can be greatly reduced, down to 100–250 ms. With that kind of responsiveness a fully server rendered app can feel like an SPA.
Reduced complexity and simpler development
Generating all HTML server side reduces complexity and makes development simpler and faster. This is an advantage not least for solo developers and small teams. Instead using a backend framework like Rails, Spring or Django for the API and a frontend framework like Angular, React or Vue — the developers now only need a backend framework. You also don’t end up duplicating data structures and update and validation logic on the frontend and the backend. The end result is less complexity, less code to maintain, less technical debt and faster development.
So how can I get it?
Turbolinks comes with Rails 5 and is turned on by default for links. You can also easily add it for form submissions. It works pretty seamlessly out of the box.
In other frameworks you need to add Turbolinks manually. All you need to do is include it in the head section of your base HTML template and it will speed up all link clicks. To get it to work with forms you need to intercept the submit with JavaScript and send it as an AJAX request. You’ll also usually need to add middleware to get it to work with redirects. Many frameworks have plug-ins that eases this process.
Conclusion
Turbolinks is an interesting middle ground between strictly server rendered pages and full-blown SPAs. Other libraries, like Unpoly and Intercooler, offer some of the same functionality and takes it even further. I like Turbolinks’s simplicity and unobtrusiveness. The hype around SPAs has lasted several years and is still strong. Turbolinks and similar libraries offer a promising direction where you can get much of the responsiveness of an SPA without the complexity.
