# Frontend y backend

> El frontend es la parte de tu aplicación que funciona en el navegador de quien la visita (pantallas, botones y formularios), mientras que el backend se ejecuta en un servidor seguro donde comprueba sesiones, consulta la base de datos, usa claves secretas y llama a la IA.

## Analogía

Piensa en un restaurante: el frontend es el comedor donde la gente lee la carta, se sienta a la mesa y hace su pedido. El backend es la cocina a puerta cerrada, donde están las recetas, la caja fuerte, la despensa y los fogones.

## Cómo funciona

Toda aplicación web tiene dos caras. El frontend funciona en el equipo o el teléfono de quien la visita, dentro de su navegador: dibuja la pantalla, responde a los clics y muestra mensajes claros. Como se ejecuta en el dispositivo visitante, cualquiera puede inspeccionar el código y los datos que llegan allí.

El backend se ejecuta en un servidor bajo tu control: localhost mientras pruebas y vercel cuando la app está publicada. Como nadie de fuera puede fisgonear dentro del servidor, el backend es el único lugar seguro para guardar un secret (como una api-key), leer o escribir en tu database y llamar a un model de IA.

Por esa misma razón, el backend nunca confía en una petición solo porque un botón estuviera oculto en el frontend. Cada acción del servidor (llamada Server Action o Route Handler en Next.js) comprueba primero la sesión y los permisos de quien la envía, valida los datos de entrada y solo entonces toca la base de datos.

Con el framework Next.js (App Router), tu frontend y tu backend conviven en la misma carpeta del repo. No necesitas dos proyectos separados; tu coding-agent marca qué archivos se ejecutan en el servidor y cuáles en el navegador, y se asegura de que ningún secreto lleve el prefijo `NEXT_PUBLIC_`.

## En tu proyecto

Al redactar tu spec, no tienes que diseñar rutas de servidor por tu cuenta. Solo describes qué ve quien usa la app y qué debe recordar o calcular, y tu agente coloca los componentes visuales en el frontend y mantiene las sesiones, consultas a la base de datos y llamadas a la IA estrictamente en el backend.

## Copia para tu agente

```text
Enséñame qué partes de mi app se ejecutan en el navegador (frontend) y cuáles en el servidor (backend), y comprueba que ningún secreto ni llamada a la IA quede expuesto al navegador.
```

---
Fuente: [Agentic Makers](https://agenticmakers.app/es/aprende/frontend-y-backend) · Licencia: CC BY 4.0