Frontend/backend y cliente/servidor: el "IT/OT" del software
Cliente/servidor es una relación entre dos procesos: uno pide, otro responde. Frontend/backend es una separación de responsabilidades: uno presenta e interactúa, otro guarda y decide. Se confunden porque en la web típica coinciden, pero hay frontend que corre en el servidor, backend que corre en el cliente, y aplicaciones con ambos en el mismo proceso. Saber separar los dos ejes permite razonar sobre dónde debe vivir cada pieza de lógica.
1Cliente/servidor: un rol, no una máquina
Hay un proceso que escucha peticiones (servidor) y procesos que inician peticiones (clientes). Es relativo: el servidor web es servidor del navegador y cliente de la base de datos, del DNS y de una pasarela de pago externa. "Cliente" y "servidor" describen quién pide y quién responde en una conversación concreta, no qué máquina es cada uno.
Navegador --petición HTTP--> Servidor web/API --consulta SQL--> BD
--resolución--> DNS
--petición HTTP--> API externa (pago)Alternativa: peer-to-peer (P2P), donde cada nodo es cliente y servidor a la vez (BitTorrent, Bitcoin, Git entre repositorios). No hay centro: cliente/servidor es una elección, no una ley.
| Acepción de "servidor" | Ejemplo |
|---|---|
| Máquina física | "El servidor está en el armario del sótano" |
| Proceso que escucha | "Arranca el servidor con npm run dev" |
| Rol en una conversación | "Postgres actúa como servidor de la aplicación" |
| Máquina virtual / instancia | "Levantamos tres servidores en AWS" |
| Contenedor | "Cada microservicio corre en su propio servidor" |
| Función serverless | "Esto va en un servidor serverless" |
| El backend entero | "Pregúntale al servidor si el usuario existe" |
"Cliente" tiene el mismo problema, agravado porque en la empresa "cliente" es quien paga (UD1-02): "el cliente quiere que el cliente no pueda ver ese campo" es una frase normal en una reunión.
2Frontend/backend: responsabilidades, no lugares
Frontend presenta información e interactúa con el usuario. Backend guarda datos, aplica reglas y coordina con otros sistemas. Es una división por responsabilidad, y existe donde no hay red:
- Un editor de fotos: frontend (ventana, menús, lienzo) y backend (motor de filtros, formato de archivo), en el mismo proceso.
- Una CLI: frontend mínimo (parseo de argumentos, salida formateada) y backend (lo que hace).
- Un compilador: frontend (análisis léxico y sintáctico) y backend (generación de código). LLVM: muchos frontends (C, Rust, Swift) sobre un backend común — nada que ver con navegadores.
- "Backend de almacenamiento": implementación intercambiable de una interfaz ("esta biblioteca soporta varios backends: disco, S3, memoria").
3Por qué se confunden los dos ejes
En la web canónica de los 2010, los ejes se alinean: frontend (UI, JS) ↔ cliente (navegador); backend (API, BD) ↔ servidor (máquina remota). Cuando esto es cierto, "el frontend" y "el cliente" son equivalentes. Pero es un accidente histórico:
| Situación | Dónde corre el frontend | Dónde corre el backend |
|---|---|---|
| Web clásica (PHP, JSP, Django) | Servidor y navegador | Servidor |
| SPA (React/Angular/Vue + REST) | Navegador | Servidor |
| SSR / meta-frameworks (Next.js, Nuxt) | Servidor y navegador | Servidor |
| React Server Components | Solo servidor (parte) | Servidor |
| App móvil nativa | Dispositivo | Servidor (API) + capa local (SQLite) |
| Escritorio con Electron/Tauri | Máquina local | Local + servidores remotos |
| Edge functions | — | En cientos de puntos de red, cerca del usuario |
| BFF (Backend For Frontend) | Navegador/móvil | Un backend por cada frontend, delante del real |
| App local-first (Linear, Figma) | Local | Local, con sincronización — el servidor es espejo, no fuente de verdad |
Conclusión operativa: ante cualquier pieza de código, dos preguntas separadas — ¿qué responsabilidad tiene? ¿dónde se ejecuta? — sin dar por hecho que una determina la otra.
4Dónde vive cada lógica
| Lógica | Dónde | Por qué |
|---|---|---|
| Validación de formato | Cliente y servidor | Cliente: respuesta inmediata. Servidor: el cliente no es de fiar |
| Autorización | Servidor, siempre | Si se decide en cliente, basta modificar el JS para saltársela |
| Precios, descuentos, totales | Servidor | Un precio calculado en cliente es un precio que el usuario elige |
| Estado de la interfaz | Cliente | No le importa a nadie más |
| Secretos (claves de API, credenciales) | Servidor, nunca en cliente | Todo lo que llega al navegador es público |
| Datos sin conexión | Cliente, con sincronización | Caso móvil / local-first |
5Monolito, microservicios y la vuelta al monolito
- Monolito: una aplicación, un despliegue, una base de datos. Simple; difícil de escalar por partes.
- Microservicios: muchos procesos pequeños, cada uno con su base de datos. Escalado y despliegue independientes; a cambio, complejidad de red y coste operativo alto.
- Monolito modular: un despliegue con fronteras internas estrictas. La opción más recomendada en 2026 para empezar.
| Criterio | Favorece monolito | Favorece microservicios |
|---|---|---|
| Tamaño del equipo | Un equipo (<10) | Varios equipos que despliegan sin coordinarse |
| Carga | Uniforme | Una parte escala 100× más que el resto |
| Madurez del dominio | Fronteras aún no claras | Fronteras estables y conocidas |
| Coste de un error de diseño | Barato de arreglar | Mover una frontera es caro |
6El paralelo IT/OT ↔ frontend/backend
| IT / OT | Frontend / Backend | |
|---|---|---|
| Prioridades distintas | OT: física y disponibilidad. IT: confidencialidad e integridad | Frontend: experiencia. Backend: integridad y consistencia |
| Una frontera con nombre | Nivel 3 / DMZ | API / BFF |
| La frontera se mueve | IIoT y edge llevan IT a la planta | SSR y edge functions mueven front y back |
| Lo que la cruza se valida | Cortafuegos, DMZ | "Nunca confíes en el cliente" |
7Para debatir en clase
- Un formulario calcula el total en JavaScript. ¿Debe el servidor recalcularlo? ¿Qué pasa si el cliente envía un total distinto?
- En Next.js, un componente lee de la base de datos y se renderiza en el servidor. ¿Es frontend o backend? ¿Importa?
- Una app de Electron que sincroniza con un servidor: ¿cliente/servidor? ¿frontend/backend? ¿Ambas? ¿Y si funciona sin conexión días?
- Un equipo de 4 personas propone 12 microservicios "para que escale". Argumenta en contra con la tabla de criterios, y a favor en el único escenario en que tendría sentido.
✓Autoevaluación — puntos que debes dominar
Adaptado de 04-front-back-cliente-servidor.md.