écrits/blog/2026/05
Blog24 mai 2026·6 min

TanStack Start vs Next.js : le guide de migration 2026

TanStack Start atteint sa v1.0 en 2026 et des équipes comme Inngest ont réduit leur temps de développement de 83%. Quand migrer depuis Next.js et quand rester ?

Pendant la majeure partie de la dernière décennie, choisir un méta-framework React revenait à choisir Next.js. En 2026, cette évidence est sérieusement remise en cause pour la première fois. TanStack Start a publié sa version v1.0 en mars, et une série d'équipes en production — la plus visible étant Inngest — ont publiquement migré depuis Next.js en documentant les compromis.

Ce n'est pas un énième cycle de hype autour d'un framework. C'est une vraie conversation architecturale sur le contrôle explicite face à la magie du framework, sur Vite face à Webpack/Turbopack, et sur la complexité que les équipes sont prêtes à absorber pour obtenir les React Server Components.

Pourquoi les équipes regardent au-delà de Next.js

Next.js 16 reste le framework React le plus déployé au monde. Il offre la meilleure histoire de déploiement (Vercel), l'écosystème le plus vaste, et les primitives les plus matures pour le caching, l'optimisation d'images et l'ISR. Rien de tout cela n'a changé.

Ce qui a changé, c'est le coût d'y rester.

L'équipe d'ingénierie d'Inngest a publié un rapport de migration détaillé après avoir remplacé deux applications Next.js — leur serveur de dev et leur tableau de bord — par TanStack Start. Les chiffres rapportés sont frappants :

  • Le temps de chargement initial local est passé de 10–12 secondes à 2–3 secondes — soit une réduction de 83%
  • Après le premier chargement de route, les navigations suivantes sont essentiellement instantanées
  • L'équipe avait tenté de mettre à jour Next.js et de basculer sur Turbopack à deux reprises ; chaque tentative ne gagnait qu'environ 2 secondes et restait insuffisante
  • Un seul rollback en production a été nécessaire pendant la bascule

Les plaintes qualitatives dans leur Slack étaient tout aussi parlantes. Les ingénieurs portant plusieurs casquettes décrivaient les directives "use client" et "use server" comme une charge cognitive payée à chaque fichier. Les environnements locaux se comportaient différemment de la production. Les frontières async à l'intérieur des React Server Components faisaient disparaître les traces d'appel.

Inference.net a heurté les mêmes murs. Leur équipe a cité trois raisons pour migrer : un contrôle plus granulaire sur l'architecture, une sûreté de routage à la compilation, et la volonté d'éviter le couplage plus serré avec Vercel qui accompagne un usage profond de Next.js.

Ce qu'est vraiment TanStack Start

TanStack Start est un framework React full-stack bâti sur TanStack Router et Vite. C'est le compagnon de production-grade d'un routeur que des milliers d'équipes utilisent déjà pour du routage type-safe en SPA. Avec la v1.0, TanStack a ajouté des fonctions serveur isomorphes, du routage basé sur les fichiers, du SSR avec streaming, et des primitives URL-as-state avec validation à l'exécution.

L'argumentaire est simple : conservez la sûreté des types et le contrôle explicite de TanStack Router, ajoutez un véritable runtime serveur, déployez sans verrouillage.

Ce qu'il vous offre et que Next.js ne propose pas :

  • Sûreté des types de bout en bout pour les routes, paramètres de recherche, loaders et fonctions serveur
  • Serveur de dev propulsé par Vite avec HMR quasi instantané
  • Contrôle SSR explicite par route au lieu des frontières implicites "use client" / "use server"
  • Déployez partout — pas de runtime edge dogmatique, pas de couplage à un fournisseur
  • Intégration profonde avec TanStack Query pour le prefetching et l'hydratation

Ce qu'il ne propose pas encore :

  • Le support de React Server Components arrive comme un ajout v1.x non-cassant
  • Un optimiseur d'images intégré (les équipes utilisent @unpic/react ou un CDN)
  • Le poli de déploiement de Vercel pour Next.js
  • La même profondeur de tutoriels, réponses Stack Overflow et données d'entraînement pour les outils de code IA

Performance : la réalité

Un benchmark 2026 largement partagé de BeyondIT a mis les deux frameworks côte à côte sur une application comparable. Les chiffres ne couronnent pas un vainqueur, ils exposent un arbitrage :

MétriqueNext.js 16 (RSC)TanStack Start v1
Bundle gzippé150–176 ko100–120 ko
First Contentful Paintenviron 1050 msenviron 1100 ms
Time to Interactiveenviron 1200 msenviron 1600 ms
Démarrage à froid du dev server10–12 s (grandes apps)2–3 s
HMR après édition0,8–2 smoins de 200 ms

Lisez attentivement : Next.js peut gagner sur les métriques de production visibles par l'utilisateur parce que l'hydratation partielle envoie moins de JavaScript pour les parties interactives. TanStack Start gagne sur l'expérience développeur, la taille de bundle et les garanties de typage. Si votre équipe est petite et livre souvent, le gain sur la boucle de dev s'accumule quotidiennement. Si vous servez des millions d'utilisateurs sur des appareils faibles, les économies d'hydratation de RSC comptent encore.

