DEV Community

Gustavo Garcia Pereira
Gustavo Garcia Pereira

Posted on

Guia Definitivo para Otimizar Aplicações FastAPI: 5 Estratégias de Performance com Python e Vue.js

#fastapiperformance #pythonvue #aplicaçõesfastapi

Aprenda 5 técnicas práticas para melhorar o desempenho de apps FastAPI com Python e Vue.js. Exemplos de código, erros comuns e casos reais incluídos!

Introdução

FastAPI tornou-se um framework essencial para APIs rápidas e escaláveis. Combinado com Vue.js no frontend, permite criar aplicações modernas, mas otimizar performance exige estratégias específicas. Veja como evitar gargalos e garantir velocidade em produção.

1. Async/Await: Domine a Execução Não-Bloqueante (Python)

Problema: Rotas síncronas bloqueiam o event loop do FastAPI, reduzindo throughput.

Solução: Use async def para operações I/O (chamadas a APIs, bancos de dados).

from fastapi import FastAPI  
import httpx  

app = FastAPI()  

@app.get("/dados-externos")  
async def fetch_data():  
    async with httpx.AsyncClient() as client:  
        resposta = await client.get("https://api.externa.com/dados")  
    return resposta.json()
Enter fullscreen mode Exit fullscreen mode

Comparação:

  • Síncrono: 100 req/s → Assíncrono: 1500+ req/s (teste com 10 workers).

2. Cache de Dados com Redis (Python + Docker)

Cenário: Consultas repetidas ao banco aumentam latência.

Implementação:

from fastapi import FastAPI  
from redis import asyncio as aioredis  

app = FastAPI()  
redis = aioredis.from_url("redis://localhost")  

@app.get("/produto/{id}")  
async def get_produto(id: int):  
    cache = await redis.get(f"produto:{id}")  
    if cache:  
        return JSONResponse(content=json.loads(cache))  
    # Consulta ao banco e atualização do cache...
Enter fullscreen mode Exit fullscreen mode

Ferramenta: Use docker-compose para subir Redis rapidamente:

services:  
  redis:  
    image: redis:alpine  
    ports:  
      - "6379:6379"
Enter fullscreen mode Exit fullscreen mode

3. Otimização de Consultas no Banco de Dados (SQLAlchemy)

Erro Comum: Trazer todas as colunas com SELECT *.

Solução: Use .options(load_only()) no SQLAlchemy:

from sqlalchemy.orm import load_only  

produtos = await db.execute(  
    select(Produto).options(load_only(Produto.nome, Produto.preço))  
)
Enter fullscreen mode Exit fullscreen mode

Dica: Índices para campos filtrados (ex: produto.categoria_id).

4. Compressão de Respostas HTTP (FastAPI Middleware)

Impacto: Reduz tamanho de payloads em até 70%.

Implementação:

from fastapi.middleware.gzip import GZipMiddleware  

app.add_middleware(GZipMiddleware, minimum_size=500)
Enter fullscreen mode Exit fullscreen mode

Configuração: Aplique apenas para conteúdos grandes (ex: JSON, HTML).

5. Lazy Loading no Vue.js (Frontend)

Problema: Carregamento inicial lento de SPA.

Solução: Dynamic imports para componentes não críticos:

// Vue 3  
const ModalLogin = defineAsyncComponent(() => import('@/components/ModalLogin.vue'));
Enter fullscreen mode Exit fullscreen mode

Framework: Use vite-plugin-pages para rotas automáticas com code splitting.

Caso Real: E-commerce com 10k Requisições/Minuto

Desafio: Latência de 2s na página de produtos.

Soluções Aplicadas:

  • Cache de catálogo com Redis (TTL de 10min).
  • Compressão GZip + otimização de imagens via CDN.
  • Async endpoints para tracking de usuários. Resultado: Latência média de 400ms e redução de 40% no uso do servidor.

Erros Fatais a Evitar

❌ Misturar código síncrono (ex: requests.get) em rotas assíncronas.

❌ Não usar conexões persistentes para bancos de dados (ex: reutilize pools).

❌ Ignorar monitoramento (implemente métricas com Prometheus + Grafana).

Conclusão

Otimizar aplicações FastAPI exige atenção a back-end (Python) e front-end (Vue.js). Experimente as técnicas acima, monitore resultados com ferramentas como Locust para testes de carga, e compartilhe sua experiência nos comentários!

Top comments (0)