Rails Hotwire: render multiple Turbo Frames progressively

rubyonrails-talk
1

Hi everyone,

:construction: Question: Can we actually stream and render multiple Turbo Frames progressively in a single request?

I’m currently exploring how to progressive render multiple Turbo Frames within a single HTTP request or over stream. Essentially trying to approximate a breadth-first streaming model, similar to Dan Abramov’s Progressive JSON idea.

From what we understand:

  • Hotwire does allow sending multiple <turbo-stream> updates in one response, rendering multiple actions).
  • Hotwire does not support streaming partial frame content as it becomes ready in a single response. That is, you cannot begin rendering <turbo-frame id="a">...</turbo-frame> and later flush <turbo-frame id="b">...</turbo-frame> progressively in the same request lifecycle.
  • Lazy-loaded frames (src + loading=lazy) do allow parallel loading, but require multiple requests.

I also rad article from Vladimir Dementyev, which is an interesting read in this direction too.

2

Just a super quick thing that came to mind. Have a custom turbo-stream action which takes a bunch of parameters. these parameters should be the turbo frame identifiers. it should find those frames and do a “refresh” on them. Not sure exactly how right now, but for sure it’s possible. Play around with the attributes. Try to simulate an async frame.

1 Like
3

Interesting question, but I’m confused by the part where you emphasise rendering “Turbo Frames” progressively, as opposed to just rendering the HTML progressively.

The whole point of async loaded turbo frames is to load sections of the page over multiple requests. So if you want to load all in one request it’s really not important if you’re loading turbo frames or just regular HTML. Sure, some content might be regular turbo frames because that’s how the UI is composed, but it doesn’t sound relevant for the current problem.

Regarding loading content in a streaming fashion. If you’re streaming HTML and you’re rendering it in order, that’s just regular HTML streaming. But if you want to update out of order, e.g. render the full HTML with some parts empty but then continue streaming HTML to update previous elements, turbo streams will serve you well. They’ll be evaluated as soon as they’re attached to the document tree so you can continue rendering various turbo-stream append actions, adding content to arbitrary elements by DOM ID (and some of those element might be turbo frames but I’d expect that is probably irrelevant for the mechanism).

Did I understand your question correctly?

With a more concrete example it might be clearer.

4

Hi, By adding Turbo::StreamsChannel, which integrates ActionCable, you become more independent.

Regular Turbo has one request and one response. However, with Turbo::StreamsChannel, you can respond from anywhere (not only from a controller, but also from a model, for example).

However, this requires a bit more setup. You have to add a listener. Once the setup is complete, however, you have more channels.