如何将实时数据输入 NextJS？

Posted 2023-03-30

【中文标题】如何将实时数据输入 NextJS？

【英文标题】：How to input realtime data into NextJS?

【发布时间】：2021-06-17 15:23:51

【问题描述】：

我刚开始学习 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 中更改数据。

【问题讨论】：

创建自定义挂钩

【参考方案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。

【讨论】：

我很欣赏它与一个例子一起展示。你有什么优雅的方法来获取我有两个 api url 的数据吗？

您可以使用 Promise.all 并行调用 API 或在后端将请求合并为一个请求（以减少服务器端请求 = 更快的加载时间 = 更好的用户体验），但它需要更改后端.我可能会做你已经做过的事情，因为我懒得考虑更改后端以将加载时间减少 200 毫秒。

感谢您的澄清。我可以很好地理解你在上面解释了什么以及一个例子。我之所以选择“getServerSideProps”是因为我不希望最终用户的任何 api 请求端点能够通过使用浏览器控制台在网络分流器中看到我的 XHR 请求。否则他们将在没有任何确认的情况下使用我的 api。如果您像这样指导我如何在“ServerSideProps”中实现使用，那么我将非常高兴。

@PJK 不幸的是，使用 getServerSideProps 函数无法实现这一点，因为该函数仅在页面加载时运行。之后，您必须在客户端更新数据。如果您不想公开您的 api 密钥，您可以编写简单的 api 服务器函数（检查：nextjs.org/docs/api-routes/introduction）并在客户端调用该函数。

感谢您的解释，提供了非常有用的提示。