Next.js is fast when you respect server/client boundaries and ship less JavaScript. Performance work starts with measurement—Lighthouse, Web Vitals, React DevTools—not premature micro-optimizations.
Next.js-specific wins
- Default to Server Components—client bundles shrink
- Stream slow segments with Suspense instead of blocking the page
- Cache and revalidate intentionally—avoid
no-storeeverywhere - Dynamic import heavy client widgets
Core Web Vitals
- LCP — optimize hero images and server TTFB
- INP — keep client JS lean; split long tasks
- CLS — reserve space for fonts and media
Important interview questions and answers
- Q: How do RSC help performance?
A: Server-only code never ships to the browser—smaller bundles and less hydration work. - Q: When does caching hurt?
A: When users must see fresh personalized or auth-gated data—use dynamic rendering or short revalidate windows.
Self-check
- What would you measure first on a slow dashboard?
- Name one way to reduce client JavaScript in Next.js.