有没有一种方法可以在NextJS中使用getServerSideProps每秒获取数据?

ugmeyewa  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(104)

是否有任何方法可以在NextJS中每秒使用SSR(getServerSideProps)获取API数据?这样客户端每隔一秒就会向服务器发出一个请求,以获取最新的API数据。
有什么想法吗

export const getServerSideProps = async () => {
  const res = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const filteredCoins = await res.json();

  return {
    props: {
      filteredCoins,
    },
  };
};

字符串
编辑:这是在我的index.js文件中。我仍然需要从组件返回filteredCoins
编辑2:
所以我试了这个:

setInterval(() => {
  async function fetchCoins() {
    const res = await fetch("http://localhost:3000/api/v1/coindata");
    const filteredCoins = await res.json();

    return {
      filteredCoins,
    };
  }
}, 1000);


使用此API路由:

export default async function coindata(req, res) {
  const apiData = await fetchData();

  res.status(200).json({ data: apiData });
}

async function fetchData() {
  const resp = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const data = resp.json();

  return data;
}

qfe3c7zg

qfe3c7zg1#

按照目前的设置方式,您需要每秒重新加载用户浏览器。相反,您应该创建一个API路由,并通过setInterval从前端查询该API路由,该API路由可以具有与您的getServesideProps几乎相同的代码,但它不会返回对象,而是将数据与响应一起发回。了解the docs中的next.js API路由

相关问题