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

提示：记录工作中遇到的需求及解决办法

提示：以下是本篇文章正文内容，下面案例可供参考

什么是流式渲染？

流式渲染主要思想是将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 renderAsyncString();
  await next();
});

app.listen(3000, () => {
   
  console.log('App is listening on port 3000');
});

这是一个简化的业务场景，运行起来后,会在5秒的白屏后显示一段 hello world 文字。

没有用户会喜欢一个会白屏5秒的网页！在 web.dev 对 TTFB 的