React est une bibliothèque pour construire des interfaces ; Next.js est un framework construit autour de React, qui ajoute notamment le rendu côté serveur, le routage et l’optimisation des images. Cette différence, souvent mal comprise, a des conséquences directes sur le référencement, la vitesse perçue et même l’hébergement : elle doit guider le choix entre les deux.
Ce que fait React seul
Une application React classique (créée aujourd’hui avec un outil comme Vite) construit la page entièrement dans le navigateur : au premier chargement, le visiteur reçoit une page presque vide, puis le JavaScript prend le relais pour tout afficher. C’est parfaitement adapté à une application accessible après connexion (tableau de bord, espace client, outil métier), où le référencement n’est pas un enjeu et où l’utilisateur reste longtemps sur la même interface.
Les modes de rendu de Next.js
- Rendu côté serveur : la page est construite sur le serveur à chaque visite, avec des données toujours à jour.
- Génération statique : la page est construite une fois, au moment de la mise en ligne, et servie instantanément.
- Régénération périodique : une page statique reconstruite automatiquement, par exemple toutes les heures, pour un contenu qui change de temps en temps (catalogue, articles).
- Rendu côté client : comme React seul, pour les parties interactives ou privées.
Le choix se fait page par page : la page d’accueil peut être statique, la fiche produit régénérée toutes les heures, et l’espace client rendu dans le navigateur.
Par exemple, une page qui affiche des produits, construite sur le serveur et rafraîchie toutes les heures :
export default async function Produits() {
const produits = await fetch('https://api.exemple.tn/produits', {
next: { revalidate: 3600 },
}).then((r) => r.json());
return (
<ul>
{produits.map((p) => <li key={p.id}>{p.nom}</li>)}
</ul>
);
}Le visiteur et Google reçoivent directement la liste en HTML, sans attendre le JavaScript.
Pourquoi c’est important pour le référencement
Google sait exécuter le JavaScript, mais une page construite uniquement dans le navigateur est explorée en deux temps, plus lentement et de façon moins fiable. Avec une page déjà construite, le contenu, le titre et les balises sont lisibles immédiatement. Pour un site public qui doit attirer des visiteurs depuis Google, c’est un avantage net.
La différence d’hébergement
Une application React seule se compose de fichiers statiques : elle s’héberge n’importe où, même sur un hébergement mutualisé simple. Next.js, dès qu’il utilise le rendu côté serveur, a besoin d’un serveur Node.js en fonctionnement (un VPS, ou une plateforme spécialisée comme Vercel). Si le site peut être entièrement statique, Next.js sait aussi produire des fichiers statiques, mais on perd alors le rendu côté serveur.
Le comparatif
| React seul | Next.js | |
|---|---|---|
| Premier affichage | Après le chargement du JavaScript | Immédiat, HTML déjà construit |
| Référencement | Moins fiable | Excellent |
| Hébergement | Fichiers statiques, partout | Serveur Node.js (ou export statique) |
| Complexité | Plus simple | Plus de notions à maîtriser |
| Idéal pour | Application après connexion, outil interne | Site public, catalogue, contenu à référencer |
Le critère décisif : qui doit voir la page
Un visiteur anonyme venu de Google n’a pas les mêmes besoins qu’un utilisateur connecté qui revient chaque jour. Site vitrine, boutique, blog, pages publiques d’une plateforme : Next.js. Tableau de bord, back-office, application interne : React seul suffit et reste plus simple. Et un projet qui mélange les deux gagne souvent à tout faire avec Next.js, en rendant la partie privée côté client.
Pour aller plus loin : mon expertise : Développeur JavaScript React, Next.js, Angular · à lire aussi : Ce qu’il faut vérifier avant de choisir un framework JavaScript
