Qué es TanStack Start: Un framework de React para competir con Next.js

En los últimos meses, la comunidad de desarrolladores de React ha estado expectante ante el lanzamiento de TanStack Start, un framework full-stack construido sobre las herramientas de TanStack, como TanStack Router y TanStack Query.

Este nuevo enfoque quiere competir con Next.js y promete simplificar el desarrollo de aplicaciones web modernas, ofreciendo características avanzadas de enrutamiento, gestión de datos y renderizado del lado del servidor (SSR). Aquí analizamos sus principales características, fuentes y recomendaciones para quienes deseen explorarlo.

Un nuevo framework full stack para React

¿Qué es TanStack Start? ¶

TanStack Start es un framework para React que va más allá de un simple boilerplate. Surge como una evolución combinando herramientas modernas como Vite para el empaquetado y despliegue, y Vinxi para optimizar el rendimiento.

Su objetivo principal es proporcionar una experiencia tanto para el desarrollador como para el usuario final, sin comprometer capacidades del lado del servidor.

Principales características ¶

Enrutamiento robusto con TanStack Router: El enrutador integrado de TanStack Start permite manejar rutas complejas con tipado TypeScript seguro. Esto facilita la creación de interfaces dinámicas con una experiencia del usuario mejorada.
Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG): TanStack Start ofrece soporte nativo para SSR y SSG, lo que mejora significativamente el rendimiento y la optimización para motores de búsqueda.
Funciones del servidor y RPC integradas: Una de las innovaciones más destacadas es la capacidad de definir funciones del servidor en cualquier parte de la aplicación. El compilador se encarga de extraer estas funciones automáticamente para ejecutarlas del lado del servidor.
Integración con TanStack Query para gestión de datos: TanStack Query permite la obtención de datos de forma eficiente, tanto del lado del cliente como del servidor, reduciendo la necesidad de manejar estados manualmente.
Flexibilidad para desplegar en múltiples plataformas: Al estar construido sobre Vite y Vinxi, TanStack Start es fácilmente desplegable en cualquier entorno que soporte JavaScript, facilitando el desarrollo y la implementación.

Opiniones de la comunidad ¶

Theo sobre TanStack Start ¶

Theo, creador del stack T3, comenta en su análisis que TanStack Start representa una evolución natural hacia un framework más completo y robusto. Según Theo:

“TanStack Start es como la evolución natural del stack T3 en muchos aspectos. Mantiene la experiencia del cliente mientras ofrece todas las funcionalidades del servidor”.

Esta opinión resalta cómo el enfoque “cliente primero” permite una experiencia rica, sin comprometer las capacidades del servidor.

Bytes by ui.dev ¶

En su artículo, “Bytes by ui.dev” destaca a TanStack Start como una competencia directa para frameworks establecidos como Next.js. El equipo de ui.dev señala:

“TanStack Start es el Next.js killer que todos estábamos esperando”.

Este comentario resalta la expectativa que ha generado TanStack Start en la comunidad, especialmente por su capacidad de ofrecer SSR completo y funciones del servidor sin sacrificar la interactividad del cliente.

Aryan Patil en Medium ¶

Aryan Patil, en su análisis, describe a TanStack Start como una alternativa viable a Next.js, simplificando la configuración inicial y permitiendo a los desarrolladores enfocarse en crear características en lugar de ajustes de herramientas.

“Con TanStack Start, el objetivo es eliminar el tiempo perdido en configuraciones y permitir a los desarrolladores enfocarse en construir características”.

Hábitos recomendados para aprovechar TanStack Start ¶

Explora herramientas nuevas en etapas tempranas: TanStack Start está en fase alpha, lo que ofrece una oportunidad única para experimentar con sus capacidades y proporcionar feedback a los creadores.
Adopta un enfoque modular: Aprovecha la flexibilidad de TanStack Start para elegir las herramientas que mejor se adapten a tu proyecto.
Implementa SSR y SSG para mejorar el rendimiento: Utilizar estas características integradas te ayudará a ofrecer una mejor experiencia de usuario y optimización para SEO.

Datos clave sobre TanStack Start ¶

Construido sobre Vite y Vinxi: Permite un empaquetado rápido y soporte para reemplazo de módulos en caliente (HMR).
Integración con Convex: Facilita la sincronización en tiempo real entre cliente y servidor usando funciones TypeScript serializables.
TanStack Router y TanStack Query: Estas herramientas ofrecen enrutamiento seguro y gestión de datos eficiente.

Algunas recomendaciones ¶

Prueba TanStack Start si buscas una alternativa a Next.js: Ofrece una experiencia del desarrollador única y una implementación flexible.
Explora la integración con Convex para sincronización en tiempo real: Esta herramienta puede simplificar la gestión del estado y la obtención de datos.
Sigue de cerca las actualizaciones sobre React Server Components: TanStack Start planea soportar esta tecnología en el futuro, lo que mejorará aún más la eficiencia del framework.
Participa en la comunidad: Contribuye con tus comentarios y experimenta con las capacidades del framework en su fase alpha.

TanStack Start representa una nueva etapa en el desarrollo de aplicaciones full-stack en React, combinando la potencia del lado del servidor con una experiencia del cliente enriquecida. Si deseas estar a la vanguardia del desarrollo web, explorar este framework puede ser una excelente oportunidad.

Tutorial: Introducción a TanStack Start ¶

