A quick example first
Chunked transfer encoding
Chunked transfer encoding was a mechanism introduced a long time ago with HTTP 1.1 which allows for data packet (or chunk) to be sent to the receiver, in our case the browser. How cool is that? Basically it means you can send chunks of data to the browser as soon as they are available and the HTTP connection won’t close until the final chunk is received.
Here comes streams
How can we send chunks of data to the browser? The answer is streams.
send to the browser chunk of data as soon as they are available
If you’d like to learn more about streams, I recommend these excellent articles by James Halliday and Max Ogden. To summarize, streams allow you to asynchronously read or write chunks of data immediately as they are received.
Using nodejs, streams are really straightforward and many of the native modules provided by node actually inherit or implement streams. For example, you can create web servers that return streams instead of buffering the entire content of a page into memory:
And this is the key! We can send chunks of data to the browser as soon as they are available using streams.
In the code above, we send a name to the browser every second and inform the browser to close the HTTP connection after 4 seconds once we have sent all of the users names. Run the following code and let the magic happen! The module HTTP lets you use chunk transfer encoding through streams.
While sending data in chunks, the browser will always render elements in order. For example, the browser won’t receive what comes after the list of users until we have sent all the names (after 4 seconds).
This is a problem! Static content should be rendered right away…
CSS Flexbox comes to rescue
Remember the amazing GIF at the beginning of this article? The HTML code to render such a page would logically be something like:
As the chunks of data are sent in order, the footer would appear only after a few seconds. This is a poor user experience and ideally we want to be able to send all static content right away and not make the user wait.
Using flexbox, we can render the footer before the list of users (still displaying the footer at the bottom of the page). Here is the code:
Voila! Although I would like to finish the article on this note, I will point out some of the benefits of using chunked transfer encoding with streams:
- SEO friendly (server side rendering)
- less front end mess
- critical rendering path?