Frontend vs Backend: ¿cuál es la diferencia?
El frontend es la parte de una app que se ejecuta en el navegador del usuario: las páginas, los botones, los formularios y las animaciones que ve y pulsa. El backend es la parte que se ejecuta en un servidor que el usuario nunca ve: almacena y recupera datos, aplica las reglas de negocio, comprueba quién puede hacer qué y se comunica con otros servicios como los pagos y el correo electrónico. Ambos se comunican a través de una API y, junto con una base de datos, forman una app «full stack».
Por qué importa cuando construyes con IA
Cuando describes una app a un constructor con IA, describes las dos mitades a la vez, lo sepas o no. «Los clientes pueden reservar una plaza» significa un formulario de reserva (frontend), reglas sobre qué plazas están libres (backend) y un lugar donde guardar las reservas (base de datos).
Conocer la división te ayuda de tres maneras prácticas:
- Seguridad. Todo lo que está en el frontend lo puede ver y cambiar el usuario. Las reglas y los secretos tienen que vivir en el backend.
- Depuración. «El botón no responde» y «el botón responde pero no se guarda nada» apuntan a mitades distintas, y decir cuál de los dos ves ayuda a la IA a encontrar la causa más rápido.
- Alojamiento y coste. Una web solo de frontend es barata y sencilla de alojar. Un backend tiene que ejecutarse en algún sitio, lo que afecta a lo que pagas y a cómo se comporta tu app cuando no hay actividad.
Una analogía cotidiana
Piensa en un restaurante.
El frontend es el comedor: la carta, las mesas, la decoración y el camarero que toma el pedido. Está pensado para los clientes, que ven y tocan todo.
El backend es la cocina y la oficina: los cocineros, el almacén, la caja y las normas del encargado sobre quién recibe un descuento. Los clientes no entran ahí, y no deberían poder hacerlo.
La API es el paso entre ambos: la barra por la que entran los pedidos y salen los platos, en un formato acordado. La base de datos es el almacén y el libro de pedidos.
Un cliente puede reescribir su nota de pedido (el frontend está bajo su control), pero la cocina sigue decidiendo qué cocina y cuánto cobra. Por eso las comprobaciones importantes van en la parte de atrás.
Qué hace cada lado
| Frontend | Backend | |
|---|---|---|
| Se ejecuta en | El dispositivo del usuario, en el navegador | Un servidor que tú (o tu proveedor de alojamiento) controlas |
| Función principal | Mostrar cosas, recoger datos, responder a los clics | Guardar datos, aplicar reglas, controlar permisos, llamar a otros servicios |
| ¿Los usuarios pueden ver y cambiar el código? | Sí: se descarga en su navegador | No |
| ¿Puede guardar claves de API secretas? | No | Sí, en variables de entorno |
| Tecnologías habituales | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Qué sale mal | La maquetación se rompe en móvil, un botón no hace nada, la página va lenta | Los datos no se guardan, se muestran datos incorrectos, errores, agujeros de seguridad |
Algunos frameworks difuminan la línea. Next.js, por ejemplo, permite que un mismo proyecto contenga código de navegador y código de servidor. La idea sigue siendo la misma: la pregunta siempre es ¿dónde se ejecuta esta pieza?
Ejemplo práctico: reservar una clase
Esto es lo que pasa cuando alguien reserva una clase de yoga, paso a paso.
| Paso | Dónde | Qué pasa |
|---|---|---|
| 1 | Frontend | Se carga la página de horarios y pide al backend las clases de esta semana. |
| 2 | Backend | Lee las clases y las reservas de la base de datos, calcula las plazas libres y devuelve la lista en JSON. |
| 3 | Frontend | Muestra cada clase con su hora, su profesor y las plazas libres. |
| 4 | Frontend | El usuario elige una clase e introduce su nombre y su correo. El formulario comprueba que el correo parece válido (como cortesía, no como garantía). |
| 5 | Frontend → Backend | Envía una petición POST /api/bookings a través de la API. |
| 6 | Backend | Valida de nuevo los datos, comprueba que la clase no está llena, guarda la reserva y pide al servicio de correo que envíe una confirmación usando una clave secreta. |
| 7 | Backend → Frontend | Devuelve «reservado» o «lo siento, está completa». |
| 8 | Frontend | Muestra la pantalla de confirmación. |
Fíjate en los pasos 4 y 6: el dato se comprueba dos veces. La comprobación del frontend da una respuesta inmediata; la del backend es la que cuenta de verdad, porque un usuario decidido puede saltarse el frontend por completo.
Términos habituales explicados
| Término | Significado |
|---|---|
| Cliente / servidor | El cliente es el navegador (o la app) que hace las peticiones; el servidor las responde. |
| UI | Interfaz de usuario: las pantallas y los controles. |
| API | La forma acordada en que el frontend pide datos o acciones al backend. |
| Endpoint | Una URL concreta de la API, como /api/bookings. |
| Full stack | Frontend + backend + base de datos juntos. Ver qué es una app full stack. |
| Sitio estático | Un frontend sin backend propio; los mismos archivos para todos. |
| SPA | Aplicación de una sola página: un frontend que actualiza la página en el navegador en lugar de cargar páginas nuevas. |
| Renderizado en servidor (SSR) | El servidor genera el HTML de la página antes de enviarla, lo que puede ayudar a la velocidad y al SEO. |
| Variables de entorno | Ajustes y secretos que se dan al backend en tiempo de ejecución, fuera del código. |
¿Tu app necesita un backend?
| Si tu app… | ¿Necesita backend? |
|---|---|
| Muestra información que es igual para todos | No |
| Tiene un formulario de contacto que solo te envía un correo | Normalmente uno pequeño, o un servicio de formularios |
| Guarda datos que otras personas van a ver | Sí |
| Tiene inicios de sesión y datos privados | Sí |
| Cobra pagos | Sí, al menos para crear los pagos y recibir los webhooks de pago |
| Usa una API de IA u otra de pago con una clave secreta | Sí, para mantener la clave fuera del navegador |
Errores comunes e ideas equivocadas
- Poner claves secretas en el frontend. Serán visibles para cualquiera que abra las herramientas de desarrollo del navegador. Es el error grave más común en apps creadas con IA.
- Aplicar las reglas solo en el frontend. Ocultar el botón «borrar» a los usuarios que no son administradores no es una protección; el backend tiene que rechazar la petición.
- Pensar que el backend es «solo la base de datos». La base de datos guarda los datos. El backend decide quién puede leerlos y cambiarlos, y cómo.
- Creer que JavaScript significa frontend. JavaScript y TypeScript también se ejecutan en servidores, con Node.js.
- Culpar a la mitad equivocada. Si la página se ve bien pero los datos son incorrectos, el problema suele estar en el backend o en la base de datos, no en el diseño.
- Sobrediseñar. Un portfolio no necesita un backend a medida. Añadir uno suma coste y piezas que mantener.
Qué pedir a tu constructor con IA
- «¿Qué partes de esta app se ejecutan en el navegador y cuáles en el servidor?»
- «Mueve las claves de API al backend y léelas desde variables de entorno.»
- «Valida cada formulario en el servidor, además de en el navegador.»
- «Haz que el backend asegure que solo los administradores pueden borrar reservas.»
- «La página se ve bien pero los datos no se guardan: revisa los registros del backend para esa petición.»
- «Esto es una web de marketing sencilla; mantenla solo con frontend salvo que necesitemos un backend.»
Frontend y backend en Mythex
Un proyecto nuevo de Mythex parte de un frontend con Vite, React, TypeScript y Tailwind, y el agente añade un backend cuando tu app lo necesita; o puedes pedir una API independiente en Node, Python (FastAPI), C# o Java que funcione junto al frontend en el mismo proyecto. En la vista previa puedes cambiar entre la web y el servidor de la API, y al publicar se despliegan ambos, con una base de datos y almacenamiento de archivos cuando hacen falta. La documentación explica las apps de varios servicios, la guía de alojamiento web explica dónde se ejecuta cada mitad una vez publicada, y las plantillas de apps son una forma rápida de ver ejemplos full stack.
Preguntas
¿Cuál es la diferencia entre frontend y backend?
El frontend es la parte de una app que se ejecuta en el navegador del usuario: las páginas, los botones y los formularios que ve y con los que interactúa. El backend se ejecuta en un servidor que el usuario nunca ve; guarda los datos, aplica las reglas de negocio, comprueba los permisos y se comunica con otros servicios.
¿Toda app necesita un backend?
No. Una web de marketing, un portfolio o una landing sencilla puede ser solo frontend. En cuanto una app necesita guardar datos compartidos, iniciar sesión de usuarios, cobrar pagos o usar claves de API secretas, necesita algún tipo de backend.
¿HTML es frontend o backend?
El HTML, el CSS y el JavaScript que se ejecutan en el navegador son frontend. El JavaScript también puede ejecutarse en un servidor con Node.js, y entonces es código de backend. No es el lenguaje lo que decide; lo decide el lugar donde se ejecuta el código.
¿Qué significa full stack?
Full stack significa abarcar tanto el frontend como el backend (y normalmente la base de datos). Una app full stack es la que tiene las tres partes, y un desarrollador full stack trabaja en todas ellas.