reactjs - 推送查询参数时如何防止getServerSideProps再次运行？

Question

我问是因为我不知道该怎么做。当我的页面加载时，我有一个表格 yield ，它是我使用 getServerSideProps 从 API 获得的。像这样:

export const getServerSideProps: GetServerSideProps<Props> = async (
  context
) => {
  const { query } = context
  const { limit, offset } = query

  const reqData = await axios({
    method: 'POST',
    url: 'http://localhost:3000/api/kurbanlik',
    data: {
      limit,
      offset,
    },
  })
  const { data, total } = await reqData.data

  return {
    props: {
      data, // Hayvan Data (All Rows)
      total,
      query,
    },
  }
}

我的表格行基于此数据。当我 onRowClick 任何表格行时，页面将使用 router.push id 查询参数重定向。对于前。 localhost:3000/?id:102112。当我单击每一行时，特定于该行的模态组件将打开。并更改 id 查询参数。

但是我有一个问题。当我点击每一行时，我从 getServerSideProps 获得的所有表格数据都会被再次调用。我只需要在呈现第一页时执行此操作。我不需要它一遍又一遍地重新创建表数据。

我怎样才能避免这种情况？

Answer 1

在 router.push 调用中使用 shallow: true 来防止 getServerSideProps 再次运行。

来自Shallow Routing文档:

Shallow routing allows you to change the URL without running datafetching methods again, that includes getServerSideProps,getStaticProps, and getInitialProps.

router.push('/?id=102112', undefined, { shallow: true })