Next.js 13服务端Fetch请求失败（UND_ERR_CONNECT_TIMEOUT）如何解决？

我在测试Next 13测试版时，遇到服务端数据获取失败的问题。页面位于app/pageName/page.js，尝试在服务端调用Django REST API并渲染数据，但fetch操作约10秒后超时失败，错误码为UND_ERR_CONNECT_TIMEOUT。

页面代码如下：

import React from 'react'

async function callApi() {
  const data = await fetch('https://api-psepeti.herokuapp.com/api/items/?search=yil');
  return data.json();
}

export default async function Page() {
  const data = await callApi();
  return (
    <main>
        {data.results && data.results.map((product, index) => (
          <h1>{product.title}</h1>
        ))}
    </main>
  )
}

已尝试的解决方法 #

• 使用Axios替代fetch，同样出现超时失败；
• 在Next配置文件中添加enableUndici: true配置，无效果；
• 测试其他模拟API，部分可以正常请求，部分同样超时；
• 客户端环境下所有请求均正常；
• 在Next 12中使用getStaticProps或getServerSideProps可以正常获取该API数据；
• 在其他React应用中请求该API也正常。

环境信息 #

• Node.js: 18.12.0
• Next.js: 13.1.0
• React: 18.2.0
• React-DOM: 18.2.0
• npm: 9.2.0
• 操作系统: M1 macOS Ventura 13.1

Next配置文件（next.config.js） #

const nextConfig = {
  experimental: {
    appDir: true,
    enableUndici: true
  },
}

module.exports = nextConfig

核心问题：Next 12中服务端请求该API完全正常，但在Next 13的App Router模式下，服务端fetch请求总是超时失败，寻求可行的解决方案。

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