Comprender y solucionar FOUC en el enrutador de aplicaciones de Next.js (Guía 2025)

FOUC, o Destello de Contenido no Estilizado, es un glitch visual en aplicaciones de React donde el contenido no estilizado aparece brevemente durante la carga. Ocurre cuando el HTML se renderiza antes de que se aplique el CSS, a menudo debido a discrepancias entre el HTML renderizado por el servidor y la IU renderizada por el cliente en frameworks como Next.js. Los síntomas incluyen el despliegue de HTML crudo antes de que se activen los estilos y las variables CSS no se aplican de inmediato. Las causas comunes incluyen la tematización dinámica, el uso de `Date.now()` o `Math.random()` en componentes compartidos, y la importación de bibliotecas CSS demasiado tarde. Para solucionar FOUC, siempre importe CSS global en `layout.tsx` para asegurarse de que los estilos se carguen temprano. Proporcionar estilos de tema de fallback en `globals.scss` evita que los elementos no estilizados parpadeen. Utilizar una guardia de hidratación retrasa la renderización hasta que el cliente tome el control, evitando discrepancias. Evite importaciones dinámicas de CSS, el uso de `Date.now()` o `Math.random()` directamente en la renderización, y la lectura de `localStorage` o `window` en componentes del servidor. Separar la lógica del servidor de la renderización específica del cliente elimina los flashes de estilo y las advertencias de hidratación.