Turbo & Hotwire
SPA-like UX without JavaScript
Hotwire is the default frontend framework in Rails 7, consisting of 3 components.
1. Turbo Drive: Intercepts all link clicks and form submissions, replacing only the <body> instead of full page reloads. Works automatically without configuration.
2. Turbo Frames: Independently update specific areas of a page.
Define frames with turbo_frame_tag "post_123" do ... end, and clicking links inside a frame replaces content only within that frame.
3. Turbo Streams: Server instructs 8 types of DOM manipulations.
Actions like turbo_stream.append, prepend, replace, update, remove, before, after, morph directly manipulate specific DOM elements from the server.
Combined with Action Cable, real-time updates are also possible.
Architecture Diagram
Key Points
Turbo Drive: auto-AJAXifies links/forms (no config needed)
Define independent update areas with turbo_frame_tag
Links inside frames replace only within the frame
Turbo Stream instructs DOM operations from server (append, remove, etc.)
Respond with respond_to { |format| format.turbo_stream { ... } }
Action Cable + Turbo Stream = real-time updates
Pros
- ✓ Minimal JavaScript — maintains server rendering
- ✓ SPA-level UX (flicker-free page transitions)
- ✓ Built into Rails 7 — no additional installation
- ✓ SEO friendly (server rendering)
Cons
- ✗ May conflict with existing JavaScript libraries
- ✗ Turbo Drive may cause unexpected behavior
- ✗ Need to check Network tab when debugging
- ✗ Smaller community compared to React/Vue