Turbo Stream by Jacob Ebey is a streaming data transport for built-in JavaScript features such as Promises, Dates, RegExps, Maps, Sets and more.
import { decode, encode } from "turbo-stream";
const encodedStream = encode(Promise.resolve(42));
const decoded = await decode(encodedStream);
console.log(decoded); // 42Turbo Stream powers single-fetch data loaders in React Router which enables streaming Promises from server loaders.
import type { Route } from "./+types/my-route";
export async function loader({}: Route.LoaderArgs) {
// note this is NOT awaited
let nonCriticalData = new Promise((res) =>
setTimeout(() => res("non-critical"), 5000)
);
let criticalData = await new Promise((res) =>
setTimeout(() => res("critical"), 300)
);
return { nonCriticalData, criticalData };
}
Turbo Stream v3 is out with support for a new encoding format which supports ReadableStream and many other JS features.
This means it’ll be coming to React Router very soon. While it’s possible to encode streams into promises, it’ll be good to see React Router support streams natively.
Leave a Reply