软件技术学习笔记

去年的时候，为了提升用户首屏显示时间，我们使用React SSR。但是，前段时间用户访问量比较大，发现用户导航之后首屏很久才出来。查看链路追踪，发现后端接口的响应时间远大于平常。

SSR的目的是为了让用户更快地看到内容，但是后端接口超时就白屏很久。为了解决这个问题，在SSR请求后端接口时，也启动一个超时Promise。如果超时先返回，立刻给用户返回CSR HTML模板，确保用户尽快能够看得界面。还没有数据的Loading界面，总比一直白屏好。

import { timeout } from 'promise-timeout';

const backendPromises = [
  // 请求后端接口与准备SSR数据
];

try {
  await timeout(Promise.all(backendPromises), 1000);
  return (<SSR />)
}
catch (e) {
  return (<CSR />);
}