⚡ Vercel & React Best Practices

Estándares para construir aplicaciones React de alto rendimiento, optimizadas para el Edge Network de Vercel.

1. Core React Principles

• •Componentes Funcionales: Usa SIEMPRE componentes funcionales con Hooks. Las clases están deprecadas.
• •Atomic Design: Estructura tus componentes en atoms (botones), molecules (search bar), organisms (cards grid) y templates.
• •Props Limpios: Evita el "Prop Drilling". Usa Composition (pasar componentes como children) o Context para datos globales.
• •Strict Mode: Mantén siempre <React.StrictMode> activo para detectar efectos secundarios indeseados.

2. Rendimiento (Vite & Vercel)

• •Code Splitting: Usa React.lazy() y Suspense para cargar rutas pesadas bajo demanda.
  jsx

  const BibliotecaModule = lazy(() => import('./modules/BibliotecaModule'));
  

• •Image Optimization: En Vercel, prefiere formatos modernos (.webp, .avif). Usa lazy loading para imágenes "below the fold".
• •Tree Shaking: Importa solo lo que necesitas.
  • •❌ import { * } from 'lucide-react'
  • •✅ import { Bell, User } from 'lucide-react'

3. Manejo de Estado (State Management)

• •Server State: Para datos de Supabase, usa bibliotecas de fetching (ej. React Query) o useEffect con caché manual. No uses Redux para esto.
• •URL State: Guarda filtros y paginación en la URL (?page=2&search=libro) para que las vistas sean compartibles.
• •Zustand: Si necesitas estado global complejo, prefiere zustand sobre Redux por su ligereza.

4. Vercel Deployment Optimization

• •Environment Variables: Usa import.meta.env.VITE_Variable y configúralas en el dashboard de Vercel. NUNCA hardcodees secretos.
• •Output Caching: Configura headers de caché en vercel.json para assets estáticos (Cache-Control: public, max-age=31536000, immutable).
• •Edge Functions: Mueve lógica pesada de backend (generación de PDFs, emails) a Supabase Functions o Vercel Serverless Functions.

5. Accesibilidad (a11y)

• •Semantic HTML: Usa <header>, <main>, <article>, <button> (no <div> con onClick).
• •ARIA: Usa etiquetas aria-label en botones que solo contienen iconos.
• •Focus Management: Asegúrate de que los modales (como el Lector de Libros) atrapen el foco y lo devuelvan al cerrarse.

Aplica estas reglas en cada Pull Request para asegurar un "Score 100" en Lighthouse.