CursosEmpresasBlogLiveConfPrecios

Single Page Application vs Server Side Rendering con React Router

Clase 9 de 31 • Curso de React Avanzado

Clase anteriorSiguiente clase
Resumen

Elegir entre Single Page Application y Server Side Rendering define el rendimiento, la experiencia del usuario y el SEO de tus proyectos en React. Aquí verás cómo decidir con claridad y, además, configurar el enrutamiento con React Router DOM y Vite para iniciar rápido con TypeScript y buenas prácticas.

¿Qué diferencias hay entre single page application y server side rendering?

Las dos aproximaciones cambian cómo se sirve el HTML y cómo el usuario percibe la carga e interacción. Entenderlas permite tomar decisiones informadas al crear aplicaciones con React.

  • Single Page Application: carga todo el HTML inicialmente. Puede haber un pequeño retraso al empezar, pero ofrece navegación muy fluida entre vistas porque ya está todo cargado.
  • Server Side Rendering: sirve el HTML desde el servidor por cada página. La primera carga es más rápida. Cada cambio de vista vuelve a cargar contenido. Mejora el SEO porque los motores de búsqueda pueden leer el HTML inicial.
  • Elección: para SSR puedes usar Next.js con rutas incluidas. Para SPA, trabajar con React Router DOM es directo y flexible.

¿Cómo iniciar un proyecto con Vite y React Router DOM?

El flujo es simple: crear el proyecto con Vite, elegir React con TypeScript, instalar dependencias, correr en localhost e instalar react-router-dom. Luego, abrir en Visual Studio Code y verificar en package.json.

¿Qué comandos usar con npm y vite?

npm create vite@latest nombre-de-tu-app
# Selecciona React y TypeScript.
npm install
npm run dev
npm install react-router-dom
  • Abre la URL de localhost que muestra la consola.
  • Confirma que la aplicación corre.

¿Cómo instalar y verificar react-router-dom en package.json?

  • Abre package.json y verifica que react-router-dom esté en dependencies.
  • Si quieres fijar versión, quita el “gorrito” ^ delante de la versión.
  • Con esto, reinstalará siempre la misma versión al volver a instalar el proyecto.

¿Cómo configurar rutas básicas con BrowserRouter, Routes, Route y Link?

Primero, limpia App.tsx (remueve estilos y contenido por defecto). Luego, configura el enrutador en main con BrowserRouter y define rutas y navegación con Routes, Route y Link. Usa componentes simples: Home y About.

¿Cómo envolver la app con browserrouter?

main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)
  • Se usa React.StrictMode para buenas prácticas de desarrollo.
  • BrowserRouter envuelve la app y habilita el enrutamiento.

¿Cómo crear rutas home y about con link?

App.tsx (base limpia):

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

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

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

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

function About() {
  return <h2>About</h2>
}
  • Link maneja la navegación sin recargar la página.
  • Routes y Route definen qué componente se debe renderizar según el path.
  • El element indica el componente que se renderiza en cada ruta.

Comparte en comentarios cómo va tu app de inicio con React Router DOM y enséñala con estilos mejorados.