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

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

我刚刚开始学习 NEXT JS 框架。

我需要帮助来解决我现在不明白的问题。在普通的 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 中“每三秒”更改数据。

我期待与您合作解决这个问题。

解决方法

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

// This function will return Promise that resolves required data
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} 选项的 docs 库每 3 秒重新获取一次数据。

这是使用 react-query 的 react-query。