CursosEmpresasBlogLiveConfPrecios

Single Page Application vs Server Side Rendering con React Router

Clase 9 de 31 • Curso de React Avanzado

Clase anteriorSiguiente clase
Resumen

Entender la diferencia entre Single Page Application (SPA) y Server Side Rendering (SSR) es clave para construir sitios web modernos y mejorar la experiencia de usuario. En esta guía, exploramos sus características y configuramos un proyecto básico de React con enrutamiento para implementar estos conceptos en un entorno práctico.

¿Qué es una Single Page Application y cuáles son sus ventajas?

  • Una SPA carga todo el HTML y recursos al inicio, lo cual puede generar un ligero retraso en la carga inicial.
  • Una vez cargada, permite navegación rápida y fluida sin necesidad de recargar la página.
  • Ideal para experiencias de usuario enfocadas en la interacción continua dentro de la aplicación.

¿Qué inconvenientes tiene el enfoque de SPA?

  • Al cargar todo desde el inicio, el tiempo de carga inicial puede ser más lento en dispositivos con menor capacidad.
  • Limitada para SEO, ya que los motores de búsqueda pueden tener dificultades para indexar todo el contenido cargado de una sola vez.

¿Cómo funciona el Server Side Rendering y cuáles son sus beneficios?

  • SSR carga el HTML desde el servidor en cada solicitud de página, permitiendo una carga inicial más rápida.
  • Es ideal para SEO, ya que cada vista se carga de forma independiente, facilitando a los motores de búsqueda rastrear el contenido.
  • Permite mejorar la accesibilidad y la experiencia en dispositivos con recursos limitados, evitando la carga masiva de recursos al inicio.

¿Cuándo utilizar SPA o SSR?

  • SPA: Cuando se requiere una experiencia de usuario interactiva y rápida dentro de la aplicación, sin necesidad de SEO avanzado.
  • SSR: En aplicaciones donde el SEO y la velocidad de carga inicial son prioridades, como en sitios de contenido o e-commerce.

¿Cómo configurar un proyecto React con React Router?

Para crear una SPA en React, vamos a configurar enrutamiento con React Router DOM y organizar las rutas básicas.

  1. Inicializar el proyecto:

    npm create vite@latest my-react-routers-app

    Selecciona React con TypeScript como el framework base.

  2. Instalar dependencias:
    Una vez dentro de la carpeta del proyecto, ejecuta:

    npm install
npm install react-router-dom

  3. Configurar enrutamiento básico:

    • En el archivo main.tsx, envuelve tu aplicación en BrowserRouter.
    • Crea componentes para diferentes vistas, como Home y About, y define rutas para ellos.

  4. Agregar enlaces de navegación:
    Utiliza el componente Link de React Router para conectar las rutas de Home y About.

Ejemplo de configuración en App.tsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    
      
      
        } />
        } />
      
    
  );
}

export default App;
  1. Iniciar el servidor de desarrollo:
    Ejecuta el comando:
    npm run dev
    Accede a localhost y navega entre las rutas configuradas para verificar el funcionamiento.

¿Qué tecnologías podemos usar para SPA y SSR?

  • Para SPA: React con React Router DOM es una opción común para navegación en aplicaciones de una sola página.
  • Para SSR: Next.js ofrece una configuración optimizada para SSR y es ideal para mejorar el SEO y la experiencia de usuario en aplicaciones React.