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

Я использую 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 делает это из коробки.


reactjs next.js gatsby static-site isomorphic-javascript
person parasomnist    schedule 08.12.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

одна из возможностей была бы, если вы просто хотите выполнить это один раз на сервере, чтобы проверить, присутствует ли параметр 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
}

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

person Thomas Zehe    schedule 10.12.2018
comment
Спасибо за ваш ответ. Но, к сожалению, у меня это не сработало. Я столкнулся с этой ошибкой "dr.getInitialProps()" should resolve to an object, и страница показала. Произошла непредвиденная ошибка. Похоже, мне нужно что-то вернуть, когда getInitialProps () запускается со стороны клиента. Поэтому я попытался вернуть значение по умолчанию (например, {id:}), а затем получил пустую страницу. - person Lawrence Ching; 15.09.2019