Learn how to implement pagination or filtering functionality in Next.js

Question

I'm looking for a solution to implement paging or filtering in my web application using traditional page routing methods. Do I need to use client side data fetching? When the query string changes, it will not cause the page content to be re-rendered. I don't want to use SSG to get the entire data and paginate it on the client side. Can you provide some advice or examples of how to achieve this effectively? There are currently limited resources on this topic and I would like to be able to handle dynamic data changes without affecting performance. Tried passing query string to getServerSideProps but it only gets it on refresh

P粉477369269 · Answer

I solved this problem. For those wondering, I actually made a mistake. I put shallow: true inside router.push. So when I change the query string, my page doesn't re-render. When you change the query string, be sure to put shallow: false inside router.push. Below is an example:

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