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, botones, formularios y 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, estás describiendo 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 esta división ayuda en tres aspectos prácticos:
- Seguridad. Todo lo que está en el frontend puede ser visto y modificado por 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 las 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 está inactiva.
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 pueden ver y tocar todo.
El backend es la cocina y la oficina: los cocineros, el almacén, la caja y las normas del encargado sobre quién tiene descuento. Los clientes nunca entran ahí, y no deberían poder hacerlo.
La API es el paso entre ambos: el mostrador por donde 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 qué cobra. Por eso las comprobaciones importantes deben estar en la parte de atrás.
Qué hace cada parte
| 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, hacer cumplir los permisos, llamar a otros servicios |
| ¿Pueden los usuarios ver y cambiar el código? | Sí: se descarga en su navegador | No |
| ¿Puede guardar claves secretas de API? | 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é suele fallar | El diseño se rompe en el móvil, un botón no hace nada, una página lenta | Datos que no se guardan, 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 es siempre ¿dónde se ejecuta esta pieza?
Un ejemplo práctico: reservar una clase
Esto es lo que ocurre cuando alguien reserva una clase de yoga, paso a paso.
| Paso | Dónde | Qué ocurre |
|---|---|---|
| 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 y rellena 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 | Vuelve a validar 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: los datos se comprueban dos veces. La comprobación del frontend da una respuesta inmediata; la del backend es la que realmente cuenta, 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. Consulta 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 construye el HTML de la página antes de enviarlo, 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. |
¿Necesita tu app 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 cobro |
| Usa una API de IA u otra de pago con una clave secreta | Sí, para que la clave no llegue al navegador |
Errores comunes y malentendidos
- 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 habitual en las apps creadas con IA.
- Aplicar las reglas solo en el frontend. Ocultar el botón «eliminar» a los usuarios que no son administradores no es una protección; el backend debe rechazar la petición.
- Pensar que el backend es «solo la base de datos». La base de datos almacena los datos. El backend decide quién puede leerlos y modificarlos, 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ñadirlo suma coste y piezas que mantener.
Qué pedirle 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 también en el servidor, no solo en el navegador.»
- «Haz que el backend asegure que solo los administradores pueden eliminar 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 corporativa sencilla; mantenla solo con frontend a menos 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; también puedes pedir una API separada 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 añadidos cuando hacen falta. La documentación explica las apps de varios servicios, la guía de alojamiento web muestra 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 corporativa, un portfolio o una landing page sencilla pueden ser solo frontend. En cuanto una app necesita guardar datos compartidos, iniciar sesión de usuarios, cobrar pagos o usar claves secretas de API, 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 lo decide, sino dónde se ejecuta el código.
¿Qué significa full stack?
Full stack significa abarcar tanto el frontend como el backend (y normalmente también la base de datos). Una app full stack es la que tiene las tres partes; un desarrollador full stack trabaja en todas ellas.