One of the most effective ways to improve a [Next.js](/courses/nextjs) application's performance is to send **less [JavaScript](/courses/javascript) to the browser**. [JavaScript](/courses/javascript) is more expensive than ordinary [HTML](/courses/html) because the browser must: ```text Download it ↓ Parse it ↓ Compile it ↓ Execute it ↓ Use it for interactivity ``` Large client bundles can therefore hurt both loading and interaction performance. ### Server Components Help Reduce Client JavaScript [Next.js App Router](/courses/nextjs) components are [Server Components](/courses/nextjs) by default. Suppose this component only displays article content: ```tsx export default async function Article({ id }) { const article = await getArticle(id); return (

{article.title}

{article.content}

); } ``` It does not need browser state, effects, or event handlers. Keeping it on the server prevents unnecessary application code from becoming part of the client JavaScript bundle. ### Poor Boundary Imagine adding `'use client'` to the top-level page unnecessarily: ```tsx 'use client'; export default function Dashboard() { return ( <>

); } ``` Because the client boundary begins high in the component tree, more modules may become part of the client-side module graph. ### Better Boundary Keep most UI server-rendered: ```tsx export default function Dashboard() { return ( <>

); } ``` and make only the interactive component client-side: ```tsx 'use client'; export function LikeButton() { return ; } ``` Conceptually: ```text Server UI Server UI Server UI Client interactive island ``` instead of: ```text Huge client application tree ``` ### Move Non-Interactive Libraries to the Server Suppose syntax highlighting uses a large package. If highlighting can happen on the server: ```text Server → run highlighting library → send HTML ``` then the browser may not need the entire highlighting library. The same idea can apply to: - markdown parsing - data formatting - content transformation - some chart-data preparation ### Do Not Remove Client Components That Are Actually Needed Client Components are necessary for features such as: - event handlers - [useState](/reactjs/chapter-4-state-usestate-hook) - [useEffect](/reactjs/chapter-7-useeffect-hook) - browser APIs - interactive UI The optimization is not: ```text Never use Client Components ``` It is: ```text Use Client Components only where browser interactivity is actually required. ``` ### Interview-Ready Answer Reducing client-side JavaScript improves [Next.js](/courses/nextjs) performance because browsers must download, parse, compile, and execute JavaScript before using it. Keep non-interactive rendering and data transformations in [Server Components](/courses/nextjs) and place `'use client'` boundaries as low as practical so only genuinely interactive parts of the UI are shipped as client JavaScript.