我可以避免使用 NextJS 的 getServerSideProps 进行双 API 调用吗？

Question

我正在修改 NextJS 的 getServerSideProps。我看到当我从头开始请求页面时，我会收到完全水合的内容。然后，当我导航到新页面时，会进行 API 调用，它会接收一些用于重新填充页面的 JSON 数据。

我不喜欢的是新的 API 调用实际上是在进行两次调用。例如我的getServerSideProps 有一个axios.get() 电话。所以在点击新页面时，我得到：

1. 打电话给example.com/_next/data/1231234/....
2. 该调用必须在后台运行我的 getServerSideProps() 及其 axios.get() 以检索新的 JSON 数据。

那么有没有办法避免双重 API 调用？我希望在第一个页面加载后，点击新页面就跳到第二步。

在非 NextJS 应用程序上，我会在页面加载时运行类似 useEffect() 的内容，但显然页面的第一次运行不会返回完整内容，出于搜索引擎的目的，我会喜欢返回完整的内容。我看过一些讲座，其中 Google 说他们确实运行 javascript 并查看完整内容，但对于所有其他引擎来说也可能是安全的。

Answer 1

getServerSideProps 将始终在请求时运行——无论何时您点击页面（或者可能使用预取，默认值，next/link）这将导致页面的预渲染使用来自getServerSideProps 的数据旁注：如果您使用next API 中间件，那么您可以避免ajax 调用，只需导入直接在getServerSideProps 中运行的方法。

听起来您想在构建时获取数据并可以静态呈现页面？如果是这样，宁愿使用getStaticProps。

如果您愿意，您也可以避免两者并在useEffect 中进行 API 调用，但当然，一旦页面加载，代码将在客户端运行。 getServerSideProps 将在呈现给客户端之前预呈现带有数据的页面。