01 / 02

Turbo Fundamentals: Drive & Frames

Turbo: Drive & Frames

Turbo (part of Basecamp's Hotwire suite, heavily used in Rails) lets applications feel like fast single-page apps while keeping most rendering and logic on the server -- minimizing custom client-side JavaScript rather than requiring a separate SPA framework and JSON API.

Turbo Drive

Turbo Drive automatically intercepts standard link clicks and form submissions, fetching the new page in the background and swapping in the <body> instead of triggering a full page reload -- avoiding the re-parse/re-execute cost of the <head>'s CSS/JS on every navigation.

Page Caching for Instant Back/Forward

Turbo Drive keeps a client-side cache of visited pages, so navigating back shows a cached snapshot instantly while a fresh version loads in the background -- balancing perceived speed with data freshness.

Turbo Frames

<turbo-frame id="comments">
  <a href="/posts/1/comments?page=2">Next page</a>
  <!-- comment list -->
</turbo-frame>

<!-- Clicking the link only replaces THIS frame's content --
     Turbo matches the response's <turbo-frame id="comments">
     and swaps just that, leaving the rest of the page untouched -->

Lazy-Loading a Frame

<turbo-frame id="report" src="/reports/expensive"></turbo-frame>

<!-- The main page renders immediately; the frame's own
     content is fetched afterward, independently -->

Useful Attributes

<a href="/posts/1" data-turbo-confirm="Are you sure?">Delete</a>
<div id="player" data-turbo-permanent>...</div>

<!-- data-turbo-confirm: prompts before proceeding, for destructive actions
     data-turbo-permanent: preserved across navigations by matching ID
     (e.g. an audio player that shouldn't restart on every page change) -->

Turbo: Streams, Real-Time Updates & Hotwire

Test yourself — Turbo quiz

Keep your own version of these notes — editable, searchable, and organised by your stack.

Start free