Tu app en Next.js App Router envía demasiado JavaScript al cliente y el bundle inicial es enorme. Al revisar, casi todo el árbol es "use client". ¿Cómo lo corriges?
Contexto
El layout raíz tiene "use client" al inicio "por comodidad", así que todo el subárbol se convirtió en Client Components. Hay librerías pesadas cargadas en el cliente que solo se usan para renderizar contenido estático.
Respuesta modelo
El problema es empujar la frontera cliente demasiado arriba. 1) Quitar "use client" del layout y de los contenedores; en el App Router todo es Server Component por defecto y no envía JS. 2) Marcar como cliente solo las hojas realmente interactivas (un botón con estado, un input), empujando "use client" lo más abajo posible del árbol. 3) Un Server Component puede renderizar Client Components y pasarles Server Components como children/prop, así el contenido estático se mantiene en servidor. 4) Mover las librerías pesadas que solo formatean/renderizan datos a Server Components para que no lleguen al bundle. 5) Usar @defer/dynamic import para lo que sí es cliente pero no crítico. Medir el bundle antes/después con el analizador. El principio: cliente solo donde hay interactividad real.
Claves
- Todo es Server Component por defecto; no envía JS.
- Empujar "use client" a las hojas interactivas, no al layout.
- Pasar Server Components como children a un Client Component.