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

Question

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

P粉477369269 · Answer

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

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