Skip to content

Commit

Permalink
deploy: 692c6ff
Browse files Browse the repository at this point in the history
  • Loading branch information
afcapel committed Mar 1, 2024
1 parent df3bad5 commit 806d06e
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions handbook/drive.html
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@

<h1>Navigate with Turbo Drive</h1>
<p>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 <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a>.</p>
<nav class="table-of-contents"><ul><li><a href="#page-navigation-basics"> Page Navigation Basics</a></li><li><a href="#application-visits"> Application Visits</a></li><li><a href="#restoration-visits"> Restoration Visits</a></li><li><a href="#canceling-visits-before-they-start"> Canceling Visits Before They Start</a></li><li><a href="#custom-rendering"> Custom Rendering</a></li><li><a href="#pausing-rendering"> Pausing Rendering</a></li><li><a href="#pausing-requests"> Pausing Requests</a></li><li><a href="#performing-visits-with-a-different-method"> Performing Visits With a Different Method</a></li><li><a href="#requiring-confirmation-for-a-visit"> Requiring Confirmation for a Visit</a></li><li><a href="#disabling-turbo-drive-on-specific-links-or-forms"> Disabling Turbo Drive on Specific Links or Forms</a></li><li><a href="#view-transitions"> View transitions</a></li><li><a href="#displaying-progress"> Displaying Progress</a></li><li><a href="#reloading-when-assets-change"> Reloading When Assets Change</a></li><li><a href="#ensuring-specific-pages-trigger-a-full-reload"> Ensuring Specific Pages Trigger a Full Reload</a></li><li><a href="#setting-a-root-location"> Setting a Root Location</a></li><li><a href="#form-submissions"> Form Submissions</a></li><li><a href="#redirecting-after-a-form-submission"> Redirecting After a Form Submission</a></li><li><a href="#streaming-after-a-form-submission"> Streaming After a Form Submission</a></li><li><a href="#instantclick"> InstantClick</a></li><li><a href="#preload-links-into-the-cache"> Preload Links Into the Cache</a></li></ul></nav><h2 id="page-navigation-basics"><a class="anchor" href="#page-navigation-basics"></a> Page Navigation Basics</h2>
<nav class="table-of-contents"><ul><li><a href="#page-navigation-basics"> Page Navigation Basics</a></li><li><a href="#application-visits"> Application Visits</a></li><li><a href="#restoration-visits"> Restoration Visits</a></li><li><a href="#canceling-visits-before-they-start"> Canceling Visits Before They Start</a></li><li><a href="#custom-rendering"> Custom Rendering</a></li><li><a href="#pausing-rendering"> Pausing Rendering</a></li><li><a href="#pausing-requests"> Pausing Requests</a></li><li><a href="#performing-visits-with-a-different-method"> Performing Visits With a Different Method</a></li><li><a href="#requiring-confirmation-for-a-visit"> Requiring Confirmation for a Visit</a></li><li><a href="#disabling-turbo-drive-on-specific-links-or-forms"> Disabling Turbo Drive on Specific Links or Forms</a></li><li><a href="#view-transitions"> View transitions</a></li><li><a href="#displaying-progress"> Displaying Progress</a></li><li><a href="#reloading-when-assets-change"> Reloading When Assets Change</a></li><li><a href="#ensuring-specific-pages-trigger-a-full-reload"> Ensuring Specific Pages Trigger a Full Reload</a></li><li><a href="#setting-a-root-location"> Setting a Root Location</a></li><li><a href="#form-submissions"> Form Submissions</a></li><li><a href="#redirecting-after-a-form-submission"> Redirecting After a Form Submission</a></li><li><a href="#streaming-after-a-form-submission"> Streaming After a Form Submission</a></li><li><a href="#prefetching-links-on-hover"> Prefetching Links on Hover</a></li><li><a href="#preload-links-into-the-cache"> Preload Links Into the Cache</a></li></ul></nav><h2 id="page-navigation-basics"><a class="anchor" href="#page-navigation-basics"></a> Page Navigation Basics</h2>
<p>Turbo Drive models page navigation as a <em>visit</em> to a <em>location</em> (URL) with an <em>action</em>.</p>
<p>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.</p>
<p>During rendering, Turbo Drive replaces the contents of the requesting document’s <code>&lt;body&gt;</code> with the contents of the response document’s <code>&lt;body&gt;</code>, merges the contents of their <code>&lt;head&gt;</code>s too, and updates the <code>lang</code> attribute of the <code>&lt;html&gt;</code> element as needed. The point of merging instead of replacing the <code>&lt;head&gt;</code> elements is that if <code>&lt;title&gt;</code> or <code>&lt;meta&gt;</code> 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.</p>
Expand Down Expand Up @@ -271,9 +271,9 @@ <h2 id="redirecting-after-a-form-submission"><a class="anchor" href="#redirectin
<p>If the form submission is a GET request, you may render the directly rendered response by giving the form a <code>data-turbo-frame</code> target. If you’d like the URL to update as part of the rendering also pass a <code>data-turbo-action</code> attribute.</p>
<h2 id="streaming-after-a-form-submission"><a class="anchor" href="#streaming-after-a-form-submission"></a> Streaming After a Form Submission</h2>
<p>Servers may also respond to form submissions with a <a href="streams">Turbo Streams</a> message by sending the header <code>Content-Type: text/vnd.turbo-stream.html</code> followed by one or more <code>&lt;turbo-stream&gt;</code> elements in the response body. This lets you update multiple parts of the page without navigating.</p>
<h2 id="instantclick"><a class="anchor" href="#instantclick"></a> InstantClick</h2>
<p>Turbo can also speed up perceived link navigation latency by automatically loading links on <code>mouseenter</code> or <code>touchstart</code> events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.</p>
<p>InstantClick is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:</p>
<h2 id="prefetching-links-on-hover"><a class="anchor" href="#prefetching-links-on-hover"></a> Prefetching Links on Hover</h2>
<p>Turbo can also speed up perceived link navigation latency by automatically loading links on <code>mouseenter</code> events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.</p>
<p>Prefetching links is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>turbo-prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>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.</p>
<p>You can disable the behavior on a per-element basis by annotating the element or any of its ancestors with <code>data-turbo-prefetch=&quot;false&quot;</code>.</p>
Expand Down

0 comments on commit 806d06e

Please sign in to comment.