React & Next.js : Introduction

Avant d'écrire une ligne de JSX, posons le décor. React et Next.js sont partout dans le web moderne, mais ce sont deux choses différentes, souvent confondues. Voyons ce qu'ils sont, d'où ils viennent, et pourquoi on les utilise ensemble.

# React, c'est quoi ?

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Le mot compte : une bibliothèque, pas un framework. React ne fait qu'une chose, afficher ton UI et la garder synchronisée avec tes données, et te laisse libre pour le reste (routing, requêtes, build).

Trois idées fondamentales :

• Composant : l'interface est découpée en briques réutilisables (un bouton, une carte, un formulaire). Chaque composant est une fonction qui retourne ce qu'il faut afficher.
• Déclaratif : tu décris à quoi doit ressembler l'interface pour un état donné, et React se charge de mettre le DOM à jour. Tu ne manipules plus le DOM à la main.
• Virtual DOM : React garde une représentation légère du DOM en mémoire. Quand les données changent, il calcule la différence et ne met à jour que ce qui a réellement changé. C'est ce qui le rend rapide.

# Un peu d'histoire

React naît chez Facebook en 2013, créé par Jordan Walke. L'objectif : gérer des interfaces complexes qui changent en permanence (le fil d'actualité, les notifications) sans que le code devienne ingérable.

L'idée du composant couplée au Virtual DOM était assez nouvelle pour bousculer tout l'écosystème front. Aujourd'hui, React est l'une des technologies les plus utilisées au monde, maintenue par Meta et une immense communauté.

# L'approche composant

En React, toute l'interface est un arbre de composants. Une page, c'est un composant qui en contient d'autres, qui en contiennent d'autres à leur tour.

<App>
 ├── <Navbar />
 ├── <Page>
 │    ├── <Article />
 │    └── <Sidebar />
 └── <Footer />

<App>

 ├── <Navbar />

 ├── <Page>

 │    ├── <Article />

 │    └── <Sidebar />

 └── <Footer />

Chaque composant est autonome et réutilisable : tu écris ton <Bouton /> une fois, tu l'utilises partout. On détaille tout ça dans Les composants.

# Et Next.js dans tout ça ?

React, seul, tourne dans le navigateur : le serveur envoie une page quasi vide, et c'est le JavaScript qui construit l'interface une fois chargé. Ça pose des limites : le SEO (Search Engine Optimization, le référencement par Google et les autres moteurs), le temps d'affichage initial, pas de routing intégré, pas de rendu côté serveur.

Next.js est un framework construit au-dessus de React qui comble tout ça. Il apporte, prêts à l'emploi :

• Le routing basé sur les fichiers (un fichier = une route)
• Le rendu côté serveur (SSR) et la génération statique (SSG)
• Les Server Components (du React qui s'exécute sur le serveur)
• L'optimisation automatique des images, des polices et du bundle (le fichier JavaScript final envoyé au navigateur)
• Une API pour créer des routes backend

En résumé : React te donne les briques, Next.js te donne la maison (structure, routing, rendu et optimisations).

# Les trois modes de rendu

C'est LE point clé pour comprendre Next.js : où et quand ton HTML est-il généré ?

Next.js te laisse choisir le mode page par page, et même les mélanger. Ce portfolio, par exemple, est en grande partie statique (SSG) : les pages sont pré-générées au build, donc servies instantanément.

# Pour résumer

• React = une bibliothèque pour construire des UI à base de composants, de façon déclarative.
• Next.js = un framework au-dessus de React qui ajoute routing, rendu serveur et optimisations.
• Le vrai pouvoir de Next.js, c'est de choisir comment chaque page est rendue (CSR / SSR / SSG).

Dans la suite de cette série, on part des fondations : les composants, le JSX, les props, puis le state et les hooks, avant de monter en puissance côté Next.js.