Django Rest Framework GET-запрос медленный только при первоначальной загрузке или перезагрузке страницы

Я использую DRF в качестве бэкенд API в сочетании с React.

Я делаю GET-запрос, используя fetch, а затем заполняю таблицу react данными, предоставленными DRF.

Проблема в том, что когда я впервые загружаю страницу или обновляю ее вручную, происходит значительная задержка при получении данных. Я пробовал ограничиться 5 элементами, но все равно всегда требуется 2 секунды.

Однако, если я делаю тот же запрос после полной загрузки страницы, скорость нормальная. Я добавил рисунок, чтобы проиллюстрировать, если я не объяснил все правильно. Как только роль обновляется в БД, тот же GET-запрос выполняется снова для пополнения таблицы.

enter image description here Мои представления, модели и сериализаторы:

@api_view(['GET'])
def getUserData(request):
    items = User.objects.all()

    # enabling pagination because api_view doesn't have it by default
    paginator = LimitOffsetPagination()
    result_page = paginator.paginate_queryset(items, request)

    # creating 1 serializer instance for paginated and 1 for full
    serializer_page = UserSerializer(result_page, many=True)
    serializer_full = UserSerializer(items, many=True)

    # if limit is not specified, return all object data
    if 'limit' not in request.query_params:
        return Response(serializer_full.data)
    else:
        return Response(serializer_page.data)
class Role(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='roles')
    assigned_role = models.CharField(max_length=100)
class RoleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Role
        fields = ['user', 'assigned_role']

class UserSerializer(serializers.ModelSerializer):
    roles = RoleSerializer(read_only=True, many=False)

    class Meta:
        model = User
        fields = '__all__'

Код Javascript, если это имеет отношение к делу:

useEffect(() => {

            const fetchUsers = (num) => {
                fetch(`http://127.0.0.1:8000/api/users/?limit=${num}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log('Data loaded in useEffect')
                        dataObj = data
                        setUsers(dataObj)
                        setLoading(true)


                    })
            }
            
            fetchUsers(20)
        }

        , [searchDone])

В инструментах разработчика, открытых внизу, перейдите на вкладку "Сеть". Затем обновите страницу.

Вы должны показать диаграмму, сколько времени занял каждый запрос. Можете ли вы отправить снимок экрана?

Вернуться на верх