Как я могу экспортировать статические HTML-страницы из next.js, когда им нужны данные от стороннего API?

Question

Я использую next.js для построения статических веб-страниц HTML .

Одна из моих веб-страниц нуждается в данных от стороннего 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: ( Документация ) 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
}

Надеюсь, это немного поможет.