Erfahren Sie, wie Sie Paginierungs- oder Filterfunktionen in Next.js implementieren

Question

Ich suche nach einer Lösung, um Paging oder Filterung in meiner Webanwendung mithilfe herkömmlicher Methoden zur Seitenweiterleitung zu implementieren. Muss ich den clientseitigen Datenabruf verwenden? Wenn sich die Abfragezeichenfolge ändert, wird der Seiteninhalt nicht erneut gerendert. Ich möchte SSG nicht verwenden, um die gesamten Daten abzurufen und auf der Clientseite zu paginieren. Können Sie einige Ratschläge oder Beispiele geben, wie dies effektiv erreicht werden kann? Zu diesem Thema stehen derzeit nur begrenzte Ressourcen zur Verfügung und ich würde gerne in der Lage sein, dynamische Datenänderungen ohne Beeinträchtigung der Leistung zu verarbeiten.

Ich habe versucht, die Abfragezeichenfolge an getServerSideProps zu übergeben, aber die Daten werden nur bei der Aktualisierung abgerufen. Die Seite sollte beim Klicken auf die Schaltfläche sofort gefilterten/paginierten Inhalt anzeigen.

Bitte hinterlassen Sie keine negativen Kommentare dazu. Wenn Sie weitere Informationen benötigen, fragen Sie bitte in den Kommentaren nach.

Answer 1

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

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