Turbo Drive is the part of Turbo that enhances page-level navigation. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload. It’s the evolution of a library previously known as Turbolinks.
-Turbo Drive models page navigation as a visit to a location (URL) with an action.
Visits represent the entire navigation lifecycle from click to render. That includes changing browser history, issuing the network request, restoring a copy of the page from cache, rendering the final response, and updating the scroll position.
During rendering, Turbo Drive replaces the contents of the requesting document’s <body> with the contents of the response document’s <body>, merges the contents of their <head>s too, and updates the lang attribute of the <html> element as needed. The point of merging instead of replacing the <head> elements is that if <title> or <meta> tags change, say, they will be updated as expected, but if links to assets are the same, they won’t be touched and therefore the browser won’t process them again.
Servers may also respond to form submissions with a Turbo Streams message by sending the header Content-Type: text/vnd.turbo-stream.html followed by one or more <turbo-stream> elements in the response body. This lets you update multiple parts of the page without navigating.
Turbo can also speed up perceived link navigation latency by automatically loading links on mouseenter or touchstart events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.
InstantClick is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:
+Turbo can also speed up perceived link navigation latency by automatically loading links on mouseenter events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.
Prefetching links is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:
<meta name="turbo-prefetch" content="false">To avoid prefetching links that the user is briefly hovering, Turbo waits 100ms after the user hovers over the link before prefetching it. But you may want to disable the prefetching behavior on certain links leading to pages with expensive rendering.
You can disable the behavior on a per-element basis by annotating the element or any of its ancestors with data-turbo-prefetch="false".