web-performance

Fix slow Next.js rendering by adopting server-first rendering and selective hydration to minimize client JavaScript execution. Split large pages into server components and interactive leaf components with caching boundaries to reduce client-side work and improve page load times.

Optimize slow data fetches in Next.js server-rendered routes by restructuring data paths to reduce fetch overhead and applying strategic caching boundaries. This skill guides architectural choices that streamline data fetching to improve overall route performance.

Reduce large asset footprints by managing assets and fonts efficiently within your Next.js application architecture. This involves optimizing asset loading strategies and streamlining delivery to minimize the performance impact of heavy resources on your pages.

Yes, you can refactor existing Next.js pages by auditing them and proposing a server-first refactor plan. This involves splitting large pages into server components and interactive leaf components, adopting selective hydration, and establishing caching boundaries to reduce client-side work.

Next.js page performance suffers from heavy client-side JavaScript because it increases execution time and delays hydration. By adopting server rendering where possible and splitting components, you can minimize client-side work and mitigate these performance bottlenecks.