TanStack Start est-il meilleur que Next.js ?

L'auteur présente son objectif de comparer TanStack Start et Next.js après avoir construit la même application de prise de notes avec les deux frameworks lors d'un livestream. Il établit plusieurs critères d'évaluation et précise que cette comparaison se concentre uniquement sur ces deux frameworks, même si d'autres options existent comme Remix, React Router, Nuxt ou SvelteKit. Il clarifie que TanStack Start est essentiellement TanStack Router avec des fonctionnalités serveur ajoutées, similaire à la façon dont Next.js est un framework React full-stack. L'auteur souligne également qu'il ne faut pas comparer Next.js avec React Vite + React Router si on n'a pas besoin de logique côté serveur.

Next.js obtient un avantage significatif en termes de compatibilité IA car les chatbots comme ChatGPT ont une meilleure connaissance de Next.js que de TanStack Start, qui est encore en release candidate. L'auteur recommande de fournir du contexte supplémentaire à l'IA via MCP, recherche web ou documentation pour compenser. Concernant l'écosystème, Next.js surpasse largement TanStack Start avec plus de tutoriels, vidéos YouTube, cours et packages disponibles. Les graphiques de téléchargements montrent que Next.js domine largement, bien que TanStack Start affiche une tendance à la hausse. Next.js fait partie de la stack par défaut que l'IA propose (Next.js, React, Tailwind, TypeScript), ce qui explique sa popularité accrue.

L'auteur attribue deux plus aux deux frameworks mais pour des raisons différentes. Next.js avec l'app router est facile pour débuter avec une bonne documentation de démarrage, mais devient complexe avec les fonctionnalités avancées comme la mise en cache agressive sur différentes couches. TanStack Start a une barrière d'entrée plus élevée avec une documentation de démarrage moins claire et des concepts importants manquants comme la récupération de données, nécessitant aussi de consulter la documentation de TanStack Router qui peut sembler écrasante. Cependant, une fois cette barrière initiale franchie, TanStack Start devient plus facile à maîtriser sans les pièges cachés de Next.js. L'auteur note que la documentation de TanStack Start s'est largement améliorée mais garde encore un aspect de 'décharge de cerveau'.

TanStack Start reçoit trois plus contre deux pour Next.js en termes d'expérience développeur. Les problèmes de Next.js incluent des comportements différents entre développement et production à cause du système de cache, obligeant à tester constamment en mode production. Le serveur de développement peut aussi être lent, même si la nouvelle version Turbopack améliore les choses, elle ne surpasse pas la configuration Vite de TanStack Start selon l'auteur. L'expérience avec TanStack Start est décrite comme extrêmement fluide, rapide et prévisible, sans comportement bizarre majeur malgré quelques petites particularités dues au statut de release candidate. L'auteur exprime clairement sa préférence pour l'expérience développeur de TanStack Start.

Les deux frameworks utilisent une approche de routage basée sur les fichiers avec des conventions de nommage similaires bien documentées. Next.js propose des fonctionnalités complexes comme les routes parallèles qui peuvent être délicates. L'avantage majeur de TanStack Start est sa sécurité de type complète à 100% grâce à son routeur basé sur les fichiers, ce qui constitue un atout significatif. En termes de support TypeScript général, Next.js offre un très bon support mais TanStack Start va encore plus loin avec un support TypeScript encore meilleur, notamment pour les server actions, fonctions serveur et récupération de données. L'auteur recommande fortement l'utilisation de TypeScript et souligne que TanStack Start est particulièrement agréable à utiliser dans ce contexte.

Next.js s'appuie principalement sur les React Server Components où les composants de page sont rendus uniquement sur le serveur, permettant d'inclure directement le code de récupération de données dans les composants sans propagation au client. TanStack Start adopte une approche différente avec un modèle de loader similaire à Remix, où les composants sont rendus côté serveur ET client. Les développeurs utilisent 'createServerFunction' pour marquer les fonctions comme étant exécutées uniquement côté serveur mais appelables depuis le client. Pour les mutations, Next.js utilise des server actions avec la directive 'use server', tandis que TanStack Start continue avec 'createServerFunction' combiné au hook 'useServer'. L'auteur mentionne que TanStack Start ajoutera bientôt le support des React Server Components, mais l'approche actuelle avec loaders et fonctions serveur continuera d'exister.

La mise en cache est identifiée comme l'une des parties les plus difficiles de Next.js, avec une approche agressive et potentiellement complexe sur différentes couches. L'auteur promeut son cours Next.js qui couvre ce sujet en profondeur. Bien que les paramètres agressifs par défaut puissent offrir de bonnes performances, il est facile de se 'tirer une balle dans le pied'. TanStack Start a des paramètres par défaut plus raisonnables, moins agressifs et surtout cohérents entre développement et production. Il offre une mise en cache pour la navigation entre routes qui aide avec les performances sans essayer de tout mettre en cache partout. Cela signifie que les développeurs doivent potentiellement définir eux-mêmes de bons en-têtes de cache pour optimiser les performances, mais évite les problèmes complexes rencontrés avec Next.js.

L'auteur attribue deux plus aux deux frameworks pour la stabilité. Next.js est plus mature avec des centaines de milliers d'applications en production, mais a connu des problèmes de bugs ces dernières années, notamment des plantages du serveur de développement, bien que la situation se soit nettement améliorée. Les vulnérabilités de sécurité React mentionnées ne sont pas spécifiques à Next.js et pourraient aussi affecter TanStack Start à l'avenir. TanStack Start, toujours en release candidate, présente quelques problèmes comme des plantages bizarres, messages d'erreur étranges et comportements inattendus. Malgré cela, l'auteur a des applications en production comme buildmygraphic.com fonctionnant sans problèmes avec TanStack Start, justifiant ainsi l'attribution de deux plus malgré son statut moins mature.

Next.js excelle avec ses 'batteries incluses' comme le composant Image intégré et le support d'internationalisation, que TanStack Start n'offre pas actuellement. L'auteur note que des alternatives tierces existent mais si ces fonctionnalités sont importantes, Next.js est le meilleur choix. Pour le déploiement, Next.js obtient trois plus sur Vercel (développé par la même entreprise) avec une expérience super facile et fluide, et deux plus pour d'autres fournisseurs grâce aux améliorations récentes de la documentation. TanStack Start reçoit deux plus car la documentation d'hébergement est encore délicate, bien que des partenaires comme Cloudflare et Netlify aient une bonne documentation. Le déploiement sur VPS avec BUN pose quelques défis selon l'expérience de l'auteur. Il conclut en invitant les spectateurs à partager leurs expériences et opinions sur les deux frameworks.