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 the query string to getServerSideProps but it only gets the data on refresh. The page should show filtered/paginated content immediately on button click.

Please do not leave negative comments about this. If you need more information, please ask in the comments.

Answer 1

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
    }
);