Action function stream response

[rreeves8]

Hi, I want to stream a bunch of text data back to the client from an action function.

Use action data only returns the data after the stream is closed. Is there a way to get each update from the stream ?

^ test code

[gustavopch]

I had a similar problem on Firebase Functions. It was buffering the stream (it was actually Firebase Hosting's CDN doing that) and only delivering after finished. Had to move to Fly to be able to stream properly.

[rreeves8]

How did you make the client hook update the document on every stream event ? Was it the response headers ?

[gustavopch]

I'm just using defer, not dealing with the stream directly, so not entirely sure if the problem you're having is the same as mine.

[ganesh-rao]

I'm facing the same scenario. Have you had any luck with resolving this?

[kiliman]

Here's an article on how to use event streams with Remix.

https://sergiodxa.com/tutorials/use-server-sent-events-with-remix

I also have an example here. The event stream example does not depend on Single Data Fetch, so it still applies.

https://github.com/kiliman/remix-single-fetch

[ganesh-rao]

@kiliman Thanks for your reply. I don't believe that is the solution to the issue raised in this thread as SSE works only for GET requests. The action function is invoked on POST requests.

If anyone has any other ideas, please share!

[rreeves8]

Fr, the ability to return a readable stream would be nice.

[vladinator1000]

Bummer that Remix doesn't support this. Would love a framework-blessed way to do this:

// some-action.ts
export async function action({ request, params, context }: Route.ActionArgs) {
  // ...
  return stream
}

export default Component() {
  let fetcher = useStreamingFetcher()
  let [streamOutput, setStreamOutput] = useState('')
  
  useEffect(() => {
    if (fetcher.message === "message") {
      setStreamOutput((old) => old + fetcher.data)
    } 
  }, [fetcher.message, fetcher.data])
  
  return <fetcher.Form
    action="some-action"
    encType="multipart/form-data"
    method="post"
  >
    <input type="file" name="file" />
  </fetcher.Form>
}

[admirsaheta]

Streaming text data from an action function can get tricky, Remix doesn't have built-in functionality for it. But, we can still make it work!

Might be https://remix.run/docs/en/main/guides/streaming

WebSockets are best for real-time, back-and-forth communication. For pushing data from server to client, SSE or Action Data Chunking could work depending on your needs.

Action Data Chunking isn't true streaming, but it can feel similar. We'd break down your data into smaller portions. In your action function, process the data chunk by chunk. After each chunk is done, you'd return an object containing the processed data and a flag indicating if there's more data to come. The client-side would handle the response and keep making requests until the flag says "stop, we're done!"

Let me know if you have any questions about these approaches, or if there's another way you were thinking of tackling this.

[lodi-g]

Hey @admirsaheta,

Thanks for the tips. I think WebSockets are a bit overkill for what I'm trying to build.
Can you expand on Action Data Chunking? What did you mean?

Thanks!