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

Question

我问是因为我不知道该怎么做。当我的页面加载时，我从 API 和 getServerSideProps 获得了 table 收益。像这样：

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,
    },
  }
}

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

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

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

Answer 1

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

来自 Shallow Routing 文档：

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

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

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

How to prevent getServerSideProps from running again when pushing query param?

routes

reactjs

server-side-rendering

next.js

next-router

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

How to prevent getServerSideProps from running again when pushing query param?

routes

reactjs

server-side-rendering

next.js

next-router

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