Estoy usando DRF como mi API de back-end junto con React.

Estoy haciendo una solicitud GET usando fetch y luego completando una tabla de reacción con los datos proporcionados por DRF.

El problema es que cuando cargo la página por primera vez o cuando la actualizo manualmente, hay un retraso significativo para que se obtengan los datos. Intenté limitarme a 5 elementos, pero aún así siempre toma 2 segundos.

Sin embargo, si hago la misma solicitud después de que la página se haya cargado por completo, la velocidad es normal. He agregado un gif para ilustrar en caso de que no lo expliqué correctamente. Una vez que el rol se actualiza en la base de datos, se vuelve a realizar la misma solicitud GET para volver a llenar la tabla.

Mis vistas, modelos y serializadores:

 @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__'

Código Javascript en caso de que sea relevante:

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