- Semantic UI React を UI フレームワークとした React with TypeScript で実装されたフロントサイド
- ORM に MyBatis を利用した SpringBoot3 で実装されたサーバーサイド
上記構成を1つのリポジトリに入れ込んだページネーションのサンプルプログラムを作成しました。
Sematic UI React の Pagination コンポーネントを利用してページネーションを実装していて、ページネーションでページ遷移を行った時に、サーバサイドのAPIをコールして画面描画に必要なデータだけを取得して、フロント側で再描画する仕組みです。サーバーサイドでは、MyBatis の Mapper を利用して SQLクエリを発行した上で、必要データを抽出して、RestController 経由で JSON に変換してフロントサイドに返す仕組みを実装しています。
https://github.com/shinroh/pagenation-sample-in-springboot-and-react