如何使用流式渲染技术提升用户体验

什么是流式渲染？

流式渲染主要思想是将HTML文档分块（chunk）并逐块发送到客户端，而不是等待整个页面完全生成后再发送。

流式渲染不是什么新鲜的技术。早在90年代，网页浏览器就已经开始使用这种方式来处理HTML文档。

在 SPA （单页应用）流行的时代，由于 SPA 的核心是客户端动态地渲染内容，流式渲染没有得到太多关注。如今，随着服务端渲染相关技术的成熟，流式渲染成为可以显著提升首屏加载性能的利器。

Node.js 实现简单流式渲染

HTTP is a first-class citizen in Node.js, designed with streaming and low latency in mind. This makes Node.js well suited for the foundation of a web library or framework.

HTTP 是 Node.js 中的一等公民，其设计时考虑到了流式传输和低延迟。这使得 Node.js 非常适合作为 Web 库或框架的基础。

———— Node.js官网

Node.js 在设计之初就考虑到了流式传输数据，考虑如下代码

const Koa = require('koa');
const app = new Koa();

// 假设数据需要 5 秒的时间来获取
renderAsyncString = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('<h1>Hello World</h1>');
    }, 5000);
  })
}

app.use(async (ctx, next) => {
  ctx.type = 'html';
  ctx.body = await renderAsyncS