I’m currently playing with Turbo and Stimulus with a node backend, so I can try and understand at a conceptual level how it works.
One thing I haven’t figured out is how to manage a turbo stream. Let’s say I want to implement an infinite scroller list view. The initial load will be handled by the server, and it will include the first 10 records.
I want to perform an action to load the next 10, and append them to the list. For simplicity’s sake, let’s just say there is a “next 10” button at the bottom of the list, so that when I click on it, the client will make a request to a different url (say /items/page/2). The server can just return the
<turbo-stream> snippet of html, with the next 10, and append them to the list.
I can do the above approach and it works as expected. However, if I were to visit that page directly, the server would only return that
<turbo-stream>, and I do not see the whole page rendered.
So I presume the server needs to know when the client wants the turbo stream version of a page vs. the whole page. I see that there is a
turbo-stream=* content type parameter, but that seems to always be present when using the
Turbo.visit API, which seems to be the mechanism that handles navigating with the back/forward buttons, so that won’t work either.
I feel like I’m missing some high level pieces here. Some help would be highly appreciated!