Next.js でページネーションまたはフィルタリング機能を実装する方法を学習します。

Question

従来のページ ルーティング方法を使用して Web アプリケーションにページングまたはフィルタリングを実装するソリューションを探しています。クライアント側のデータ取得を使用する必要がありますか?クエリ文字列が変更されても、ページ コンテンツが再レンダリングされることはありません。 SSG を使用してデータ全体を取得し、クライアント側でページ分割することはしたくありません。これを効果的に達成するためのアドバイスや例をいくつか教えていただけますか?現在、このトピックに関するリソースは限られているため、パフォーマンスに影響を与えることなく動的なデータ変更を処理できるようにしたいと考えています。

クエリ文字列を getServerSideProps に渡そうとしましたが、更新時にのみデータが取得されます。ボタンをクリックすると、ページにはフィルタリング/ページ分割されたコンテンツがすぐに表示されます。

これに関して否定的なコメントを残さないでください。さらに詳しい情報が必要な場合は、コメント欄でお問い合わせください。

Answer 1

この問題は解決しました。不思議に思っている人のために言っておきますが、実は私は間違いを犯しました。 router.push 内に shallow: true を入れます。したがって、クエリ文字列を変更しても、ページは再レンダリングされません。クエリ文字列を変更する場合は、必ず router.push 内に shallow: false を含めてください。以下は例です:

リーリー