Why is my Next.js page heavy despite using Server Components for data fetching?

Next.js pages remain heavy despite Server Components due to several common issues. Large Client Component dependencies increase JavaScript bundle size. Third-party libraries imported in Client Components add significant weight. Images without optimization contribute heavily. The RSC payload itself might contain excessive serialized data passed as props. Inline styles and large CSS-in-JS libraries increase page weight. Multiple font files loading synchronously. Unoptimized SVGs and icons. Server Components reduce JSON payload but not JavaScript bundle size from Client Components. Check Network tab for actual bottlenecks: HTML size, JavaScript bundles, images. Use next/image for automatic optimization. Code-split Client Components with dynamic imports. Remove unused dependencies and tree-shake imports. Enable experimental optimizePackageImports in next.config. Minimize data passed to Client Components. Use CSS instead of CSS-in-JS where possible. Profile with Lighthouse to identify specific issues. Validate JSON sizes with our JSON Formatter at jsonconsole.com/json-formatter. Server Components help but comprehensive optimization requires addressing JavaScript bundles, images, fonts, and CSS—not just data fetching.