REACT AI PERFORMANCE CASE STUDY 2025-10-31

Arquitectura SPA con React 19 & IA Generativa

Análisis técnico de la implementación de Virtual Routing y ChatWidget con Gemini AI optimizado.

Arquitectura SPA con React 19 & IA Generativa

El Desafío

Desarrollar una Single Page Application (SPA) de portfolio profesional que integrara capacidades de inteligencia artificial generativa sin comprometer la performance inicial del sitio. Los requisitos técnicos incluían:

  • Tiempo de carga inicial < 2 segundos (First Contentful Paint)
  • Integración de Gemini AI para asistencia contextual
  • Navegación fluida sin recargas de página
  • Zero-config deployment en Vercel
  • Optimización automática de assets (código splitting)

Arquitectura de la Solución

Stack Técnico

El proyecto se construyó sobre React 19.0.0 utilizando Vite 7.2.7 como bundler, aprovechando las siguientes características:

{
  "react": "^19.0.0",
  "react-router-dom": "^6.20.0",
  "@google/generative-ai": "^0.24.1",
  "@vitejs/plugin-react-swc": "^4.2.2"
}

Decisiones de Arquitectura Clave

1. SWC sobre Babel Se migró de @vitejs/plugin-react (Babel) a @vitejs/plugin-react-swc para reducir el tiempo de compilación en ~40%. SWC, escrito en Rust, procesa JSX de forma nativa sin necesidad de macros o transformaciones complejas.

2. React 19 Concurrent Features Si bien React 19 introduce nuevas APIs de concurrencia, este proyecto utiliza principalmente:

  • Suspense para lazy loading de rutas pesadas
  • Automatic Batching para optimizar re-renders
  • useEffect con dependencias estrictas para evitar memory leaks

3. Virtual Routing Strategy En lugar de crear páginas separadas para cada sección (/about, /services, etc.), implementamos rutas virtuales que redirigen a la HomePage con scroll automático:

// Rutas Virtuales en App.jsx
<Route path="/about" element={<HomePage />} />
<Route path="/services" element={<HomePage />} />

// Lógica de Scroll Programático
useEffect(() => {
  const targetId = location.state?.scrollTo || currentPath;
  const element = document.getElementById(targetId);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
}, [location.pathname, location.state]);

Ventajas técnicas:

  • Reduce el bundle size (1 página vs N páginas)
  • Mejora el cache-hit ratio
  • Mantiene el estado global sin necesidad de Context API
  • Permite URLs compartibles para secciones específicas

Ingeniería de Componentes

ChatWidget con Gemini AI

La integración de IA generativa presentó dos desafíos críticos:

  1. Payload pesado: El SDK de Google Generative AI (~250KB)
  2. Latencia de red: Llamadas a la API de Gemini (500ms - 3s)

Solución: Client-Side Rate Limiting

En lugar de implementar un backend serverless, se optó por rate limiting en el cliente para controlar el consumo de API:

// Estado de control de peticiones
const [requestTimestamps, setRequestTimestamps] = useState([]);

const handleSend = async (e) => {
  const now = Date.now();
  const recentRequests = requestTimestamps.filter(
    (timestamp) => now - timestamp < 60000 // Últimos 60 segundos
  );

  if (recentRequests.length >= 4) {
    // Bloquear y mostrar mensaje de throttling
    return;
  }

  // Proceder con la petición
  setRequestTimestamps([...recentRequests, now]);
};

Ventajas:

  • Protege la cuota de API sin servidor intermedio
  • Reduce carga en Vercel Serverless Functions
  • Experiencia de usuario transparente con feedback visual

Optimización del Contexto Conversacional

Se implementó un sliding window de 4 mensajes para mantener contexto sin saturar el modelo:

const historyContext = newMessages
  .slice(-4) // Solo últimos 4 mensajes
  .map((m) => ({
    role: m.role === "user" ? "user" : "model",
    text: m.text,
  }));

Esto reduce el payload de la petición en ~70% comparado con enviar el historial completo.

Estrategia de Lazy Loading

Las rutas secundarias (/blog, /all-projects, /all-experience) utilizan React.lazy() con Suspense:

const BlogPage = lazy(() => import("./pages/BlogPage.jsx"));
const ProjectsPage = lazy(() => import("./pages/ProjectsPage.jsx"));

// Routing con fallback
<Route
  path="/blog"
  element={
    <Suspense fallback={<PageFallback />}>
      <BlogPage />
    </Suspense>
  }
/>;

Impacto medido:

  • Bundle inicial: 89KB (gzipped)
  • Lazy chunks: 15-30KB cada uno
  • LCP (Largest Contentful Paint): 1.2s en conexiones 4G

Virtual Routing (Deep Dive)

La navegación fluida se logró mediante una combinación de:

  1. React Router v6 para gestión de rutas
  2. Scroll programático con scrollIntoView()
  3. State navigation para mantener contexto

Ejemplo Técnico

Cuando un usuario navega a /services:

// 1. React Router captura la ruta
<Route path="/services" element={<HomePage />} />;

// 2. useEffect detecta el cambio
useEffect(() => {
  const currentPath = location.pathname.replace("/", "");

  if (homeSections.includes(currentPath)) {
    setTimeout(() => {
      document.getElementById(currentPath)?.scrollIntoView({ behavior: "smooth" });
    }, 100);
  }
}, [location.pathname]);

Resultado: Transiciones instantáneas sin Full Page Reloads, preservando el estado del ChatWidget y otros componentes montados.

Observabilidad y Monitoreo

Se integró Vercel Speed Insights para métricas RUM (Real User Monitoring):

import { SpeedInsights } from "@vercel/speed-insights/react";

// En el componente principal
<SpeedInsights />;

Métricas actuales en producción:

  • FCP (First Contentful Paint): 0.9s
  • LCP (Largest Contentful Paint): 1.2s
  • TTI (Time to Interactive): 1.8s
  • CLS (Cumulative Layout Shift): 0.02

Conclusión

La implementación de React 19 con SWC, combinada con estrategias avanzadas de code-splitting y rate limiting client-side, permitió construir una SPA de alta performance con capacidades de IA generativa. El enfoque de Virtual Routing demostró ser superior a páginas tradicionales, reduciendo el tiempo de navegación en ~80% y manteniendo un bundle inicial < 90KB.

Los principales logros técnicos:

  • Performance: LCP bajo 1.5s en percentil 75
  • Escalabilidad: Rate limiting protege contra sobrecostos de API
  • Mantenibilidad: Single Source of Truth en siteData.js
  • SEO: react-helmet-async para meta tags dinámicos

La arquitectura permite iterar rápidamente sin sacrificar experiencia de usuario, posicionando el proyecto como referencia para SPAs modernas con IA integrada.

Stack Completo: React 19 • Vite 7 • SWC • React Router v6 • Gemini AI • Tailwind CSS • Vercel

Repositorio Showcase: github.com/LeoMartinK/portfolio-architecture-showcase