Next.js getServerSideProps发起7+请求时返回502错误

在Next.js项目中，页面的getServerSideProps方法通过自定义工具函数fetchMany（内部基于Promise.allSettled）并行发起9个API请求，将结果作为props传递给组件。当前遇到问题：当并行请求数量达到7个及以上时，页面返回502错误；若减少至6个请求则页面正常加载。

已尝试的无效方案 #

• 逐个使用await发起9个请求；
• 混合6个并行请求+3个串行请求；

已排除的因素 #

已排除超时（设置30秒延时后页面可加载）、响应内容大小（请求返回空数组仍报错）的问题。

Next.js页面代码 #

import AuditForm from 'containers/AuditForm';
import { useEffect } from 'react';
import { useStore } from 'store';
import { fetcher, fetchMany } from 'utils/fetcher';

const EditId = ({
  editId,
  auditors,
  contractors,
  user,
  parentId,
  invoices,
  history,
  extraForms,
  qas,
  audit,
  child,
  // emailTemplates,
}) => {
  const {
    setAuditors,
    setContractors,
    setUser,
    // setEmailTemplates
  } = useStore();

  useEffect(() => {
    setAuditors(auditors);
    setContractors(contractors);
    setUser(user);
    // setEmailTemplates(emailTemplates);
  }, []);

  return (
    <AuditForm
      audit={audit}
      child={child}
      parent={audit.parent}
      editId={editId}
      parentId={parentId}
      invoices={invoices}
      history={history}
      extraForms={extraForms}
      qas={qas}
    />
  );
};

export default EditId;

export const getServerSideProps = async ({ req, res, query }) => {
  const token = req.cookies['accessToken'];
  const userId = req.cookies['userId'];
  const hasAcceptedTerms = req.cookies['hasAcceptedTerms'];

  if (!token) {
    return {
      redirect: {
        permanent: false,
        destination: '/login',
      },
    };
  }

  if (hasAcceptedTerms !== 'true') {
    return {
      redirect: {
        permanent: false,
        destination: '/profiles',
      },
    };
  }

  const fetchItems = await fetchMany({
    audit: fetcher('Audit', 'Find', { _id: query.editId }, { req, res }),
    child: fetcher('Audit', 'Find', { parent: query.editId }, { req, res }),
    contractors: fetcher('User', 'List', { role: 'Contractor' }, { req, res }),
    auditors: fetcher('User', 'List', { role: 'Auditor' }, { req, res }),
    user: fetcher('User', 'Find', { _id: userId }, { req, res }),
    invoices: fetcher(
      'Invoice',
      'List',
      { model: 'Audit', modelId: query.editId },
      { req, res }
    ),
    history: fetcher(
      'History',
      'List',
      {
        model: 'Audit',
        modelId: query.editId,
      },
      { req, res }
    ),
    extraForms: fetcher(
      'Form',
      'List',
      {
        model: 'Audit',
        modelId: query.editId,
      },
      { req, res }
    ),
    qas: fetcher('QA', 'List', { audit: query.editId }, { req, res }),
  });

  return {
    props: {
      editId: query.editId,
      parentId: query.parentId || null,
      ...fetchItems,
    },
  };
};

fetchMany工具函数代码 #

import { getCookie, setCookie, deleteCookie } from 'cookies-next';
import Router from 'next/router';
import { createToast } from './createToast';

export const fetcher = async (model, action, data, options = null) => {
  try {
    const accessToken = getCookie('accessToken', options);
    const idToken = getCookie('idToken', options);
    const refreshToken = getCookie('refreshToken', options);
    const perm = getCookie('perm', options);
    const userId = getCookie('userId', options);

    const res = await fetch(process.env.NEXT_PUBLIC_API_ENDPOINT + '/crud', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model,
        action,
        data,
        tokens: { accessToken, idToken, refreshToken },
        perm,
        userId,
      }),
    });
    const response = await res.json();
    if (response.tokens) {
      setCookie('accessToken', response.tokens.accessToken, options);
      setCookie('idToken', response.tokens.idToken, options);
      setCookie('refreshToken', response.tokens.refreshToken, options);
    }
    if (response.success) return response.data;
    createToast(
      response?.message || 'An error occured when retrieving data',
      'warning'
    );
    if (response.loggedOut) {
      deleteCookie('accessToken', options);
      deleteCookie('idToken', null, options);
      deleteCookie('refreshToken', null, options);
      if (!options) Router.push({ pathname: '/login' });
    }
    return null;
  } catch (e) {
    console.log(
      `Crud with model : ${model} and action: ${action} with data: ${JSON.stringify(
        data
      )} failed due to error: ${JSON.stringify(e)} `
    );
    return null;
  }
};

export const fetchMany = async (calls) => {
  try {
    const results = await Promise.allSettled(Object.values(calls));
    const resultObject = {};
    Object.keys(calls).forEach((key, i) => {
      resultObject[key] = results[i].value;
    });
    return resultObject;
  } catch (e) {
    console.log(`fetchMany failed due to error: ${JSON.stringify(e)} `);
    return {};
  }
};

内容的提问来源于stack exchange，提问作者shahriyardm