Qué es un servidor y para qué sirve Node.js

Dónde vive de verdad una web, qué es una API y por qué el formulario del Nivel 2 no tenía a quién enviar sus mensajes.

¿Recuerdas ese formulario sin destinatario?

En el Nivel 2, construiste un formulario que comprobaba un mensaje, daba las gracias… y luego tiraba el mensaje. No había dónde guardarlo. Tu web, hasta ahora, solo puede entregar archivos listos – no puede recibir y recordar nada. Para eso necesitas un servidor. Y eso es exactamente lo que vas a aprender a construir.

Frontend y backend

Toda aplicación grande (Instagram, una escuela online, una tienda online) tiene dos mitades:

Frontend – todo lo que funciona en el navegador del visitante. HTML, CSS, JavaScript, React. ¡Ya lo conoces todo!
Backend – un programa que corre en un servidor. Recibe peticiones, guarda datos, aplica reglas. Y como existe Node.js, puede escribirse en un lenguaje que ya conoces: JavaScript.

¿Cómo se hablan las dos mitades? A través de una API (Application Programming Interface) – direcciones acordadas donde el backend responde. Aquí va una conversación de ejemplo:

Frontend:  GET /api/messages         ("Send me all the messages.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Here's data, save it: ...")
Backend:   { "saved": true }

GET = “dame datos” (tu navegador lo hace cada vez que abres una página).
POST = “aquí van datos, guárdalos” (eso es lo que hace tu formulario).

Los datos se envían en formato JSON – se parece casi exactamente a los objetos JavaScript que conoces del quiz. ¿Casualidad? No – JSON significa JavaScript Object Notation. Está de tu lado.

¿Dónde corre un backend así?

Mientras desarrollas, en tu propio ordenador (localhost – lo conoces de Vite). En producción, en un ordenador que está siempre encendido y conectado – ya sea un “trozo” alquilado de un servidor (un VPS), o un servicio que se encarga de todo (Render, Railway…). Llegaremos al despliegue en la lección final.

💡

¿Y para qué servía GitHub Pages entonces? Eso es alojamiento solo para el frontend – entrega archivos, nada más. Perfecto para una web de Nivel 1–2 (y también lo más seguro: donde no corre nada, nada se puede hackear). Necesitas backend en el momento en que tu web tiene que recibir y recordar algo – mensajes, inscripciones, usuarios.

Ahora tú 💪 (una mini-misión por curiosidad)

Abre tu web favorita, pulsa F12 y cambia a la pestaña Network. Recarga la página y mira la cascada de peticiones – cada línea es una conversación entre el navegador y un servidor.
Encuentra en la lista una petición GET, y otra que devuelva JSON (columna Type: json o fetch). Haz clic y mira la respuesta – verás los datos con los que se construye la página.
Escribe esto en la consola y mira cómo el frontend pide datos por su cuenta:

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...) es la orden JavaScript “llama a una API.” En la lección 9, usarás exactamente esta orden para conectar un formulario a tu propio servidor.

✅

Compruébalo tú: Puedes explicar con tus palabras la diferencia entre frontend y backend, sabes qué son GET, POST y JSON, y has visto en el panel Network cómo se hablan las webs. En la siguiente lección construirás un servidor así tú mismo.

Lo que te llevas de esta lección

El frontend corre en el dispositivo del visitante, el backend en un servidor; se hablan por una API con mensajes GET (dar) y POST (guardar).
Los datos circulan en formato JSON – parece objetos JavaScript.
fetch() es cómo un frontend pide datos a un servidor.