7.3 — Alternatives à React

🎯 Objectif : connaître les forces des alternatives à React pour faire un choix éclairé selon le projet, l’équipe et la cible technique.

À l'issue de cet axe, tu sauras :

Connaître Vue 3, Svelte 5, Solid, Qwik, Astro, Angular
Lire un composant écrit dans chaque framework
Choisir entre eux selon le contexte (équipe, perf, écosystème, courbe d'apprentissage)
Comprendre quand React n'est PAS le bon choix

Débutant 10 min prérequis : axe 6 lu

Le même composant, 6 frameworks

Pour rendre la comparaison concrète, voici un compteur simple dans chaque syntaxe.

React

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Compté {count} fois
    </button>
  );
}

Vue 3 (Composition API)

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">
    Compté {{ count }} fois
  </button>
</template>

Svelte 5 (runes)

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Compté {count} fois
</button>

Solid

import { createSignal } from 'solid-js';

export function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>
      Compté {count()} fois
    </button>
  );
}

Astro (composant statique + island)

---
import Counter from './Counter.tsx';
---
<h1>Page Astro</h1>
<Counter client:visible />   <!-- charge le JS uniquement quand visible -->

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<button (click)="count.set(count() + 1)">Compté {{ count() }} fois</button>`,
})
export class CounterComponent {
  count = signal(0);
}

Vue 3 — l’alternative la plus accessible


Style	Templates HTML + `<script setup>`
Réactivité	Refs + Composition API (proxy)
Méta-framework	Nuxt 3
État global	Pinia (officiel)
Forces	Documentation excellente, courbe douce, syntaxe lisible
Faiblesses	Écosystème plus petit que React (mais solide)

Pourquoi choisir Vue ?

Tu démarres une équipe avec des devs non frontend (Vue est plus intuitif côté HTML).
Tu veux moins de surprises que React (re-render moins agressif, réactivité explicite).
Tu préfères les single-file components (.vue qui contient template + script + style).

Exemple plus complet

<script setup>
import { ref, computed, onMounted } from 'vue';

const items = ref([]);
const filter = ref('');
const filtered = computed(() => items.value.filter(i => i.name.includes(filter.value)));

onMounted(async () => {
  items.value = await fetch('/api/items').then(r => r.json());
});
</script>

<template>
  <input v-model="filter" placeholder="Filtrer…" />
  <ul>
    <li v-for="item in filtered" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

v-model fait du two-way binding : la variable et l’input se synchronisent automatiquement. C’est plus court qu’en React (value + onChange).

Vue 3.6 — Vapor Mode (expérimental, 2026)

Depuis Vue 3.6, le Vapor Mode compile certains composants directement vers des opérations DOM sans passer par le Virtual DOM :

<script setup vapor>
  // ce composant est compilé en code DOM direct
  import { ref } from 'vue';
  const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

✅ Bundle ~10 KB baseline (vs ~22 KB pour Vue 3 classique). ✅ Performances équivalentes à Svelte 5 sur les benchmarks. ✅ Opt-in par composant — tu peux mixer Vapor et VDOM dans la même app. ⚠ Encore expérimental — à valider sur ton cas d’usage avant prod.

C’est la réponse de Vue à la pression perf de Svelte/Solid : rendu brutal sans abandonner l’écosystème Vue.

Svelte 5 — la performance sans douleur


Style	Compilation, pas de runtime de réactivité
Réactivité	Runes (`$state`, `$derived`, `$effect`)
Méta-framework	SvelteKit
État global	Stores natifs (`writable`) ou runes
Forces	Bundle minuscule (~5 Ko), syntaxe limpide
Faiblesses	Écosystème encore plus petit que Vue, churn récent (Svelte 4 → 5 = changements significatifs)

Pourquoi choisir Svelte ?

Tu vises une app très performante (mobile, marchés émergents avec connexions lentes).
Tu veux moins de boilerplate qu’en React.
Tu démarres un projet où tu peux te permettre de t’éloigner du standard industriel.

Exemple

<script>
  let { name = 'Monde' } = $props();   // props
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log('count a changé :', count);
  });
</script>

<h1>Bonjour {name}</h1>
<button onclick={() => count++}>+</button>
<p>Compté : {count} (×2 = {doubled})</p>

C’est ultra lisible. Pas de hooks, pas de useEffect, pas de re-render mental — la variable change, ce qui dépend d’elle se met à jour. Point.

Solid — les performances brutales


Style	JSX comme React, mais réactivité fine-grained
Réactivité	Signaux (comme Svelte 5, qui s’en est inspiré)
Méta-framework	SolidStart
Forces	Performances meilleures que React/Vue, syntaxe React-like
Faiblesses	Petit écosystème, peu de talents disponibles

Quand choisir Solid ?

Quand tu connais déjà React mais veux les perfs de Svelte avec une syntaxe familière. Niche en 2026 mais solide techniquement.

Qwik — résumabilité


Style	Composants JSX
Particularité	Resumability : la page est interactive sans hydratation, le JS se charge à la demande quand on interagit
Forces	Time-to-interactive instantané même sur grosses apps
Faiblesses	Très récent, écosystème naissant

Intéressant pour des applications gigantesques où le coût de l’hydratation classique est prohibitif. Niche, à surveiller.

Astro — les sites de contenu


Style	Composants `.astro` (HTML + frontmatter)
Particularité	Islands architecture : par défaut, 0 JS envoyé. Seulement les composants déclarés interactifs sont hydratés
Forces	Performance maximale pour les sites de contenu, intègre React/Vue/Svelte/Solid en îlots
Faiblesses	Pas pour les apps très dynamiques (SaaS, dashboards)

Quand choisir Astro ?

Sites de contenu : blogs, marketing, docs (comme ce site !), e-commerce léger.
Tu veux mixer plusieurs frameworks (un composant React ici, un Svelte là — Astro le permet).
Tu vises score Lighthouse > 95 par défaut.

---
// Frontmatter (TypeScript côté serveur, exécuté au build)
import ReactCounter from '../components/Counter.tsx';
import VueChart from '../components/Chart.vue';

const posts = await Astro.glob('../posts/*.md');
---

<html>
  <body>
    <h1>Mon blog</h1>
    <ul>
      {posts.map(p => <li><a href={p.url}>{p.frontmatter.title}</a></li>)}
    </ul>

    <!-- React, hydraté quand visible -->
    <ReactCounter client:visible />

    <!-- Vue, hydraté seulement sur interaction -->
    <VueChart client:idle />
  </body>
</html>

Angular — l’enterprise mature


Style	Composants TypeScript-first, decorators
Réactivité	Signaux (depuis Angular 17) ou observables RxJS
Méta-framework	Inclus (routing, forms, DI, HttpClient — tout est officiel)
Forces	Cohérence sur de très gros projets, opinions fortes, DI puissant
Faiblesses	Verbeux, courbe abrupte, image plus “old school”

Quand choisir Angular ?

Grandes équipes (50+ devs) où la cohérence prime.
Contextes enterprise (banque, assurances) où Angular est encore le standard.
Tu viens de Java/C# et tu aimes l’architecture explicite.

Tableau de décision

Si…	Choisis
Tu es sur le marché de l’emploi français	React (largement majoritaire)
Tu démarres seul / petite équipe et veux du fun	Svelte
Tu veux de la perf max pour un site de contenu	Astro
Tu encadres une équipe non frontend	Vue
Tu rejoins une équipe enterprise avec gros projet existant	Angular
Tu veux la perf de Svelte avec une syntaxe React	Solid
Tu construis une app gigantesque où le JS bundle est un problème	Qwik

Auto-évaluation

Tu construis un site marketing + blog (40 pages, peu d'interactivité). Choix idéal ? Next.js + React partout Astro + composants React/Vue ponctuels en îlots — performance maximale, peu de JS expédié Une SPA Angular avec routing complet Du HTML pur, pas besoin de framework

Une équipe de 50+ devs sur une banque a un gros projet en TypeScript. Cohérence et discipline avant tout. Framework probable ? Svelte — perf et simplicité Astro — pour faire ce qu'il y a de mieux Angular — opinions fortes, DI, structure imposée, talents enterprise disponibles Solid — pour les meilleures perfs

Tu connais React. Tu veux essayer un framework avec moins de boilerplate et meilleures perfs. Que choisir d'abord ? Angular — pour comparer Svelte 5 — la syntaxe et le modèle mental sont une découverte agréable, courbe d'apprentissage faible Backbone.js — alternative classique jQuery

Pour aller plus loin

Vue 3 Guide — vuejs.org/guide
Svelte 5 Tutorial — learn.svelte.dev
Astro Docs — docs.astro.build
Solid Docs — solidjs.com
Angular — angular.dev
State of JS — stateofjs.com — sondage annuel des tendances

Suite : 7.4 — Méta-frameworks — Next.js, Nuxt, SvelteKit, Remix.