如何将实时数据输入到 NextJS 中？

Question

我刚开始学习Next.js框架。

我需要帮助来解决我现在不明白的问题。在普通的 Vanilla JavaScript 和 React 中，我可以使用 setInterval 方法在 HTML 中显示结果 API。

我的 API 每 3 秒 更改一次数据。我想将此类可变数据合并到我的 Next.js 应用程序中。

下面我将两个 API 组合成一个 props 以将数据传输到其他组件。

export async function getServerSideProps(context) {
    const [twoDApiRes, saveApiRes] = await Promise.all([
        fetch(_liveResult),
        fetch(_localTxt),
    ]);

    const [twoDApi, saveApi] = await Promise.all([
        twoDApiRes.json(),
        saveApiRes.text(),
    ]);

    // Regex
    let csv_data = saveApi.split(/\r?\n|\r/);

    // Loop through
    const retrieveData = csv_data.map((el) => {
        let cell_data = el.split(',');

        return cell_data;
    });

    return {
        props: { twoDApi, retrieveData },
    };
}

要知道的主要事情是你想在 Next.js getServerSideProps.

中 每三秒 更改数据

Answer 1

您可以使用useEffect钩子每3秒刷新一次数据。

// This function will return Promise that resolves required data
async function retrieveData() {
  // retrieves data from the server
}

function MyPage() {
  const [data, setData] = useState();
  const [refreshToken, setRefreshToken] = useState(Math.random());
  
  useEffect(() => {
    retriveData()
      .then(setData)
      .finally(() => {
        // Update refreshToken after 3 seconds so this event will re-trigger and update the data
        setTimeout(() => setRefreshToken(Math.random()), 3000);
      });
  }, [refreshToken]);

  return <div>{data?.name}</div>
}

或者您可以使用带有 {refetchInterval: 3000} 选项的 react-query 库每 3 秒重新获取一次数据。

这里 an example 使用 react-query.

如何将实时数据输入到 NextJS 中？

How to input realtime data into NextJS?

javascript

real-time

reactjs

next.js