在本地运行的 Web 应用程序在推送到 Vercel 时变得无响应

Question

我目前正在 Vercel 上托管一个网站。它具有无服务器功能，用于查询 API 并提取一些数据。

当我在本地运行网站时，无论是通过浏览器支持 Vercel 的本地开发选项 (https://vercel.com/cli)，它都能完美运行。 API 会立即解析，并且可以正常加载 - 对于字面上的单页应用程序来说应该如此。

但是，一旦我将站点推送到 Vercel 并尝试访问它，它似乎就开始使用大量资源，并且只会使我的浏览器完全没有响应。我不明白为什么。

构建是使用“CI=false npm run build”完成的，但其他设置都没有改变——它是一个纯粹的 React 应用程序。

作为参考，这是我的后端无服务器功能代码：

const express = require("express");
const axios = require("axios")

require("dotenv").config();

const app = express();

const apiKey = process.env.APIKEY;

module.exports = async (req, res) => {

    let cryptoData

    await axios.get(`https://rest.coinapi.io/v1/assets?filter_asset_id=BTC,ETH,XLM,XRP,ADA&apikey=${apiKey}`)
        .then((response) => {
            cryptoData = response.data
        })
        .catch((error) => {
            console.log(error)
        })

    res.send(cryptoData)

}

核心功能如下：

const PriceContainer = () => {

  const [responseArray, setResponseArray] = useState([])

  const [bitcoinPrice, setBitcoinPrice] = useState('')
  const [ethereumPrice, setEthereumPrice] = useState('')
  const [stellarPrice, setStellarPrice] = useState('')
  const [xrpPrice, setXrpPrice] = useState('')
  const [cardanoPrice, setCardanoPrice] = useState('')

  useEffect(() => {
    axios.get(("/api/fetchData"))
      .then((response) => {
        setResponseArray(response.data)
      })
      .then(() => {
        responseArray.map(response => {
          if (response.asset_id === 'BTC') {
            setBitcoinPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'ETH') {
            setEthereumPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'XLM') {
            setStellarPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'XRP') {
            setXrpPrice(`$${response.price_usd.toFixed(2)}`)
          } else if (response.asset_id === 'ADA') {
            setCardanoPrice(`$${response.price_usd.toFixed(2)}`)
          }
        })
      })
      .catch((error) => {
        console.log(error)
      })
  }, [responseArray])

  return (
    <div className="price-container">
      <div className="individual-container">
        <PriceBox image="bitcoin" alt="Bitcoin" name="Bitcoin" price={bitcoinPrice} />
        <PriceBox image="ethereum" alt="Ethereum" name="Ethereum" price={ethereumPrice} />
        <PriceBox image="stellar" alt="Stellar Lumens" name="Stellar Lumens" price={stellarPrice} />
        <PriceBox image="xrp" alt="XRP" name="XRP" price={xrpPrice} />
        <PriceBox image="cardano" alt="Cardano" name="Cardano" price={cardanoPrice} />
      </div>
    </div>
  )
}

有没有人对可能导致这种情况的原因有任何建议？真是头疼。