inlineCss
Uso
Soporte experimental para incrustar CSS en el <head>. Cuando esta opción está activada, todos los lugares donde normalmente se genera una etiqueta <link> tendrán en su lugar una etiqueta <style> generada.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
inlineCss: true,
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
inlineCss: true,
},
}
module.exports = nextConfigCompensaciones
Cuándo usar CSS en línea
Incrustar CSS puede ser beneficioso en varios escenarios:
-
Visitantes por primera vez: Dado que los archivos CSS son recursos que bloquean el renderizado, incrustarlos elimina el retraso inicial de descarga que experimentan los visitantes nuevos, mejorando el rendimiento de carga de la página.
-
Métricas de rendimiento: Al eliminar las solicitudes de red adicionales para archivos CSS, la incrustación puede mejorar significativamente métricas clave como First Contentful Paint (FCP) y Largest Contentful Paint (LCP).
-
Conexiones lentas: Para usuarios en redes más lentas donde cada solicitud añade una latencia considerable, incrustar CSS puede proporcionar una mejora notable en el rendimiento al reducir los viajes de ida y vuelta en la red.
-
Paquetes de CSS atómico (ej. Tailwind): Con frameworks de utilidad primero como Tailwind CSS, el tamaño de los estilos requeridos para una página es a menudo O(1) en relación con la complejidad del diseño. Esto hace que la incrustación sea una opción convincente porque todo el conjunto de estilos para la página actual es liviano y no crece con el tamaño de la página. Incrustar estilos de Tailwind asegura una carga útil mínima y elimina la necesidad de solicitudes de red adicionales, lo que puede mejorar aún más el rendimiento.
Cuándo no usar CSS en línea
Aunque incrustar CSS ofrece beneficios significativos para el rendimiento, hay escenarios donde puede no ser la mejor opción:
-
Paquetes CSS grandes: Si tu paquete CSS es demasiado grande, incrustarlo puede aumentar significativamente el tamaño del HTML, resultando en un Time to First Byte (TTFB) más lento y potencialmente peor rendimiento para usuarios con conexiones lentas.
-
CSS dinámico o específico por página: Para aplicaciones con estilos altamente dinámicos o páginas que usan conjuntos diferentes de CSS, la incrustación puede llevar a redundancia y aumento innecesario, ya que el CSS completo para todas las páginas puede necesitar ser incrustado repetidamente.
-
Caché del navegador: En casos donde los visitantes regresan frecuentemente a tu sitio, los archivos CSS externos permiten que los navegadores almacenen en caché los estilos eficientemente, reduciendo la transferencia de datos para visitas posteriores. Incrustar CSS elimina este beneficio.
Evalúa cuidadosamente estas compensaciones y considera combinar la incrustación con otras estrategias, como la extracción de CSS crítico o un enfoque híbrido, para obtener los mejores resultados adaptados a las necesidades de tu sitio.
Es bueno saber:
Esta característica es actualmente experimental y tiene algunas limitaciones conocidas:
- La incrustación de CSS se aplica globalmente y no puede configurarse por página
- Los estilos se duplican durante la carga inicial de la página - una vez dentro de las etiquetas
<style>para SSR y una vez en la carga útil RSC- Al navegar a páginas renderizadas estáticamente, los estilos usarán etiquetas
<link>en lugar de CSS incrustado para evitar duplicación- Esta característica no está disponible en modo desarrollo y solo funciona en builds de producción