En este tutorial vamos a explorar las características principales de TanStack Start, un framework full-stack para React construido sobre las herramientas del ecosistema TanStack, como TanStack Router y TanStack Query. Veremos cómo utilizar su enrutamiento robusto, manejo de datos y renderizado del lado del servidor (SSR) a través de ejemplos y una estructura de proyecto completa.

Requisitos previos ¶

Para seguir este tutorial, necesitas:

Conocimientos básicos de React y TypeScript.
Node.js instalado en tu sistema.
Familiaridad con herramientas de construcción como Vite.

Instalación y configuración ¶

Comencemos clonando el repositorio de ejemplo y configurando el entorno:

git clone https://github.com/TanStack/tanstack-start-example.git
cd tanstack-start-example
pnpm install
pnpm dev

El comando pnpm dev iniciará el servidor de desarrollo en http://localhost:3000.

Estructura del proyecto ¶

El proyecto tiene la siguiente estructura:

./
├── app
│   ├── components
│   ├── routes
│   ├── styles
│   ├── utils
│   ├── api.ts
│   ├── client.tsx
│   ├── router.tsx
│   └── ssr.tsx
├── app.config.ts
├── package.json
├── tailwind.config.cjs
└── tsconfig.json

Vamos a desglosar algunos de los directorios más importantes:

components: Aquí se encuentran los componentes reutilizables, como DefaultCatchBoundary para manejar errores globales.
routes: Contiene todas las rutas de la aplicación organizadas en archivos, lo que facilita la navegación y el manejo de la lógica del lado del servidor.
utils: Utilidades compartidas como funciones de manejo de datos y configuraciones SEO.
client.tsx y ssr.tsx: Archivos de configuración para la hidratación en el cliente y el renderizado del servidor respectivamente.

Enrutamiento con TanStack Router ¶

Una de las principales características de TanStack Start es su potente sistema de enrutamiento. Aquí un ejemplo de cómo definir una ruta básica:

// /app/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return <div>Bienvenido a TanStack Start!</div>
}

Este archivo define la ruta raíz de la aplicación (/) y utiliza el componente Home. La función createFileRoute crea una ruta con configuración automática para navegación y carga de datos.

Anidamiento de rutas ¶

Puedes anidar rutas fácilmente. Aquí un ejemplo:

// /app/routes/posts/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  component: PostsComponent,
})

function PostsComponent() {
  return <div>Lista de posts</div>
}

Y para una ruta dinámica:

// /app/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params: { postId } }) => fetchPost(postId),
  component: PostComponent,
})

function PostComponent() {
  const post = Route.useLoaderData()
  return <div>{post.title}</div>
}

En este ejemplo, fetchPost es una función que obtiene los datos del post a partir del ID proporcionado en la URL.

Gestión de errores ¶

TanStack Start permite manejar errores de forma centralizada con componentes como DefaultCatchBoundary:

// /app/components/DefaultCatchBoundary.tsx
import { ErrorComponent, ErrorComponentProps } from '@tanstack/react-router'

export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
  console.error(error)
  return (
    <div>
      <ErrorComponent error={error} />
      <button onClick={() => window.location.reload()}>Reintentar</button>
    </div>
  )
}

Este componente muestra un mensaje de error y permite al usuario recargar la página.

Funciones del servidor (Server Functions) ¶

TanStack Start permite definir funciones del servidor dentro del mismo archivo que el componente de cliente. Aquí un ejemplo:

// /app/routes/deferred.tsx
import { createServerFn } from '@tanstack/start'
import { Suspense } from 'react'

const fetchData = createServerFn('GET', async () => {
  return { message: 'Hola desde el servidor!' }
})

export const Route = createFileRoute('/deferred')({
  loader: async () => {
    const data = await fetchData()
    return { data }
  },
  component: DeferredComponent,
})

function DeferredComponent() {
  const { data } = Route.useLoaderData()
  return <div>{data.message}</div>
}

En este caso, createServerFn define una función del servidor que puede ser llamada directamente desde el cliente, simplificando las llamadas remotas.

Integración con TanStack Query ¶

TanStack Query facilita la gestión de datos en React. Aquí un ejemplo de cómo utilizarlo para obtener datos de un API:

// /app/utils/posts.tsx
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

export function usePosts() {
  return useQuery(['posts'], async () => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return res.data
  })
}

Y en el componente:

// /app/routes/posts.tsx
import { usePosts } from '../utils/posts'

export function PostsComponent() {
  const { data, isLoading, error } = usePosts()

  if (isLoading) return <div>Cargando...</div>
  if (error) return <div>Error al cargar los posts</div>

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Renderizado del lado del servidor (SSR) ¶

TanStack Start facilita la configuración del renderizado del lado del servidor. En el archivo ssr.tsx:

// /app/ssr.tsx
import { createStartHandler, defaultStreamHandler } from '@tanstack/start/server'
import { createRouter } from './router'

export default createStartHandler({
  createRouter,
})(defaultStreamHandler)

Este archivo configura el servidor para manejar el renderizado y las peticiones HTTP.

TanStack Start es una herramienta poderosa para el desarrollo de aplicaciones full-stack en React. Ofrece un enrutamiento seguro, gestión de datos eficiente y simplificación en la creación de funciones del servidor. Te recomiendo explorar más a fondo sus características y participar en la comunidad para obtener el máximo provecho.