It just works out-of-box.

The best thing about Turbo Drive is that you get it for free. Yes, you heard that right. You don't have to do anything to get the benefits of Turbo Drive.

Let's Add a Contact Page

To see how Turbo Drive works, we need to set up another page on our website that we'll add a link to.

We've already added the links to the Contact and About pages when we wrote the initial HTML, so let's go ahead and add a Contact page. To keep it really simple, I'll just copy and paste the index.html page, changing the filename and a little content to make it unique.

This is only for demo. Your back-end framework or static-site generator uses a templating system to extract all the duplicate HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
  <script type="module">
    import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo@7.1.0';
  </script>
  <title>Wireframe - Contact</title>
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/contact">Contact</a>
      <a href="/about">About</a>
    </nav>

    <h1>Contact</h1>
  </header>
  <main>
    <p>You can reach me at akshay.khot@hey.com</p>
  </main>
</body>
</html>

You should see the following page when you go to /contact page:

contact.png

Now go ahead and click back and forth between the Home and Contact links.

Can you spot something different that you won't see on a traditional website with a bunch of HTML pages linking to each other?

No? let me give you a hint. Comment out the <script> tags that load the Turbo library on both pages.

<!-- <script type="module">
  import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo@7.1.0';
</script> -->

Don't forget to comment it on both pages, okay?

Now clear the cache and hard reload the browser by pressing and holding the reload button while the DevTools window is open. This removes the Turbo library you loaded earlier from the website.

clear-cache.png

Now click between Home and Contact links.

See something different?

I'm sure you must have figured it out by now. When you navigate between multiple pages, the browser is doing a full reload. You can see this by noticing the earth icon in the tab, which spins for a quick second when you go to a different page.

full_reload.png

Now uncomment the script from both pages and reload the browser again. No need to clear the cache this time. The website should fetch the Turbo library without any issues.

Go ahead, and click between the pages.

Get it?

The earth is not spinning anymore! The pages are updating without a full browser reload. How cool is that?

This is the power of Turbo Drive. Without any extra effort on your part, your website has instantly become more responsive and dynamic.

To recap, here's what happened when you clicked on the Contact link.

  1. Turbo intercepted that click, prevented the browser from following it, made a fetch request to get the content of the Contact page.

  2. Upon receiving the HTTP response, Turbo then replaced the current body of the web page with the body of the result.

  3. Additionally, it merged the contents of the <head> tag if there's new stuff here, like new <meta> tags or new JavaScript. In our case, there wasn't any new stuff, so it left the head tag as it is.

Displaying a Progress Bar

You can improve the perceived responsiveness of your website by displaying a progress bar while Turbo fetches the new page. Simply add the following CSS that targets the .turbo-progress-bar element.

<style>
  .turbo-progress-bar {
    height: 10px;
    background-color: green;
  }
</style>

It might be hard to see it, as the navigation is so fast. You can throttle the network to Slow 3G to see the progress bar.