Can streaming server functions work with Cloudflare tunnels?

[eliaxelang007]

Hi guys!
I've run into a problem while trying to share my Leptos app through Cloudflare tunnels.
I'm pretty sure this is a bug with Cloudflare, but could I ask you guys for help to find out if that's really the case, and if it is, find workarounds for it?
Thanks Leptos community!

Describe the bug
When I used server functions with the StreamingJson output type that return Result<JsonStream<T>, ServerFnError>, they failed to function when the local server was tunneled using cloudflared tunnel --url localhost:3000 --protocol http2

Leptos Dependencies
In the quest to debug this dysfunction, I made a minimal example by slightly editing the https://github.com/leptos-rs/start-actix starter template.

Its Cargo.toml dependencies looks like this:

actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", optional = true, features = ["macros"] }
console_error_panic_hook = "0.1"
http = { version = "1.0.0", optional = true }
leptos = { version = "0.6" }
leptos_meta = { version = "0.6" }
leptos_actix = { version = "0.6", optional = true }
leptos_router = { version = "0.6" }
wasm-bindgen = "=0.2.95"
futures-util = "0.3.31"
tokio = "1.41.1"

The extra dependencies, tokio and futures-util, are to access async functionality such as futures_util::stream::FuturesUnordered and tokio::time::sleep.

To Reproduce

1. Create a starter project using cargo leptos new --git leptos-rs/start
2. Create a server function that uses StreamingJson and JsonStream
3. Use that function in a page.

app.rs

use leptos::*;
use leptos_meta::*;
use leptos_router::*;
use server_fn::codec::{JsonStream, StreamingJson};

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Stylesheet id="leptos" href="/pkg/cloudflare-tunnel-streaming-bug.css"/>

        <Title text="Welcome to Leptos"/>

        <Router>
            <main>
                <Routes>
                    <Route path="" view=HomePage/>
                    <Route path="/*any" view=NotFound/>
                </Routes>
            </main>
        </Router>
    }
}

#[server(StreamCounter, output = StreamingJson)]
async fn stream_counter() -> Result<JsonStream<usize>, ServerFnError> {
    use std::time::Duration;

    let counter = 
        futures_util::
        stream::
        FuturesUnordered::
        from_iter(
        (0usize..=30).map(
            |elapsed_seconds| async move {
                tokio::
                time::
                sleep(
                    Duration::from_secs(elapsed_seconds as u64)
                ).await;

                Ok(elapsed_seconds)
            }
        )
    );

    Ok(JsonStream::new(counter))
}

#[component]
fn HomePage() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    spawn_local(
        async move {
            use futures_util::stream::StreamExt;

            let mut counter = stream_counter()
                .await
                .expect("Failed to stream counter to client!")
                .into_inner();

            while let Some(Ok(streamed_count)) = counter.next().await {
                set_count.set(streamed_count);
            }
        }
    );

    view! {
        <h1>{count}</h1>
    }
}

#[component]
fn NotFound() -> impl IntoView {
    #[cfg(feature = "ssr")]
    {
        let resp = expect_context::<leptos_actix::ResponseOptions>();
        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
    }

    view! {
        <h1>"Not Found"</h1>
    }
}

4. Run cargo leptos watch
5. Run cloudflared tunnel --url localhost:3000 --protocol http2
6. Compare localhost:3000 and the cloudflare tunnel page.

Expected behavior
The number in the top middle of the screen should increment every second for 30 seconds. (localhost:3000)

Actual behavior
The number in the top middle of the screen stays at 0. (cloudflare tunnel)

Additional context
The cloudflare tunnel logs show this:

I suspect that cloudflare doesn't forward HTTP requests until they're complete, and because technically, the stream is still in progress, the page doesn't work.

[eliaxelang007]

Seems like there's no consistent Leptos based workaround for this and it really needs to be resolved on Cloudflare's end.

cloudflare/cloudflared#199

[eliaxelang007]

For anyone coming across this in the future, try Ngrok!
https://www.sitepoint.com/use-ngrok-test-local-site/
I'm not sponsored by them in any way but when I shared my site through their tunneling, streaming server functions just worked.