13:I[9844,["2972","static/chunks/2972-5a7e3f0e280f8004.js","5878","static/chunks/5878-f675d7a8f5ca35db.js","2641","static/chunks/app/(main)/category/%5Bslug%5D/page-eb84a4b8186a0c11.js"],"default"] 14:T570,

Next.js Server Components vs Client Components

Understand the difference between Server and Client Components in Next.js App Router.

Server Components (Default)

Server Components render on the server and are sent to the client as HTML.

// app/components/ServerComponent.tsx
export default function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}

Benefits

Reduced JavaScript bundle size
Direct database access
Better security (API keys stay on server)
Faster initial page load

Client Components

Client Components use 'use client' directive and run in the browser.

'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

When to Use

Interactive components (onClick, onChange)
Browser APIs (localStorage, window)
State management (useState, useEffect)
Event listeners

Best Practices

Use Server Components by default
Add 'use client' only when needed
Keep Client Components small
Pass data from Server to Client Components

15:T4b6,

Next.js App Router vs Pages Router

Compare Next.js App Router and Pages Router to understand which to use for your project.

Pages Router (Traditional)

pages/
  index.tsx
  about.tsx
  blog/
    [slug].tsx

App Router (Modern)

app/
  page.tsx
  about/
    page.tsx
  blog/
    [slug]/
      page.tsx