Découvrez comment implémenter la fonctionnalité de pagination ou de filtrage dans Next.js

Question

Je recherche une solution pour implémenter la pagination ou le filtrage dans mon application Web à l'aide des méthodes traditionnelles de routage de pages. Dois-je utiliser la récupération de données côté client ? Lorsque la chaîne de requête change, le contenu de la page ne sera pas restitué. Je ne veux pas utiliser SSG pour obtenir l'intégralité des données et les paginer côté client. Pouvez-vous fournir des conseils ou des exemples sur la façon d’y parvenir efficacement ? Les ressources sur ce sujet sont actuellement limitées et j'aimerais pouvoir gérer les modifications dynamiques des données sans affecter les performances.

J'ai essayé de transmettre la chaîne de requête à getServerSideProps, mais les données ne sont obtenues que lors de l'actualisation. La page doit afficher le contenu filtré/paginé immédiatement après avoir cliqué sur le bouton.

Veuillez ne pas laisser de commentaires négatifs à ce sujet. Si vous avez besoin de plus d'informations, veuillez le demander dans les commentaires.

Answer 1

J'ai résolu ce problème. Pour ceux qui se demandent, j'ai effectivement fait une erreur. J'ai mis shallow: true放在了router.push里面。所以当我改变查询字符串时，我的页面没有重新渲染。当你改变查询字符串时，请确保在router.push里面放置shallow: false. Voici un exemple :

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