À quoi ressemble vraiment une migration

Le guide officiel de migration Next.js → TanStack Start et l'étude de cas Inngest convergent sur le même schéma. Le routage se mappe presque un à un :

Next.jsTanStack Start
src/app/layout.tsxsrc/app/__root.tsx
src/app/page.tsxsrc/app/index.tsx
src/app/posts/[slug]/page.tsxsrc/app/posts/$slug.tsx
src/app/posts/[...slug]/page.tsxsrc/app/posts/$.tsx
src/app/api/hello/route.tssrc/app/api/hello.ts

Les Server Components deviennent des fonctions loader sur la route. Les Server Actions deviennent createServerFn. next/image devient @unpic/react. La fonction head() sur la définition de route remplace l'export metadata.

Une route TanStack Start typique ressemble à ceci :

import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'
 
const getPost = createServerFn({ method: 'GET' })
  .inputValidator(z.object({ slug: z.string() }))
  .handler(async ({ data }) => {
    return db.posts.findUnique({ where: { slug: data.slug } })
  })
 
export const Route = createFileRoute('/posts/$slug')({
  loader: ({ params }) => getPost({ data: { slug: params.slug } }),
  component: PostPage,
})
 
function PostPage() {
  const post = Route.useLoaderData()
  return <article>{post.body}</article>
}

Chaque morceau — les params, le type de retour du loader, l'entrée de la fonction serveur — est typé de bout en bout. Renommez un paramètre et TypeScript listera tous les appelants cassés.

Le pattern de migration "force brute"

La décision la plus contre-intuitive d'Inngest a été de migrer d'un seul coup plutôt qu'incrémentalement. Leur raisonnement :

  1. Le routeur et les primitives SSR sont assez différents pour créer deux systèmes de routage concurrents dans la même app en cas de migration incrémentale
  2. Les agents de codage IA pouvaient faire le travail de conversion mécanique en quelques jours
  3. La recette utilisateur et un seul rollback en production étaient moins chers que des semaines de double maintenance

Pour le tableau de bord, un ingénieur épaulé par l'IA a bouclé la migration en environ deux semaines. Le développement de fonctionnalités n'a été bloqué que pendant deux à trois jours lors du merge final.

Quand migrer — et quand s'abstenir

Migrez vers TanStack Start si :

  • Votre équipe est petite et la friction sur la boucle de dev est la plainte principale
  • Vous dépendez fortement du routage type-safe et des paramètres de recherche typés
  • Vous devez déployer hors de Vercel sans combattre les défauts du framework
  • La plupart de vos routes sont interactives (dashboards, outils internes, applications SaaS)
  • Vous démarrez un nouveau projet et voulez un contrôle explicite dès le premier jour

Restez sur Next.js si :

  • Vous dépendez aujourd'hui des React Server Components en production
  • Votre profil de trafic récompense les charges d'hydratation plus petites sur des mobiles lents
  • Vous livrez sur Vercel et utilisez ISR, l'edge middleware ou next/image de manière intensive
  • Votre équipe est assez grande pour que recruter dans le bassin de talents Next.js compte
  • Vous avez une logique de cache et de revalidation qui fonctionne et que vous ne voulez pas réimplémenter

Il n'y a pas de bonne réponse au niveau du framework. Il n'y a qu'une bonne réponse pour votre code et les contraintes de votre équipe.

Ce que cela signifie pour les équipes MENA

Pour les équipes en Tunisie, en Arabie saoudite et plus largement dans la région MENA qui construisent des produits SaaS et des plateformes internes, le calcul est souvent plus proche de celui d'Inngest que d'une grande app grand public américaine. Les petites équipes qui livrent des dashboards et des outils d'administration bénéficient de manière disproportionnée de boucles de dev plus rapides et de garanties de typage plus fortes. Le coût d'une courbe d'apprentissage plus longue est réel, mais c'est un coût ponctuel payé contre des années de vélocité cumulée.

Le mouvement pragmatique pour la plupart des équipes : gardez la production sur Next.js, démarrez le prochain outil interne ou tableau de bord d'administration sur TanStack Start, et laissez l'expérience vécue — pas les benchmarks Twitter — trancher pour une adoption plus large.

En résumé

TanStack Start n'est pas un tueur de Next.js. C'est la première alternative crédible depuis Remix qui possède à la fois une philosophie cohérente et une ergonomie de production. Le fait que des équipes d'ingénierie soient prêtes à investir deux semaines d'effort de migration pour un gain de 83% sur le temps de dev vous dit quelque chose d'important : la conversation autour des frameworks React est rouverte, et c'est sain pour l'écosystème.

Si vous n'avez pas au moins prototypé une seule route en TanStack Start, vous travaillez avec des informations dépassées sur le paysage des frameworks React en 2026.


Lectures associées sur noqta.tn :