TanStack Router: Más allá de lo básico

Hola a todos. Hoy estoy aquí para hablar sobre enrutamiento, más precisamente 10-Stack Router. Pero primero, quiero felicitar a esta increíble organización por hacer posible esta conferencia y por permitirme ser parte de ella. Estoy realmente feliz de estar aquí hablando con ustedes hoy.

Bien, ¿quién soy yo? Mi nombre es Joana Santos. Soy Ingeniera de Producto Fullstack en Synvertec 6. Soy de Viseu, Portugal, y mi handle es joanamcsa en todas partes. Tengo tres años de experiencia con marketplaces, IA, portales de desarrolladores internos, y así sucesivamente. Y si quieren darme feedback, charlar sobre 10-Stack Router o tecnología en general, siéntanse libres de hacerlo.

Bien, el viaje de hoy. Aquí está nuestra ruta para hoy. Comenzaremos viendo cómo es el enrutamiento en las aplicaciones React de hoy. Luego veremos por qué alguien debería considerar 10-Stack Router. Luego, cómo podemos comenzar. Luego pasaremos por el enrutamiento dinámico y parámetros de tipo seguro. Cómo podemos enmascarar nuestra ubicación. Y finalmente, carga de datos y prefetching como un jefe. Vamos a la carretera, ¿de acuerdo?

Bien, el enrutamiento en las aplicaciones modernas de React. Hablemos de algo que todos usamos, pero que secretamente tememos, el enrutamiento. Todos hemos estado allí. Configuras React Router, todo está bien hasta que no lo está. Luego, un día estás tratando de manejar diseños anidados, carga de datos, outguards y URLs dinámicas, y de repente se siente como si estuvieras jugando Django con la navegación de tu aplicación. ¿Por qué el enrutamiento parece que debería ser fácil pero de alguna manera se convierte en un cruce de espaguetis de rutas, salidas y... Espera, ¿a dónde va este redireccionamiento? Ahí es donde 10-Stack Router interviene como el compañero de cuarto genial y organizado que etiqueta todo en el refrigerador. Veamos por qué.

Bien, porque es de tipo seguro, sí, incluso para URLs. Es modular y anidado por diseño. Tiene carga de datos y prefetching integrados. Además, realmente hace que el enrutamiento se sienta moderno nuevamente. Puede que conozcas a la gente de 10-Stack por React Query o 10-Stack Query, así que sabes que se preocupan por los datos y la experiencia del desarrollador. Y en comparación con React Router DOM, es menos sopa de componentes y más arquitectura consciente de los datos y el diseño.

Bien, ¿cómo podemos empezar? Bueno, como en casi todos los paquetes que tenemos aquí, comenzamos instalando la dependencia. Así que primero, hacemos ese comando mágico, y luego comenzaremos instanciando nuestro router y declarando el módulo para que TypeScript sepa dónde buscar en nuestro router. Luego envolveremos nuestra aplicación en el proveedor del router, y pasamos el router.

Bien, ¿cómo podemos usar esto? Comenzaremos viendo rutas anidadas y parámetros, y aquí es donde 10-Stack Router brilla, porque las cosas se están volviendo dinámicas. Puedes anidar rutas para diseños que se componen como piezas de lego. Creas el archivo con tu ruta, y de repente TypeScript sabe exactamente que la ruta existe, y también crea el código para ti. Así que si tienes el servidor en funcionamiento y creas el archivo routes-cities-index.tsx, este es el código que obtienes generado automáticamente. Y es bastante genial, porque si intento escribir cities con una S en lugar de una C, por ejemplo, TypeScript me dará un error porque no coincide con el nombre del archivo.

