优化方案#

• 放弃使用SSR渲染，全部采用客户端请求渲染；
• 修改现有fetch，通过AbortController、setTimeout手动添加超时处理；
• 将getServerSideProps的请求方式从fetch迁移到axios，借助axios本身自带的超时配置，添加接口超时处理。

方案比较#

• 放弃SSR不可取，因为客户端并发请求返回顺序的问题可能会导致首页的入场动画混乱，且失去了部分首屏性能优化；
• 修改fetch方法，需要手写大量代码，且AbortController是在Node.js 14.17.0+开始支持，当然也可以不去放弃掉请求，可以通过setTimeout和Promise.race提前reject，不过需要因为是自行实现，风险大。
• axios是十分成熟的请求库，且项目中已经引入，通过axios为请求添加超时处理十分方便。

实际解决方案#

将fetch迁移到axios，借助axios已有的超时处理配置解决当前问题，添加首页对getServerSideProps中请求超时的兜底，服务端请求超时后，立即返回空数组。

首页所有的数据消费组件继续兜底，当从getServerSideProps中获取的数据为空数组时，会在客户端再发一次请求，尝试从客户端获取数据。

import axios from 'axios';

const ssrAxios = axios.create({
  timeout: 3000,
  timeoutErrorMessage: 'Request timed out'
});

export default ssrAxios;

export const getServerSideProps = async () => {
  const addr = process.env.API_ADDR;

  // 使用 Promise.allSettled 获取所有请求的结果
  const [
    list1Res,
    // ... ,
    list2Res,
  ] = await Promise.allSettled([
    ssrAxios.get(`${addr}/api/list1`),
    // ... ,
    ssrAxios.get(`${addr}/api/list2`),
  ]);

  // 处理每个请求的结果
  const list1 = handleFetchResult(list1Res, 'list1');
  // ... ;
  const list2 = handleFetchResult(list2Res, 'list2');

  return {
    props: {
      list1: list1 ?? [],
      // ... ,
      list2: list2 ?? []
    },
  };
};

// Helper function to handle fetch results
const handleFetchResult =  (result: PromiseSettledResult<any>, key: string) => {
  if (result.status === 'rejected') {
    console.error(`Failed to fetch ${key}:`, result.reason);
    return [];
  }

  const { data, success } = result.value.data;
  if (!success) {
    console.error(`Failed to fetch ${key}`);
    return [];
  }

  switch (key) {
    case 'list1':
      return data?.result || [];
	// ... ;
    case 'list2':
      return data?.result || [];
    default:
      return [];
  }
};