I'm using DRF as my backend API in conjunction with React.

I am making a GET request using fetch and then populating a react table with the data provided by DRF.

The issue is that when I first load the page or when I manually refresh it, theres a significant delay for the data to be fetched. I've tried limiting to 5 items but it still always takes 2 seconds.

However, if I make the same request after the page has fully loaded the speed is normal. I've added a gif to illustrate in case I didn't explain it properly. Once the role is updated in the DB, the same GET request is done again to repopulate the table.

My views, models and serializers:

@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 code in case it's relevant:

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])