Как создать кнопку "Загрузить еще"? в Django

Это скорей больше крик о помощи, чем просто вопрос.

У меня есть список книг, находящийся в базе данных, я передаю их в контекст view функции тем самым выгружаю массу объектов в html(что есть затратно в больших масштабах), но вместо этого нужно сделать кнопку, нажимая, она бы подгружала по немного книг (не обновляя страницу при этом и не переходя на другую, т.е. при помощи джаваскрипта).

На протяжении 2-ух дней я искал решении как на русских источниках так и на английских, однако упирался либо в какое-то слишком "расплывчатое" решение(и вовсе без всякого кода), либо в решения на костылях где сервер тебе возвращает тоны контента все одним разом, а в скрипте просто потихоньку отображает элементы которые по сути уже переданы клиенту.

Я, наверное, понял алгоритм по которому требуется выполнять эту задачу :

• По нажатию кнопки, должен выполниться скрипт который говорит серверу достать следующие n книг из всего списка.
• Сервер достает из базы данных следующее n количество книг, превращает их в json данные и передает скрипту.
• Скрипт подгружает полученный контент с сервера в текущую html страницу в конкретное место.

Но как это все реализовать я честно не пойму, поэтому я вас прошу умоляю помочь с этой задачей.

views.py

def books(request):
    books_list = Book.objects.all()[:3]
    context = {
        'books_list': books_list,
    }
    return render(request, 'bookapp/books.html', context)

books.html

    {% if books_list %}

        {% for book in books_list %}
        <a href="{% url 'bookapp:particular_book' book.pk %}" class="book-wrapper">
            <div class="book">
                <h1 class="book-title">{{ book.book_name }}</h1><br>
                <span class="book-genre">Жанр книги: {{ book.book_genre }}</span><br>
                <span class="book-year">Год книги: {{ book.book_year }}</span>
            </div>
        </a>

        <a href="{% url 'bookapp:particular_book' book.pk %}" class="book-wrapper">
            <div class="book">
                <h1 class="book-title">{{ book.book_name }}</h1><br>
                <span class="book-genre">Жанр книги: {{ book.book_genre }}</span><br>
                <span class="book-year">Год книги: {{ book.book_year }}</span>
            </div>
        </a>
        {% endfor %}

    {% else %}
        <p>No books are available.</p>
    {% endif %}
    </div>

    {# 'Load more' button #}
    <a href="#" id="load-more">Загрузить еще</a>

    <script type="text/javascript">
        =====================
        Сюда запихнуть скрипт
        =====================
    </scripts