hotwire

For a notifications dropdown, I keep the list server-rendered and let Turbo Streams keep it fresh. The dropdown content sits in a turbo_frame_tag (so you can also navigate to a full notifications page), and the unread badge is a separate small target

Turbo’s page cache is great until you have sensitive screens (account settings, billing) where the browser back button might show stale content. I handle this by setting cache-control headers and, for specific actions, disabling Turbo caching via turb

You can build rich UIs by scoping navigation to a frame (e.g., a sidebar). Links inside the sidebar update only that frame while the main content stays put. This is great for filters and settings panels.

Keyboard shortcuts improve power-user workflows, but they must survive Turbo navigation. Attach on connect/disconnect, avoid global leaks, and scope shortcuts to the page/component.

A good Hotwire endpoint responds to both Turbo and non-Turbo clients. Use respond_to and render a turbo stream that prepends the new record and updates flash/errors, while keeping an HTML fallback for crawlers, redirects, and manual testing.

Flash updates are common enough to deserve a first-class stream action. Defining a custom turbo-stream action keeps views tidy: instead of repeating turbo_stream.update, you can write <turbo-stream action="flash">.

Hotwire forms feel “native” when invalid submissions keep you in context. Replace just the form frame with errors and keep the rest of the page intact. Return 422 so clients and caches behave correctly.

Sorting is a great candidate for Turbo Frames: clicking “Newest” shouldn’t reload your whole page shell. I wrap the list in a frame (e.g., id='results') and make sort links target that frame. The controller reads params[:sort] and applies an order sco

A “follow” button usually needs two updates: the button label/state and the follower count. Turbo Streams make this trivial because one server response can carry multiple DOM operations. I render both UI pieces as partials with stable targets (dom_id(

Turbo Drive is great for internal navigation, but I disable it for external links or pages that should do a full reload (third-party auth, docs). data-turbo='false' is the simplest switch: it tells Turbo not to intercept the click, so the browser hand

Sometimes you want to “redirect” from a turbo stream response (especially for Turbo Native flows). Returning a stream that updates a frame to include a turbo-visit shim keeps behavior consistent across clients.

If you’re using importmap, a clean Stimulus setup matters: it keeps controllers discoverable and avoids mystery load order bugs. I pin @hotwired/turbo-rails and @hotwired/stimulus, then use controllers index discovery to register everything. The payof