# Guía de Optimización de Consultas al Backend

## Optimizaciones Implementadas

### 1. **Debouncing en Búsquedas** ✅

- Archivo: `utils/debounce.js`
- Implementado en: `pages/clients/index.vue`
- **Beneficio**: Reduce consultas mientras el usuario escribe (espera 300ms)
- **Impacto**: Hasta 90% menos peticiones en búsquedas

### 2. **Caché con TTL (Time To Live)** ✅

- Implementado en: `stores/clients.js`
- **Duración**: 5 minutos
- **Beneficio**: Evita recargar datos si ya están frescos
- **Uso**:

  ```js
  await clientsStore.fetchClients() // Usa caché si es válida
  await clientsStore.fetchClients(null, null, true) // Fuerza recarga
  ```

### 3. **Lazy Loading** ✅

- Archivo: `composables/useLazyLoad.js`
- **Uso**: Cargar datos solo cuando el elemento es visible
- **Ejemplo**:

  ```vue
  <script setup>
  import { useLazyLoad } from '~/composables/useLazyLoad';
  
  const { target, isVisible } = useLazyLoad(() => {
    // Cargar datos aquí
    loadMoreData();
  });
  </script>
  
  <template>
    <div ref="target">
      <!-- Contenido -->
    </div>
  </template>
  ```

## Recomendaciones Adicionales para el Backend

### 4. **Paginación en el Backend** 🔴 CRÍTICO

Actualmente traes TODOS los registros y paginas en frontend. Cambia a:

**Backend (API)**:

``` http
GET /api/clients?page=1&limit=50&search=nombre&status=Activa
```

**Frontend (Store)**:

```js
async fetchClients(page = 1, limit = 50, filters = {}) {
  const params = { page, limit, ...filters };
  const response = await apiRequest(API_ROUTES.CLIENTS.LIST, 'GET', params, token);
  
  return {
    data: response.data,
    total: response.total,
    currentPage: response.page,
    totalPages: Math.ceil(response.total / limit)
  };
}
```

### 5. **Índices en Base de Datos** 🔴 CRÍTICO

Asegúrate de tener índices en:

- `nombre` (para búsquedas)
- `estado` (para filtros)
- `tipo_empresa_id` (para filtros)
- `fecha_creacion` (para ordenamiento)

**SQL**:

```sql
CREATE INDEX idx_clients_nombre ON clients(nombre);
CREATE INDEX idx_clients_estado ON clients(estado);
CREATE INDEX idx_clients_tipo_empresa ON clients(tipo_empresa_id);
CREATE INDEX idx_clients_fecha ON clients(fecha_creacion);
```

### 6. **Seleccionar Solo Campos Necesarios**

En lugar de `SELECT *`, selecciona solo lo que necesitas:

```sql
-- ❌ Malo
SELECT * FROM clients

-- ✅ Bueno
SELECT id, nombre, cuit, direccion, localidad, provincia, estado 
FROM clients
```

### 7. **Request Cancellation**

Cancela peticiones anteriores cuando se hace una nueva:

**Store**:

```js
state: () => ({
  abortController: null
}),

actions: {
  async fetchClients() {
    // Cancelar petición anterior
    if (this.abortController) {
      this.abortController.abort();
    }
    
    this.abortController = new AbortController();
    
    const response = await fetch(url, {
      signal: this.abortController.signal
    });
  }
}
```

### 8. **Compresión GZIP/Brotli**

Configura tu backend para comprimir respuestas:

**Express.js**:

```js
const compression = require('compression');
app.use(compression());
```

**Nginx**:

```nginx
gzip on;
gzip_types application/json;
```

### 9. **Virtual Scrolling**

Para listas muy largas (>1000 items), usa virtual scrolling:

```bash
npm install vue-virtual-scroller
```

```vue
<RecycleScroller
  :items="clients"
  :item-size="50"
  key-field="id"
>
  <template #default="{ item }">
    <div class="client-row">{{ item.nombre }}</div>
  </template>
</RecycleScroller>
```

### 10. **Conexión HTTP/2**

Asegúrate de que tu servidor use HTTP/2 para multiplexing de peticiones.

## Métricas de Mejora Esperadas

| Optimización | Mejora Esperada |
| -------------- | ----------------- |
| Debouncing | 70-90% menos peticiones |
| Caché | 50-80% menos carga servidor |
| Paginación Backend | 95% menos datos transferidos |
| Índices DB | 90% más rápidas consultas |
| Compresión | 60-80% menos tamaño respuesta |
| Virtual Scrolling | 99% menos renderizado DOM |

## Monitoreo

Agrega logging para medir tiempos:

```js
async fetchClients() {
  const start = performance.now();
  
  try {
    const response = await apiRequest(...);
    const end = performance.now();
    
    // console.log(`Fetch took ${end - start}ms`);
    // console.log(`Data size: ${JSON.stringify(response).length} bytes`);
  } catch (err) {
    console.error('Error:', err);
  }
}
```

## Prioridad de Implementación

1. 🔴 **ALTA**: Paginación Backend + Índices DB
2. 🟡 **MEDIA**: Debouncing (ya implementado)
3. 🟡 **MEDIA**: Caché (ya implementado)
4. 🟢 **BAJA**: Virtual Scrolling (solo si >5000 registros)
5. 🟢 **BAJA**: Request Cancellation

## Testing

Para probar las mejoras:

```js
// En el navegador (DevTools Console)
performance.mark('start');
await clientsStore.fetchClients();
performance.mark('end');
performance.measure('fetchClients', 'start', 'end');
console.table(performance.getEntriesByType('measure'));
```