Nextjs：每次页面加载时从 GET 请求中渲染数据

Question

我正在尝试将数据从 GET 请求加载到我的 Next.js 站点上的 table。当我在本地运行它工作正常，但是当我将它发布到静态站点时，它不会每次都更新 table。

我发现当您将数据导出到静态站点时它会将数据拉入静态 HTML 页面，但我希望它每次都将数据拉入 table。我如何确保它只使用来自 GET 请求的数据而不是静态 HTML 页面上的数据填充数据？

我正在使用以下代码执行获取请求：

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 });
}

Nextjs：每次页面加载时从 GET 请求中渲染数据

Nextjs: Render data from GET request each time the page loads

static

reactjs

server-side-rendering

next.js