Understanding Streaming by Building a Simple One
You’ve probably heard about streaming before. With the rise of AI, React RSC, and other new technologies, streaming is becoming more and more popular.
But what exactly is streaming? How does it work? Many developers use it when building applications, but not everyone understands how it actually works under the hood.
In this article, I’ll build a simple streaming server that works similarly to RSC.
What is Streaming?
According to the Streams Standard:
Large swathes of the web platform are built on streaming data: that is, data that is created, processed, and consumed in an incremental fashion, without ever reading all of it into memory.
Simply put, streaming is a way to handle data by sending it in chunks, instead of all at once, like this:
const response = await fetch(url);
for await (const chunk of response.body) {
// this is a piece of data that sent from server, you can do something with it (e.g. render it)
console.log(chunk);
}
// instead of this
const response = await fetch(url);
const data = await response.text();
console.log(data);
Not only less data to load at a time, but also providing a way to real-time getting new data from server in the same request, the most used case we all know is the text completion from AI.
Transfer-Encoding: chunked
This header is the key to making streaming work. By setting this header, the server sends data in chunks instead of all at once.
200 OK
Transfer-Encoding: chunked
data1
data2
data3
Data is sent in a series of chunks. Content can be sent in streams of unknown size to be transferred as a sequence of length-delimited buffers, so the sender can keep a connection open, and let the recipient know when it has received the entire message
Read more about Transfer-Encoding: chunked at MDN.
So how does RSC leverage this to make their streaming works? Specifically how does <Suspense> works?
RSC uses streaming to progressively render components and send them to the client. When a component is wrapped in <Suspense>, React can start streaming the HTML for other components while waiting for the suspended component to load.
Here’s how it works under the hood:
- When React encounters a
<Suspense>boundary, it renders a loading fallback initially - The suspended component (e.g. one fetching data) continues processing on the server
- Once the component is ready, React streams the HTML for that component as a new chunk
- Special JavaScript instructions are included to replace the loading state (aka the fallback) with the new content
For example, here is what the server sends to the client (simplified form):
- first chunk:
<html>
<body>
<div id="root">
<div class="component-1" id="suspense-boundary#1">
Loading...
</div>
</div>
</body>
</html>
-
loading data… e.g for 2 seconds
-
second chunk:
<script>
const suspenseBoundary = document.getElementById("suspense-boundary#1");
suspenseBoundary.innerHTML = "<div>The component is ready</div>";
</script>
The second chunk run a script to replace the loading state with the new content, this is how RSC works under the hood.
The real RSC is more complex, but the core idea is the same, you can look at the Playground for more details.
Build a Simple Streaming Server
If previous section is feel a bit abstract, let’s build a simple streaming server to understand how it works.
We are known how RSC works under the hood, so we can build a simple streaming server to simulate the RSC.
Let’s start with a simple server that returns a Hello World message, I use Hono in this example as it’s support running in the browser.
import { Hono } from "hono"
const server = new Hono()
server.get("/", (c) => {
return c.html(`
<html>
<body>
<div>Hello World</div>
</body>
</html>`)
})
export default server
Let’s make it more complex, add a Loading... message when the server is loading.
import { Hono } from "hono"
const server = new Hono()
server.get("/", (c) => {
// create a stream
const stream = new ReadableStream({
async start(controller) {
// return initial html
controller.enqueue(`
<html>
<body>
<div id="loading">Loading...</div>
</body>
</html>`)
// simulate loading
await new Promise(resolve => setTimeout(resolve, 2000))
controller.enqueue(`
<script>
const loading = document.getElementById("loading");
loading.innerHTML = "<div>Hello World</div>";
</script>`)
controller.close()
}
})
return new Response(stream, {
headers: {
"Content-Type": "text/html",
"Transfer-Encoding": "chunked",
},
})
})
Let’s make it more complex, add a skeleton loading state and multiple components.
import { Hono } from "hono"
const server = new Hono()
server.get("/", (c) => {
const stream = new ReadableStream({
async start(controller) {
// Initial HTML with skeleton loading states
controller.enqueue(`
<html>
<body>
<div id="app">
<header id="header" class="skeleton">
<div class="loading-title"></div>
<div class="loading-subtitle"></div>
</header>
<main>
<div id="profile" class="skeleton">
<div class="loading-avatar"></div>
<div class="loading-bio"></div>
</div>
<div id="posts" class="skeleton">
<div class="loading-post"></div>
<div class="loading-post"></div>
<div class="loading-post"></div>
</div>
</main>
</div>
<style>
.skeleton {
animation: pulse 1.5s infinite;
}
.loading-title {
height: 32px;
background: #eee;
margin: 20px 0;
}
.loading-subtitle {
height: 16px;
background: #eee;
width: 60%;
}
.loading-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: #eee;
}
.loading-bio {
height: 60px;
background: #eee;
margin: 20px 0;
}
.loading-post {
height: 100px;
background: #eee;
margin: 20px 0;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
</body>
</html>`)
// Simulate header loading
await new Promise(resolve => setTimeout(resolve, 1000))
controller.enqueue(`
<script>
document.getElementById("header").innerHTML = \`
<h1>Welcome to My Blog</h1>
<p>Exploring thoughts and ideas</p>
\`;
document.getElementById("header").classList.remove("skeleton");
</script>`)
// Simulate profile loading
await new Promise(resolve => setTimeout(resolve, 1500))
controller.enqueue(`
<script>
document.getElementById("profile").innerHTML = \`
<img src="https://placehold.co/100x100" alt="Profile" style="border-radius: 50%">
<p>Hello! I'm a developer who loves building things for the web.</p>
\`;
document.getElementById("profile").classList.remove("skeleton");
</script>`)
// Simulate posts loading
await new Promise(resolve => setTimeout(resolve, 1000))
controller.enqueue(`
<script>
document.getElementById("posts").innerHTML = \`
<article>
<h2>Understanding Streaming</h2>
<p>Learn how streaming can improve user experience...</p>
</article>
<article>
<h2>Web Performance Tips</h2>
<p>Essential tips for faster websites...</p>
</article>
<article>
<h2>Modern Web Development</h2>
<p>Exploring the latest trends in web development...</p>
</article>
\`;
document.getElementById("posts").classList.remove("skeleton");
</script>`)
controller.close()
}
})
return new Response(stream, {
headers: {
"Content-Type": "text/html",
"Transfer-Encoding": "chunked",
},
})
})
export default server
In real-world implementations, we need to handle many additional concerns, but this example demonstrates the core concepts of streaming responses.
Tips: Hono provides built-in support for streaming JSX components, under the hood it uses the same technique with the previous example, making it easier to write streaming HTML responses. here is an example:
import { renderToReadableStream, Suspense } from 'hono/jsx/streaming'
//...
app.get('/', (c) => {
const stream = renderToReadableStream(
<html>
<body>
<Suspense fallback={<div>loading...</div>}>
<Component />
</Suspense>
</body>
</html>
)
return c.body(stream, {
headers: {
'Content-Type': 'text/html; charset=UTF-8',
'Transfer-Encoding': 'chunked',
},
})
})
Conclusion
In this article, we built a simple streaming server to understand how streaming works.
We also learned how RSC leverages streaming to progressively render components and send them to the client.
The future is bright with AI and streaming makes it more possible.
Happy coding!