Bien, eso parece bastante simple. Pero, ¿qué pasa si quiero tener una URL dinámica? Bien, entonces en lugar de routes-cities-index, ahora creamos un archivo que es routes-cities-$cid.tsx. El $ le dirá a TypeScript y al 10-Stack Router que es dinámico, por lo que creará una ruta dinámica. Y luego en el componente, podemos acceder al $cid a través del hook use-params. Y esto es bastante genial porque también es de tipo seguro. Si escribimos $cid con una D mayúscula en lugar de con una d minúscula, TypeScript nos dará un error.

¿No es esto genial? Bien, pero eso parece bastante simple. ¿Qué pasa si quiero agregar algunos parámetros de búsqueda? Bien, volvamos un poco a nuestro routes-cities-index.tsx. Y aquí, digamos que es una lista de ciudades y quieres paginarla, filtrarla, y así sucesivamente. ¿Cómo podemos hacerlo? Bien, tenemos un validate-search, y aquí estoy usando el esquema Zod, pero puedes usar cualquier esquema que – cualquier paquete, cualquier validador que te guste.

Y aquí estoy diciendo que la página debe ser un número, y si no existe o si no es un número, se ajustará al número 1. Bien, genial, pero ¿cómo podemos usar esto en el componente? Si adivinaste a través de un hook, adivinaste correctamente, porque el router de 10-sec también nos da un hook que es el use-search, al que podemos acceder a todo lo que está en los parámetros de búsqueda. Y en este caso, es la página. Debo decir que esto es bastante genial, porque ya no necesitamos los use states para controlar los parámetros, y luego tenemos un use-effect que dice que cada vez que los parámetros cambian, lo cambiamos en la URL, todo está integrado y todo se siente increíble. ¿No te encanta?

Bien, pero ¿qué pasa si queremos agregar algo de autenticación? ¿Qué pasa si no todas las páginas deben ser vistas por todos? Bueno, volvamos un poco a nuestro archivo base, y en este caso, tendremos la opción beforeload, y aquí estoy haciendo una solicitud al servidor, y en este caso, estoy usando TRPC, pero podríamos estar usando una solicitud de access o fetch, y si el CD no existe, o no tiene las reglas necesarias para esta página, entonces lanzamos una redirección a la página de inicio. Aquí podemos hacer, si el usuario no está autenticado, y todo eso, y esto sucede antes de que la página se sirva al cliente, lo que significa que no parpadea la página del CD, la lista de la página del CD, y luego iremos directamente a la página de inicio, no parpadea nada, lo que lleva a una mejor experiencia de usuario.

Bien, ahora hablemos de la vida paralela de HANA Montana. ¿Qué pasa si quiero que el usuario esté en una página pero viendo otra? ¿Cómo podemos hacer eso? Bien, entonces este componente de enlace también es de TimeStack Router, y podemos decir que va a la página slash mask, pero en realidad lo que el usuario ve es que va a la página slash CD, lo cual creo que es bastante genial, y puede ser útil cuando estás abriendo modelos y cosas, pero no quieres mostrarle al usuario que es una página diferente. ¿Y no es esto pura magia?

Bien, ahora la obtención de datos inteligente. Ahora datos. Aquí es donde realmente entra en juego el ADN de TimeStack. Cada ruta puede tener su cargador, y aquí estoy usando las dependencias del cargador para pasar la página, así que si necesitáramos la página para obtener nuestro primer CD, podríamos usarla en la solicitud. Y antes de renderizar mi página, estoy haciendo una solicitud al servidor en el cargador, nuevamente a través del IRPC y devolviendo ese mismo resultado y sus parámetros de búsqueda. Para usar los parámetros de búsqueda en el cargador, tenemos que devolver las dependencias del cargador en la opción de dependencias del cargador. ¿Y cómo podemos hacer esto, y cómo podemos usar esto en el componente? Nuevamente, con un hook, con el use loader data. Y aquí obtienes directamente el CD, que ya está cargado, y adivina qué, esto también está tipado con la parte anterior, y podemos usar la información a nuestro antojo. Y si esto no fuera suficiente, también podemos diferir datos.