最近，我一直想知道SPA的最佳用途是尽快获取页面上的数据。例如，如果我以Gmail为例。它先加载邮件，然后加载视频群聊部分。对于Facebook也是如此。

现在，我们所有人都在使用Next.js，主要是因为我们想进行SSR并使页面对SEO友好。

我现在有2个疑问

1）如何进行页面级查询。

请考虑一个页面，该页面包含大约5个不同的部分，其数据来自不同的API。那么明智地使用5个API并向他们承诺全部？

const [upcomingExams,groupsMenu] = await Promise.all([
    fetch(UPCOMING_EXAMS_URL).then(res => res.json()),fetch(GROUPS_MENU_URL).then(res => res.json())
]);
return { upcomingExams,groupsMenu };

或者最好有一个API来返回类似以下内容的

HomePageApi : {
  ApiOneData : {...}
  ApiTwoData : {...}
  ApiThreeData : {...}
}

我很想听听您对此的看法。另外，请考虑以下事实：我希望所有这些API的数据都是SSR。

2）另外，当有人通过单击进入此主页时。我应该以上述任何一种格式再次击打所有这些API，还是可以利用类似以下的方式

i）将页面加载到服务器上时，它必须使用上述格式之一。

ii）在组件级别也有单独的API匹配项（它们不在服务器上运行），如果请求来自客户端，则使匹配项存在于组件内部。因此，只要有它们的数据，我便开始渲染这些组件，而不必担心其他组件，例如是否已收到它们的响应。

我认为这会有所作为吗？还是这样做明智？请分享您的意见或您在项目中的处理方式。