有没有办法使用 getServerSideProps 在 NextJS 中每秒获取数据？答案

【问题标题】：Is there a way to fetch data every second in NextJS with getServerSideProps?有没有办法使用 getServerSideProps 在 NextJS 中每秒获取数据？
【发布时间】：2021-08-15 22:48:32
【问题描述】：

有什么方法可以每秒用 SSR(getServerSideProps) 在 NextJS 中获取 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。

EDIT2：

所以我尝试了这个：

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;
}

【问题讨论】：

为什么不使用 Websockets？）我怀疑你需要这个数据服务器端

标签： reactjs api get fetch next.js

【解决方案1】：

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

【讨论】：

你的意思是我创建了一个 API 路由来获取 api 数据并从我的前端定位我的 api 路由？
我试过了，但我不知道如何将数据解析到我的前端。我好像next不知道filteredCoins
我编辑了我的问题，你能看看有什么问题吗？
应该都可以，但是前端代码需要更多的工作。您应该使用 useEffect 来启动对 API 的获取。另外，api.coingecko 支持 CORS ，所以你甚至不需要调用你的后端，你可以直接从浏览器查询他们的 API。
问题是，我不知道如何在我的FE中使用这些数据，它找不到数据/我无法访问它们。