TIP: Turbo-stream with HTTP Responses (including GET)

1

Many incorrectly believe that turbo-streams only work with WebSockets. The Turbo Handbook - Streaming from HTTP Responses explains how to use turbo-streams with non-GET requests. We’ve discovered it’s possible to also use turbo-streams with GET requests using turbo-frames. We use this technique for pagination.

The following table might help explain how.

1. Turbo sends a fetch request to the server with:
...`POST`, `PUT`, `PATCH`, or `DELETE` ...turbo-frame `GET`.
2. The server responds with html: 
<turbo-stream ...target="messages">
  <template>
    <div id="message_1">
    	 This div will be appended.
    </div>
  </template>
</turbo-stream>

<turbo-frame id="turbo_frame_message_1">
  <turbo-stream ... target="messages">
    <template>
      <div id="message_1">
        This div will be appended.
      </div>
    </template>
  </turbo-stream>
</turbo-frame>
3. Turbo appends the turbo-stream HTML
...to the document. ...inside the matching turbo-frame#id.
4. Turbo detects the DOM mutation includes a turbo-stream. It processes the turbo-stream action (append, replace, delete, etc.) and removes the turbo-stream element from the DOM (so it does not process it again).
3 Likes