What Turbo Drive replaces

The reload this app no longer does

A plain server-rendered Rails app throws the whole page away on every click. The browser sends a request, the server sends back a full HTML document, and the browser discards the DOM and builds a new one. Stylesheets are parsed again, scripts run again, scroll position gone. This app doesn't do that for an ordinary link or form, and nobody coded the alternative by hand.

Plain link click:
  click ──▶ full page request ──▶ full new HTML ──▶ browser discards old DOM, builds a new one

Turbo Drive link click:
  click ──▶ fetch request ──▶ new HTML ──▶ Turbo merges <head>, replaces <body>

Already running, from this app's Gemfile

Gemfile, lines 13-14:

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

config/importmap.rb, line 6:

pin "@hotwired/turbo-rails", to: "turbo.min.js"

That's the whole setup. No controller opts in, and no view calls a helper to enable it. With turbo-rails in the Gemfile and pinned in the import map, Turbo Drive attaches itself to every ordinary <a> and <form> on every page this app renders. That includes the catalog and dashboard pages you've been clicking through.

SPA-like, not a SPA

The Gemfile comment says "SPA-like" on purpose. Nothing here is a client-side JavaScript app rendering views in the browser. Every page is still rendered by Rails, in Ruby, as plain HTML. Turbo Drive changes only how that HTML arrives: it's fetched and swapped in instead of causing a full browser navigation. The server-rendering model this curriculum has taught so far stays the same.

What this course covers

Lesson 2 shows how Turbo Drive intercepts a click and merges the response. Lessons 3 and 4 cover the places where this app turns Turbo Drive off or tunes it: prefetch, the GitHub OAuth button, tracked assets, confirm dialogs and submit feedback. Lesson 5 explains what a Turbo Frame is, through an id-matched update in this app's admin panel. Lesson 6 covers a frame behind the discussion dialog that loads only when the dialog opens, and why. Lesson 7 puts it all together.