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

我正在使用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是开箱即用的 .

1 回答

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

希望这有点帮助 .

回复于 2024-04-29T12:29:33+08:00

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

1 回答

相关问题