C'est quoi un serveur et à quoi sert Node.js

Où vit vraiment un site web, c'est quoi une API, et pourquoi le formulaire du Niveau 2 n'avait nulle part où envoyer ses messages.

Tu te souviens de ce formulaire sans destinataire ?

Au Niveau 2, tu as construit un formulaire qui vérifiait un message, disait merci… puis jetait le message. Il n’y avait nulle part pour le sauvegarder. Ton site web, jusqu’ici, ne peut que distribuer des fichiers prêts – il ne peut pas recevoir et se souvenir de quoi que ce soit. Pour ça, il te faut un serveur. Et c’est exactement ce que tu vas apprendre à construire.

Frontend et backend

Chaque grande application (Instagram, une école en ligne, une boutique en ligne) a deux moitiés :

Frontend – tout ce qui tourne dans le navigateur du visiteur. HTML, CSS, JavaScript, React. Tu connais déjà tout ça !
Backend – un programme qui tourne sur un serveur. Il reçoit des requêtes, sauvegarde des données, applique des règles. Et comme Node.js existe, il peut être écrit dans un langage que tu connais déjà : JavaScript.

Comment les deux moitiés se parlent ? À travers une API (Application Programming Interface) – des adresses convenues où le backend répond. Voici un exemple de conversation :

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 = « donne-moi des données » (ton navigateur fait ça chaque fois que tu ouvres une page).
POST = « voici des données, sauvegarde-les » (c’est ce que fait ton formulaire).

Les données sont envoyées au format JSON – ça ressemble presque exactement aux objets JavaScript que tu connais du quiz. Une coïncidence chanceuse ? Non – JSON signifie JavaScript Object Notation. C’est de ton côté.

Où tourne un backend comme ça ?

Pendant le développement, sur ton propre ordinateur (localhost – tu le connais de Vite). En production, sur un ordinateur toujours allumé et connecté – soit une « tranche » louée d’un serveur (un VPS), soit un service qui gère tout pour toi (Render, Railway…). On arrivera au déploiement dans la dernière leçon.

💡

Alors GitHub Pages, c’était pour quoi ? C’est de l’hébergement juste pour le frontend – il distribue des fichiers, rien de plus. Parfait pour un site web Niveau 1–2 (et aussi le plus sûr : là où rien ne tourne, rien ne peut être piraté). Tu as besoin d’un backend dès que ton site web doit recevoir et se souvenir de quelque chose – messages, inscriptions, utilisateurs.

À toi 💪 (une mini-mission par curiosité)

Ouvre ton site web préféré, appuie sur F12, et passe à l’onglet Network. Recharge la page et regarde la cascade de requêtes – chaque ligne est une conversation entre le navigateur et un serveur.
Trouve une requête GET dans la liste, et une qui retourne du JSON (colonne Type : json ou fetch). Clique dessus et regarde la réponse – tu verras les données dont la page est faite.
Tape ça dans la console et regarde le frontend demander des données tout seul :

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

fetch(...) est la commande JavaScript « appelle une API. » Dans la leçon 9, tu utiliseras exactement cette commande pour connecter un formulaire à ton propre serveur.

✅

Vérifie : Tu peux expliquer avec tes propres mots la différence entre frontend et backend, tu sais ce que sont GET, POST et JSON, et tu as vu dans le panneau Network comment les sites web se parlent. Dans la prochaine leçon, tu construiras un serveur comme ça toi-même.

Ce que tu retiens de cette leçon

Le frontend tourne sur l’appareil du visiteur, le backend tourne sur un serveur ; ils se parlent via une API avec des messages GET (donne) et POST (sauvegarde).
Les données circulent au format JSON – ça ressemble aux objets JavaScript.
fetch() est comment un frontend demande des données à un serveur.