Next.js vs. React : Comprendre l'architecture et faire le bon choix

Que fait chacun ?

React (Bibliothèque):                 Next.js (Framework):
────────────────────                ────────────────────────────────
✓ UI-Komponenten                    ✓ Tout de React
✓ State Management                  ✓ File-based Routing
✓ Hooks                             ✓ Server Components (RSC)
✗ Routing (choix libre)           ✓ Server-side Rendering (SSR)
✗ Server-Rendering                  ✓ Static Site Generation (SSG)
✗ Optimisation des images                 ✓ API Routes + Optimisation des images

Comparaison des stratégies de rendu

Stratégie      Rendu quand ?    Mis à jour quand ?         Use Case
──────────────────────────────────────────────────────────────────
SSG (Static)   Temps de build       Nouveau build     Blog, Docs
ISR            Build + Interval  Après X secondes   Liste produits
SSR            Chaque requête    Chaque requête   Dashboard
RSC (Server)   Chaque requête    À la demande      Par défaut
Client Comp.   Navigateur          À la demande      Interactif

Server Component vs. Client Component

// Server Component (par défaut dans Next.js App Router)
// PAS de "use client" → s'exécute côté serveur

async function BlogPage() {
    // Accès direct à la DB/API côté serveur
    const posts = await fetch('https://api.example.com/posts', {
        next: { revalidate: 3600 }  // ISR : revalider toutes les heures
    }).then(r => r.json());

    return (
        <div>
            {posts.map((post: Post) => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

// Client Component – uniquement si nécessaire
"use client";

export function SearchBar() {
    const [query, setQuery] = useState('');

    return (
        <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Rechercher..."
        />
    );
}

Récupération de données : useEffect vs. Server Component

// React (pattern useEffect) – dans le navigateur
function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/products')
            .then(r => r.json())
            .then(data => { setProducts(data); setLoading(false); });
    }, []);

    if (loading) return <Spinner />;
    return <ProductGrid products={products} />;
}

// Next.js (Server Component) – côté serveur
async function ProductList() {
    const products = await getProducts(); // Pas besoin d'état de chargement !
    return <ProductGrid products={products} />;
}

// Suspense pour le Streaming
export default function Page() {
    return (
        <Suspense fallback={<ProductSkeleton />}>
            <ProductList />   {/* Squelette jusqu'à l'arrivée des données */}
        </Suspense>
    );
}

Quand React seul, quand Next.js ?

Choisir React pur (+ Vite) si :
──────────────────────────────────
✓ Application monopage (SPA) derrière une authentification
✓ Le SEO n'est pas important
✓ Liberté maximale souhaitée
Exemples : tableau de bord admin, outils internes

Choisir Next.js si :
────────────────────
✓ SEO important (landing pages, blog, e-commerce)
✓ Le temps de chargement initial doit être minimal
✓ Full-stack avec API Routes souhaité
✓ Grande application avec de nombreuses routes
Exemples : site d'entreprise, SaaS, e-commerce

Comparaison des performances

Valeurs typiques en pratique :

• First Contentful Paint : React CSR ~2,5s | Next.js SSR ~0,5s | SSG ~0,2s
• Time to Interactive : React CSR ~3,5s | Next.js SSR ~1,5s | SSG ~0,5s
• Taille du bundle : React CSR 300-500 Ko | Next.js RSC 80-150 Ko | SSG 30-80 Ko
• Score SEO : React CSR moyen | Next.js SSR très bon | SSG excellent