學習如何在Next.js中實現分頁或篩選功能

Question

我正在尋找一種使用傳統的頁面路由方法在我的網頁應用程式中實現分頁或過濾的解決方案。我需要使用客戶端資料獲取嗎？當查詢字串發生變化時，不會導致頁面內容重新渲染。我不想使用SSG獲取全部資料並在客戶端進行分頁。您能提供一些有效實現這一目標的建議或範例嗎？目前關於這個主題的資源有限，我希望能夠處理動態資料變化而不影響效能。

嘗試將查詢字串傳遞給getServerSideProps，但它只會在刷新時取得資料。頁面應該在按鈕點擊時立即顯示過濾/分頁內容。

請不要對此進行負評。如果您需要更多信息，請在評論中詢問。

Answer 1

我解決了這個問題。對於那些想知道的人，實際上是我犯了一個錯誤。我把shallow: true放在了router.push裡面。所以當我改變查詢字串時，我的頁面沒有重新渲染。當你改變查詢字串時，請確保在router.push裡面放置shallow: false。下面是一個例子：

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