Does the local runtime support streaming response?
When I deploy, the page can respond with streaming, but the page render at same time when it locally through dev.
https://flat-wood-88f1.269476124.workers.dev/
This is my Code :
async function handleRequest(request: Request, env: Env): Promise<Response> {
const stream = new ReadableStream({
async start(controller) {
const skeleton = `<html>
<head><title>Loading...</title></head>
<body>
<div id="skeleton">Loading content...</div>`;
controller.enqueue(new TextEncoder().encode(skeleton));
for(let i = 0; i < 5; i++) {
const loadingPlaceholder = `<div id="loading-chunk-${i}">Chunk ${i + 1} is loading...</div>`;
controller.enqueue(new TextEncoder().encode(loadingPlaceholder));
}
async function pushChunks() {
for (let i = 0; i < 5; i++) {
const chunk = `<div>✅ Chunk ${i + 1}</div>`;
await delay(1000);
const replaceScript = `<script>
document.getElementById('loading-chunk-${i}').outerHTML = \`${chunk}\`;
</script>`;
controller.enqueue(new TextEncoder().encode(replaceScript));
}
controller.enqueue(new TextEncoder().encode('</body></html>'));
controller.close();
}
pushChunks();
await delay(2000);
const response = await env.WORKER_B.fetch(request);
const data = await response.text();
controller.enqueue(new TextEncoder().encode(data));
}
});
return new Response(stream, {
headers: {
'Content-Type': 'text/html; charset=utf-8',
'Cache-Control': 'no-cache'
}
});
}
function delay(ms: number): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function handleRequest(request: Request, env: Env): Promise<Response> {
const stream = new ReadableStream({
async start(controller) {
const skeleton = `<html>
<head><title>Loading...</title></head>
<body>
<div id="skeleton">Loading content...</div>`;
controller.enqueue(new TextEncoder().encode(skeleton));
for(let i = 0; i < 5; i++) {
const loadingPlaceholder = `<div id="loading-chunk-${i}">Chunk ${i + 1} is loading...</div>`;
controller.enqueue(new TextEncoder().encode(loadingPlaceholder));
}
async function pushChunks() {
for (let i = 0; i < 5; i++) {
const chunk = `<div>✅ Chunk ${i + 1}</div>`;
await delay(1000);
const replaceScript = `<script>
document.getElementById('loading-chunk-${i}').outerHTML = \`${chunk}\`;
</script>`;
controller.enqueue(new TextEncoder().encode(replaceScript));
}
controller.enqueue(new TextEncoder().encode('</body></html>'));
controller.close();
}
pushChunks();
await delay(2000);
const response = await env.WORKER_B.fetch(request);
const data = await response.text();
controller.enqueue(new TextEncoder().encode(data));
}
});
return new Response(stream, {
headers: {
'Content-Type': 'text/html; charset=utf-8',
'Cache-Control': 'no-cache'
}
});
}
function delay(ms: number): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, ms));
}
1 Reply
It does not apparently, I found out this warning in the docs. Thus local previewing can be misleading ..
