Как я могу экспортировать статические 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
}

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