Capítulo 221 de 456

inlineCss

Core Idea

Feature experimental que inlina o CSS gerado no <head> (usa <style> em vez de <link>) para eliminar a request waterfall de CSS e acelerar o primeiro paint, à custa de perder cache de stylesheet entre visitas.

Key Concepts

  • experimental.inlineCss: flag booleana que ativa a inlinagem global de CSS; não é configurável por página.
  • Trade-off central: ganha em first-load (elimina download bloqueante de CSS) mas perde cache entre navegações/visitas repetidas.

Code Examples

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig
  • O que demonstra: como habilitar inlineCss experimental.

Anti-patterns

  • Usar com bundles CSS grandes (Bootstrap, Material UI): aumenta TTFB porque CSS inteiro chega em toda resposta HTML; funciona melhor com CSS atômico (Tailwind).
  • Confiar nisso pra sites com muitas visitas recorrentes: sem cache de stylesheet, cada carregamento repete o download do CSS.

Key Takeaways

  1. Ideal para CSS atômico (Tailwind) e visitantes novos, otimiza FCP/LCP eliminando a waterfall.
  2. Ruim para bundles CSS grandes e visitantes recorrentes, que perderiam o cache de <link>.
  3. Não funciona em modo dev, só em builds de produção; não configurável por página.
  4. Estilos são duplicados no carregamento inicial (uma vez em <style> pra SSR, outra no RSC payload).

Connects To

  • Web Vitals (FCP/LCP): motivação direta da feature.
AnteriorcacheHandlerPróximoinstrumentationClientInject