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

Question

我正在使用next.js来build static HTML webpages。

我的一个网页需要来自第三方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

一种可能性是，如果你只是想在服务器上执行一次以检查getInitialProps中是否存在req参数：（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
}

希望这有点帮助。