DEV Community

Cover image for Turbo in Rails: A Simple Guide to Drive, Frames, and Streams
Pichandal
Pichandal

Posted on

Turbo in Rails: A Simple Guide to Drive, Frames, and Streams

#turboinrails #rails #turboframes #turbostream

Modern web apps are expected to be lightning fast and highly interactive. Traditionally, that meant reaching for front-end frameworks like React or Vue. But if you’re a RoR developer, there’s a cleaner option, Turbo in Rails.

Part of the Hotwire stack, turbo brings you single-page-app-like speed while staying true to Rails’ server-rendered roots. With just a few tweaks, you can transform your app’s user experience. (no mountain of JavaScript required)

In this article, we’ll walk through the essentials: Turbo Drive, Turbo Frames, and Turbo Streams, and when to use each.

Turbo Drive: Faster Navigation, Rails Style

Turbo Drive replaces the usual full-page reloads with partial updates. Instead of the browser tearing down and rebuilding the page, Turbo Drive intercepts links and form submissions, fetches the response via fetch, and updates only the <body> and <title>.

That means:

  • Page loads feel instant.
  • Layout and JS context stay alive.
  • You get SPA-like navigation without adopting a full SPA framework.

This feature is built in by default with the turbo-rails gem, so there’s no setup required. The only caveat is that scripts depending on a page reload may need reinitialization.

Turbo Frames in Rails: Refresh What Matters

A Rails turbo frame acts like a self-contained window on your page. Instead of refreshing everything, you reload only the targeted frame.

Great use cases include:

  • Inline editing (change a post title without leaving the page).
  • Sidebars or dashboards with independent reloads.
  • Modals and pop-ups.

With Turbo Frames, you can keep interactions scoped and snappy without redrawing the whole interface.

Turbo Streams in Rails: Real-Time Without Complexity

If you’ve ever wanted your Rails app to feel real-time, Turbo Streams are the answer. Using server-generated HTML over WebSockets (via ActionCable) or polling, streams let you broadcast updates directly into the DOM.

Here’s what that looks like in practice:

  • New posts appear in the feed as soon as they’re created.
  • Comments show up in real-time for every user.
  • Elements can be added, updated, or removed instantly.

Streams work seamlessly with standard Rails CRUD actions. By creating .turbo_stream.erb views, you can broadcast changes without touching JavaScript.

Turbo Frames and Turbo Streams: What’s the Difference?

This is a common question: what’s the difference between Turbo Frames and Turbo Streams?

  • Turbo Frames focus on in-page navigation. They’re about updating a specific section of a page (like a modal or inline form).
  • Turbo Streams handle live updates. They’re about pushing server changes to all connected users in real-time.

Both can coexist in the same Rails app. For example, you might edit a post inline with Turbo Frames, while new posts appear instantly in the list thanks to Turbo Streams.

How Drive, Frames, and Streams Work Together

Picture this flow in your Rails app:

  1. A user opens the posts index - Turbo Drive makes it load instantly.
  2. They click “Edit” - only that post area updates via Turbo Frame.
  3. They hit save - the same frame refreshes seamlessly.
  4. Another user adds a post - it appears in real-time, powered by Turbo Streams.

The three features complement each other beautifully: Drive speeds up navigation, Frames localize updates, and Streams handle real-time broadcasting.

When Turbo Isn’t Ideal

You might skip Turbo in scenarios like:

  • Apps needing complex client-side state management.
  • Features relying on third-party JS widgets that don’t reinitialize well.
  • Highly interactive UIs better suited for SPA frameworks.

In those cases, Stimulus or a full SPA stack may be more appropriate.

Debugging Turbo in Your Ruby on Rails App

If Turbo isn’t behaving as expected, here are a few tricks:

  • Open Chrome DevTools → Network tab → filter by “fetch.”
  • Add data-turbo="false" to disable it for specific links or forms.
  • Use Turbo.session.drive = false to switch off Drive globally (though rarely needed).

Wrapping Up

Turbo gives Rails developers a way to build apps that feel modern without abandoning the Rails philosophy. With Turbo Drive, Turbo Frames, and Turbo Streams, you can deliver:

  • Instant navigation.
  • Smooth, scoped updates.
  • Real-time collaboration.

And all of it comes from server-rendered HTML.

At RailsFactory, we’ve been working with Rails for over 19 years, and Turbo is one of the most exciting evolutions of the framework. If you’re looking to bring this kind of speed and interactivity into your own Rails projects, we’d be happy to help.

Top comments (0)