Turbolinks are Rails magic. Rails makes rendering pages almost instantaneous for pushState supporting browsers with Tubolinks.
With Turbolinks turned on <a></a>
tags that link to internal pages (other pages in your app) don't make a normal request that causes a page load. In stead an asynchronous request fetches the page from the server and window.history.pushState
is invoked to replace the <body></body>
tags of the current page and their contents.
Turbolinks also caches 10 page loads. That means the last ten pages of your app that your users have visited will be fetched directly from the server when a link is clicked, the request never has to touch the Rails stack, unless it's loading dynamic content.
It's handy, just works by default and really, really speeds up page-load time. However there are occasions when you need to turn turbolinks off though. When turbolinks is used and when it isn't can be controlled granularly by using the data-no-turbolink
attribue. Setting the value of this attribute to true on any element ensures that links within won't be funneled through turbolinks.
<div data-no-turbolink='true'>
<%= link_to 'Buy', new_product_order_path %>
<%= link_to 'Edit', edit_product_path %>
</div>
In the above example, clicking the links will trigger a normal page load.
If you have javascript code that should execute when the page has finished loading you'll find that using the $(document).ready
doesn't work when you click a link. Turbolinks has event-emitters which we can use as well so that your JS loads on "real" and "fake" page loads:
$(document).on('page:load', ready);
So thanks to these Turbolinks event-emitters we can execute client-side code in the context of the lifecycle of the page as normal.
$(document).on('page:fetch', startSpinner);
$(document).on('page:receive', stopSpinner);
The above example might be used for displaying a loading spinner in the client.
More info can be found at https://github.com/rails/turbolinks.