SPA vs SSR con React Router Dom

Antes de elegir cómo construir tu sitio con React, necesitas entender dos enfoques que definen la experiencia del usuario y el SEO: Single Page Application (SPA) y Server-side rendering (SSR). De esa decisión depende qué herramienta usar, y por qué React Router Dom encaja perfecto cuando trabajas con SPA en Vite.

¿Cuál es la diferencia entre Single Page Application y Server-side rendering?

Las dos arquitecturas resuelven el mismo problema (mostrarle contenido al usuario), pero lo hacen de forma opuesta.

Una Single Page Application carga todo el HTML de tu sitio de una sola vez. Eso genera un pequeño retraso inicial porque el navegador descarga todo el peso junto, pero después la navegación entre vistas se siente fluida e instantánea. El usuario no percibe recargas: todo ya está ahí.

El Server-side rendering, en cambio, entrega el HTML desde el servidor página por página. La carga inicial es rápida, pero cada vez que navegas a una nueva vista, el servidor vuelve a generar y enviar el HTML correspondiente.

¿Cuándo usar SPA y cuándo usar SSR? Usa SPA cuando priorizas fluidez y experiencia de usuario dentro de la app. Usa SSR cuando necesitas que los motores de búsqueda indexen tu contenido, porque el HTML llega listo desde el servidor [01:45].

¿Qué herramientas elegir según el enfoque?

La decisión técnica se traduce en stack:

• Si quieres SSR con sistema de rutas integrado, usa NextJS.
• Si vas con SPA y quieres control sobre el enrutamiento del lado del cliente, usa React Router Dom.
• Si buscas un bundler rápido para desarrollar, Vite es ideal para arrancar.

¿Cómo crear un proyecto con Vite y React Router Dom?

Vamos a montar el proyecto base paso a paso. Abre tu terminal y escribe:

bash npm create vite@latest my-react-router-app

Elige React y TypeScript cuando te lo pregunte. Entra a la carpeta, instala dependencias y arranca el servidor:

bash cd my-react-router-app npm install npm run dev

Con el proyecto corriendo en el localhost, instala la librería de enrutamiento:

bash npm install react-router-dom

Abre el package.json y quítale el gorrito (^) a la versión de react-router-dom para fijarla. Así garantizas que cualquiera que clone el proyecto trabaje con la misma versión [05:30].

¿Cómo se configura BrowserRouter en main.tsx?

BrowserRouter es el componente que envuelve tu aplicación y habilita el enrutamiento en toda la app. Sin él, los demás componentes de React Router Dom no funcionan.

En main.tsx importa el componente y envuelve <App />:

tsx import { BrowserRouter } from 'react-router-dom'

<BrowserRouter> <App /> </BrowserRouter>

Esto deja toda tu aplicación lista para definir rutas en cualquier nivel.

¿Cómo crear rutas y navegación con Link, Routes y Route?

Dentro de App.tsx necesitas tres piezas clave de react-router-dom: Link, Routes y Route. Cada una cumple un rol distinto.

• Link reemplaza a la etiqueta <a> y permite navegar sin recargar la página.
• Routes es el contenedor que agrupa todas las rutas disponibles.
• Route define una ruta individual con su path y el element que debe renderizar.

El código base queda así:

tsx import { Routes, Route, Link } from 'react-router-dom'

function App() { return ( <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> </ul>

  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</div>

) }

function Home() { return <h2>Home</h2> }

function About() { return <h2>About</h2> }

La propiedad to en Link indica a qué ruta navegar. La propiedad path en Route define qué URL activa cada componente. Cuando das clic en About, la URL cambia a /about y se renderiza el componente correspondiente sin recargar la página [10:20].

¿Qué hace BrowserRouter en una app de React? Es el contenedor que conecta tu aplicación con el historial del navegador y permite que los componentes Link, Routes y Route gestionen la navegación sin recargar.

¿Por qué usar Link en lugar de la etiqueta a tradicional?

Un <a href> tradicional hace que el navegador recargue toda la página, lo que rompe la experiencia SPA. Link, en cambio, intercepta el clic y actualiza solo la vista que cambia, manteniendo el estado de la aplicación intacto.

Esa diferencia es la que hace que una Single Page Application se sienta como una app nativa: rápida, sin parpadeos y sin pérdidas de contexto.

Ahora te toca a ti. Cuéntame en los comentarios cómo te quedó tu vista inicial y compárteme cómo la estilizaste, porque por defecto se ve bastante simple. ¿Le pusiste Tailwind, CSS modules o algo distinto?