RRv7 como un puente a React19

Si te has dado una vuelta recientemente por la documentación de React para saber lo que hace falta y comenzar a usar React 19, seguro ya te topaste con el gigantesco crater; más que crater: cañon; una grieta maligna como la de Zelda, un hueco; una brecha, que se tiene que cruzar, para poder implementarlo. Entonces, sabrás que se tiene que dejar de lado el trabajo o lo que sea que uno ande haciendo para ponerse a aprender los muchos nuevos hooks disponibles, hacerles sentido y, tal vez lo más retador: comprender cómo jodidos brincar esa gran grieta para lograr llegar al otro lado y ahora trabajar desde un servidor. 😳🕳️🥵

Por fortuna, React Router v7 está aquí para ayudarnos

React Router se presenta como una estrategia realista para ayudarnos a cerrar la brecha que existe entre el uso de React 18 y su versión 19. No tenemos que lanzarnos al vacío para ver si logramos volar cuál ardilla. Podemos usar un puente. 🌉 

Lo mejor es que, gracias a las feature-flags que el equipo de React Router usa para sus actualizaciones, podemos aprender a trabajar del lado del servidor sin ningún dolor. 😎 Pues, con React Router, podemos seguir trabajando como siempre lo hacemos con React 18 (desde el cliente) pero podemos ir poco a poco usando las herramientas disponibles para nosotros en el servidor; como las funciones action o los loaders.

React Router como una biblioteca únicamente

Podemos emplear la nueva versión de React Router como lo hemos venido haciendo con todas sus versiones anteriores: como una simple library de ruteo. Sí, nomás para hacer coincidir una URL con un grupo de componentes. Y con todo el acceso de siempre a sus herramientas de navegación y estados en las mismas URLs. Es decir, si quieres seguir creando Single Page Apps.

RRv7 es, también, usado ampliamente en entornos offline; donde las aplicaciones rara vez tienen estados de carga, pues todos los datos se sincronizan de forma invisible para el usuario. 😶‍🌫️

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route index element={<RecentActivity />} />
        <Route path="project/:id" element={<Project />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

Así, no tenemos que abandonar nuestra querida anidación de rutas ¡y podemos actualizar nuestros proyectos sin problemas!

React Router como framework

Pero, yo creo que el uso más interesante de esta nueva versión es que, por fin, tenemos un framework definitivo para React. 🤖 Uno que además viene de la mano de Vite, lo que nos acerca a una de las mejores comunidades open source del momento. Con RRv7 y Vite tenemos acceso a muchos beneficios:

• Podemos usar el poderoso bundler de Vite y su servidor de desarrollo
• La cantidad de herramientas y plugins de Vite son interminables
• Tenemos hot module replacement a la mano para cliente y servidor
• El code splitting nos permite trabajar back y front en un solo archivo
• El tipado seguro de extremo a extremo es prácticamente automático
• Podemos optar por el ruteo basado en archivos o en configuración
• ¡No necesitamos Redux ni nada parecido! gracias a loader y clientLoader
• Podemos escribir mutaciones de datos fácilmente con action
• Cuando mutemos los datos, tendremos revalidaciones automáticas
• Todas las opciones de renderizado moderno: SSR, SPA ¡y hasta SSG!
• Herramientas para estados de carga y optimistic UI
• RRv7 es compatible con cualquier nube; seguro existe un adapter para tu nube favorita gracias a su enorme comunidad open source

Y finalmente, su nuevo archivo para la configuración de las rutas: routes.ts, nos permite trabajar como nosotros prefiramos: agrupando archivos y componentes que trabajan juntos dentro de carpetas, o no; pues, solo hace falta indicar cuál es el path y donde el archivo: que puede vivir en cualquier rincón de nuestra app. 🤗 

Route Module API

Si alguna vez te dió curiosidad Remix, sabrás que React Router ha heredado todas las buenas ideas de este proyecto, incluyendo su Module API. Me refiero a todas las funciones que podemos exportar de un archivo de ruta.

Como:

• La función loader para la carga de datos
• La función action para mutar la base de datos
• La función meta para optimizar nuestro SEO
• La función links para cargar fuentes, hojas de estilo o precargar nuestros assets

Pero, la verdad es que no terminaría de contarte todo sobre lo que React Router en modo Framework nos ofrece, me falta contarte sobre su función errorBoundary, su componente <Form>, el fetcher o sus rutas de recursos ¡y tanto más!

Yo creo que sería mejor dejar de especular y mejor aprender de una vez cómo sacarle toda la ventaja a React Router como framework. ¿No crees? Entonces, continuemos con lo mero bueno, decía mi pa.

bliss.