L08 · Especificación · 4 min
Frontend y backend
En una frase
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.
Piénsalo así
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 DefiniciónfrontendLa parte de una app que funciona en el navegador de quien la visita: lo que se ve y se pulsa.Abrir en el glosario → 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 DefiniciónbackendLa parte de una app que funciona en un servidor: guarda datos, comprueba inicios de sesión y habla con otros servicios.Abrir en el glosario → se ejecuta en un servidor bajo tu control: DefiniciónlocalhostTu propio equipo haciendo de servidor mientras pruebas, normalmente en `http://localhost:3000`.Abrir en el glosario → mientras pruebas y DefiniciónVercelEl servicio que convierte tu código de GitHub en una web publicada, con una vista previa para cada cambio.Abrir en el glosario → cuando la app está publicada. Como nadie de fuera puede fisgonear dentro del servidor, el backend es el único lugar seguro para guardar un DefiniciónsecretoTodo lo que abre tus cuentas: claves de API, contraseñas, tokens. Solo se guarda en Vercel y en `.env.local`.Abrir en el glosario → (como una Definiciónclave de APIUna contraseña que usa tu app con otro servicio. Quien la tenga puede gastar tu dinero.Abrir en el glosario →), leer o escribir en tu Definiciónbase de datosDonde tu app recuerda cosas entre visitas, como cuentas o recetas guardadas.Abrir en el glosario → y llamar a un DefiniciónmodeloEl sistema de IA que produce las respuestas, como el que hay detrás de tu agente.Abrir en el glosario → 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 DefiniciónframeworkUna base ya hecha para construir apps. Agentic Makers usa Next.js.Abrir en el glosario → Next.js (App Router), tu frontend y tu backend conviven en la misma carpeta del Definiciónrepositorio (repo)La carpeta de tu proyecto más todo su historial. Git registra cada punto de guardado para que puedas volver a cualquier versión.Abrir en el glosario →. No necesitas dos proyectos separados; tu Definiciónagente de programaciónUna IA que trabaja en la carpeta de tu proyecto: lee archivos, escribe código y ejecuta comandos, con tu permiso.Abrir en el glosario → 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_.
Cómo se ve en tu proyecto
Al redactar tu Definiciónespecificación`SPEC.md`: qué vas a construir, para quién, qué entra y qué no, y cómo sabrás que funciona.Abrir en el glosario →, 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
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.
Comprobación rápida · 1 pregunta