学习如何在Next.js中实现分页或筛选功能

Question

我正在寻找一种使用传统的页面路由方法在我的Web应用程序中实现分页或过滤的解决方案。我需要使用客户端数据获取吗？当查询字符串发生变化时，不会导致页面内容重新渲染。我不想使用SSG获取全部数据并在客户端进行分页。您能提供一些有效实现这一目标的建议或示例吗？目前关于这个主题的资源有限，我希望能够处理动态数据变化而不影响性能。

尝试将查询字符串传递给getServerSideProps，但它只在刷新时获取数据。页面应该在按钮点击时立即显示过滤/分页内容。

请不要对此进行负评。如果您需要更多信息，请在评论中询问。

Answer 1

我解决了这个问题。对于那些想知道的人，实际上是我犯了一个错误。我把shallow: true放在了router.push里面。所以当我改变查询字符串时，我的页面没有重新渲染。当你改变查询字符串时，请确保在router.push里面放置shallow: false。下面是一个例子：

router.push({ 
    pathname: router.pathname, 
    query: { ...router.query } }, 
    undefined, 
    { 
       shallow: false
    }
);