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

Question

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

我的一个网页需要来自第三方 API 的数据，我希望在构建时获取这些数据并将其烘焙到生成的 HTML 中。

我不希望此调用发生在客户端上，因为:

• CORS 无论如何都会阻止请求成功
• 我必须在客户端公开 API key (不用了，谢谢)

我认为 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
}

希望这对您有一点帮助。