当需要来自第三方 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
}

希望这会有所帮助。