Организация пагинации "Load More" в Next.js

Я разрабатываю страницу поиска фильмов, где фильтры сохраняются в URL (searchParams).

Текущая архитектура

• FilmsLoader (Server Component): Получает фильтры из searchParams, делает запрос к БД/API за первой страницей списка и передает данные в дочерний компонент.
• FilmList (Client Component): Вложен в лоадер, принимает начальный массив фильмов через props и отображает их.

Задача

Мне нужно добавить в FilmList кнопку "Загрузить еще", которая будет подгружать следующие страницы (infinite scroll или пагинация) и добавлять их к текущему списку.

Вопрос

Как архитектурно правильно организовать запрос данных с клиента на сервер в Next.js (App Router), чтобы это было безопасно и оптимизировано?