Nextjs: визуализировать данные из запроса GET при каждой загрузке страницы

Question

Я пытаюсь загрузить данные из запроса GET в таблицу на моем сайте Next.js.Он работает нормально, когда я запускаю его локально, но когда я публикую его на статическом сайте, он не обновляет таблицу каждый раз.

Я выяснил, что при переносе данных на статический сайт данные перетаскиваются в статическую HTML-страницу, но я хочу, чтобы они каждый раз вытягивали данные в таблицу.Как сделать так, чтобы он заполнял данные только данными из запроса GET, а не данными на статической HTML-странице?

Я использую следующий код для выполнения запроса get:

static getInitialProps = async function() {

    var data;
    await axios.get('https://myapi.com')
        .then(res => {
            data = res.data;
        });
    return {
        items: data.TableData
    }

}

Я ожидаю, что он будет извлекать данные каждый раз, но он будет активирован только при экспорте, и после этого он не изменится.

Answer 1

Если вы хотите получить данные во время выполнения, вы можете использовать хук жизненного цикла componentDidMount и вместо этого перевести его в состояние компонента.

async componentDidMount() {
  const res = await axios.get('https://myapi.com')
  this.setState({ items: res.data });
}