Question

我的网页之一需要来自第三方API的数据，我希望在构建时获取该数据并烘焙到最终的HTML中。

我不希望在客户端上进行此呼叫，因为：

CORS仍然阻止请求成功
我必须在客户端上公开API密钥（不，谢谢）

我以为getInitialProps是答案，因为获取的数据确实在构建/导出过程中放入了，但是当我离开页面并返回页面时，getInitialProps被触发客户，破坏一切。

我当前在getInitialProps中的代码如下：

static async getInitialProps(){
    // Get Behance posts
    const behanceEndpoint = `https://www.behance.net/v2/users/${process.env.BEHANCE_USERNAME}/projects?api_key=${process.env.BEHANCE_API_KEY}`
    const behanceRes = await fetch(behanceEndpoint)
    let behancePosts = await behanceRes.json()
    // Return only the required number of posts
    return {
        behancePosts: behancePosts
    }
}

有关如何处理此问题的任何建议或最佳做法？我知道Gatsby.js是开箱即用的。

Answer 1

如果您只想在服务器上执行一次以检查req参数是否存在于getInitialProps中，则是一种可能性：（Documentation） req-HTTP请求对象（仅限服务器）。

一种肮脏的方法：

  static async getInitialProps({ req }){
if (req) {
  // only executed on server
  // Get Behance posts
  const behanceEndpoint = `https://www.behance.net/v2/users/${process.env.BEHANCE_USERNAME}/projects?api_key=${process.env.BEHANCE_API_KEY}`
  const behanceRes = await fetch(behanceEndpoint)
  let behancePosts = await behanceRes.json()
  // Return only the required number of posts
  return {
      behancePosts: behancePosts
  }
} else {
  // client context
}

希望这会有所帮助。

当它们需要来自第三方API的数据时，如何从next.js导出静态HTML页面？

1 个答案: