getServerSideProps API提取时间太长，使网站看起来没有响应能力-- Next.js

Question

我正在通过页面负载上的API获取数据。API非常慢，我知道getServerSideProps不能对此做任何事情。我的问题是，在数据被获取之前，它不会启动导航。大约需要6-8秒。这让人觉得这个网站似乎没有反应。

在等待获取数据时，我希望有一个页面加载的框架。

这个是可能的吗？

下面是我的代码的样子(简化了--我在gSSP中进行了两个api调用，这是它花费这么长时间的原因之一)。

`export async function getServerSideProps () {
  const [data1Res, data2Res] = await Promise.all ([

    fetch ('url1'),
    fetch ('url2')

  ]);

  const [data1, data2] = await Promise.all([
    data1Res.json(), 
    data2Res.json()
  ]);
  
  return {
    props: { data1, data2 }, // will be passed to the page component as props
  }
}`

我尝试过使用getInitialProps或getStaticProps，但这并没有帮助。我还尝试将页面加载添加到_app.jsx，它什么也不做。

我正在考虑把我的提取放到一个API路由中，然后在客户端调用那个API路由.唯一的问题是，这可能会使API加载速度更慢，bc，然后有两个API调用。然而，至少会有即时导航和框架，使用户知道站点没有响应。

这是Next.js特有的问题吗？这似乎是一个很常见的问题。希望我错过了一些基本的东西。

基本上，我不关心我的API调用需要这么长时间，但我只需要它不会让人感到异常的没有响应。

Answer 1

您需要修改获取数据的链接吗？如果是这样的话，也许只有修复API才有帮助。否则，您只需在初始化时获取它，然后通过搜索查询进行筛选。