Next.js App Router revolutionized React application development by introducing Server Components by default. Understanding how to leverage streaming, dynamic imports, and static HTML exports ensures 100/100 Lighthouse performance.
1. Server Components vs Client Components
Keep client-side JavaScript minimal. Render heavy UI, database queries, and static layouts on the server as React Server Components (RSC). Use `'use client'` only at leaf nodes requiring interactivity or browser APIs.
2. Static Export for Shared Hosting
Configuring `output: 'export'` generates pre-rendered static HTML/CSS/JS files that can be deployed to standard web hosting (like Hostinger) with zero Node.js server overhead, offering instant global load speeds.
Key Takeaways
- Default to Server Components to eliminate unnecessary client-side JavaScript bundles.
- Push `'use client'` directives down to interactive leaf components.
- Use static export (`output: 'export'`) for ultra-fast, serverless hosting deployments.