<!DOCTYPE HTML>
<html lang="en" th:replace="~{layoutFile :: layout(~{::section})}" xmlns:th="http://www.thymeleaf.org">
<section class="grid">
    <h1 class="page-title display-native --turbo-drive">
        <div class="actions__icon --turbo-drive" aria-hidden="true"></div>
        Turbo Drive: Navigate within a persistent process
    </h1>

    <p>
        A key attraction with traditional single-page applications, when compared with the old-school, separate-pages approach, is the speed of navigation. SPAs get a lot of that speed from not constantly tearing down the application process, only to reinitialize it on the very next page.
    </p>

    <p>
        Turbo Drive gives you that same speed by using the same persistent-process model, but without requiring you to craft your entire application around the paradigm. There’s no client-side router to maintain; there’s no state to carefully manage. The persistent process is managed by Turbo, and you write your server-side code as though you're living back in the early aughts – blissfully isolated from the complexities of today’s SPA monstrosities!
    </p>

    <p>
        This happens by intercepting all clicks on links to the same domain. When you click an eligible link, Turbo Drive prevents the browser from following it, changes the browser’s URL using the History API, requests the new page using fetch, and then renders the HTML response.
    </p>

    <p>
        Same deal with forms. Their submissions are turned into fetch requests from which Turbo Drive follows the redirect and renders the HTML response.
    </p>

    <p>
        During rendering, Turbo Drive replaces the current 'body' element outright and merges the contents of the 'head' elements. The JavaScript window, document objects, and 'html' element persist from one rendering to the next.
    </p>

    <p>
        While it’s possible to interact directly with Turbo Drive to control how visits happen or hook into the lifecycle of the request, the majority of the time, this is a drop-in replacement where the speed is free just by adopting a few conventions.
    </p>

    <p>
        <a href="https://turbo.hotwired.dev/handbook/drive" target="_blank" class="button">Navigate with Turbo Drive</a>
    </p>
</section>
</html>