2. Next.js Server Components – ‘use client’ कब और कहां Use करें

// app/products/page.js
// ✅ यह Server Component है (default)

async function getProducts() {
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <div>
      <h1>Our Products</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

// app/components/Counter.js
'use client';  // ✅ यह Client Component है

import { useState } from 'react';

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

// Server Component – database se direct fetch
export default async function UserProfile({ userId }) {
  const user = await db.user.findUnique({ where: { id: userId } });
  return <div>{user.name}</div>;
}

// Server Component – no interactivity needed
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is a static page with no interactive elements.</p>
    </div>
  );
}

// Server Component – full HTML for search engines
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// Server Component – heavy library stays on server
import { heavyMarkdownParser } from 'heavy-library';

export default async function MarkdownPage() {
  const html = await heavyMarkdownParser(await getMarkdown());
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
  // heavyMarkdownParser NOT sent to client!
}

// Server Component – env vars accessible
export default function ConfigPage() {
  const apiUrl = process.env.API_URL;
  return <div>API URL: {apiUrl}</div>;
}

क्या component को interactivity चाहिए? (useState, onClick, etc.)
    │
    ├── NO ──► क्या component async data fetch करता है?
    │              │
    │              ├── YES ──► Server Component
    │              │
    │              └── NO ───► क्या component SEO important है?
    │                              │
    │                              ├── YES ──► Server Component
    │                              │
    │                              └── NO ───► Server Component (default)
    │
    └── YES ──► Client Component (use 'use client')

'use client';
// Client Component – needs state
export function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <input 
      value={query} 
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

'use client';
// Client Component – needs useEffect
export function AnalyticsTracker() {
  useEffect(() => {
    // Track page view on client
    analytics.trackPageView();
  }, []);
  return null;
}

'use client';
// Client Component – needs onClick
export function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  
  const handleLike = async () => {
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    setLiked(true);
  };
  
  return (
    <button onClick={handleLike}>
      {liked ? '❤️ Liked' : '🤍 Like'}
    </button>
  );
}

'use client';
//  Client Component – needs window.localStorage
export function ThemeToggle() {
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem('theme') || 'light';
  });
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return <button onClick={toggleTheme}>Toggle {theme}</button>;
}

'use client';
// Client Component – needs document for React Quill
import dynamic from 'next/dynamic';

const RichTextEditor = dynamic(
  () => import('react-quill'),
  { ssr: false }
);

export default function Editor() {
  const [value, setValue] = useState('');
  return <RichTextEditor value={value} onChange={setValue} />;
}

'use client';
// Client Component – Context needs client
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);
  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

// app/products/page.js (Server Component)
import ClientButton from './ClientButton';  // 'use client' component

async function getProducts() {
  const products = await db.product.findMany();
  return products;
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <div>
      <h1>Products</h1>
      <div className="products-grid">
        {products.map(product => (
          <div key={product.id}>
            <h3>{product.name}</h3>
            <ClientButton productId={product.id} />
          </div>
        ))}
      </div>
    </div>
  );
}

// app/products/ClientButton.js
'use client';

export default function ClientButton({ productId }) {
  const [added, setAdded] = useState(false);
  
  return (
    <button onClick={() => setAdded(true)}>
      {added ? 'Added!' : 'Add to Cart'}
    </button>
  );
}

// ❌ You cannot import Server Component into Client Component
'use client';
import ServerComponent from './ServerComponent'; // Error!

export default function ClientPage() {
  return (
    <div>
      <ServerComponent /> {/* Won't work properly */}
    </div>
  );
}

// app/layout.js (Server Component)
import ClientWrapper from './ClientWrapper';
import ServerFooter from './ServerFooter';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <ClientWrapper>
          {children}  {/* children can be Server Components */}
        </ClientWrapper>
        <ServerFooter />
      </body>
    </html>
  );
}

// app/ClientWrapper.js
'use client';

export default function ClientWrapper({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <div data-theme={theme}>
      {children}  {/* Server Components work as children */}
    </div>
  );
}

// app/page.js (Server Component)
import ClientUserCard from './ClientUserCard';

async function getUser() {
  const user = await db.user.findUnique({ where: { id: 1 } });
  return user;
}

export default async function HomePage() {
  const user = await getUser(); // Fetched on server
  
  return (
    <div>
      <h1>Welcome</h1>
      {/* ✅ Pass server-fetched data as props to client component */}
      <ClientUserCard user={user} />
    </div>
  );
}

// app/ClientUserCard.js
'use client';

export default function ClientUserCard({ user }) {
  // user data comes from server component (already serialized)
  const [isFollowing, setIsFollowing] = useState(false);
  
  return (
    <div>
      <h3>{user.name}</h3>
      <button onClick={() => setIsFollowing(!isFollowing)}>
        {isFollowing ? 'Following' : 'Follow'}
      </button>
    </div>
  );
}

// app/components/ClientSection.js
'use client';  // ← CLIENT BOUNDARY START

export function ClientComponent1() {
  // ✅ Client Component (automatically)
  return <div>Client 1</div>;
}

export function ClientComponent2() {
  // ✅ Client Component (automatically)
  return <div>Client 2</div>;
}

function HelperComponent() {
  // ✅ Client Component (automatically, even without 'use client')
  return <div>Helper</div>;
}

// ❌ Avoid – too broad boundary
'use client';  // Whole page becomes client component

export default function Page() {
  // Everything here is client component
}

// ✅ Better – narrow boundary
export default function Page() {
  return (
    <div>
      <ServerSection />      // Server component
      <ClientButton />       // Only this is client component
      <ServerFooter />       // Server component
    </div>
  );
}

// app/contact/page.js (Server Component)
import { submitContactForm } from './actions';
import SubmitButton from './SubmitButton';

export default function ContactPage() {
  return (
    <form action={submitContactForm}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <SubmitButton />
    </form>
  );
}

// app/contact/SubmitButton.js
'use client';
import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Sending...' : 'Send Message'}
    </button>
  );
}

// app/providers/ThemeProvider.js
'use client';
import { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  useEffect(() => {
    const saved = localStorage.getItem('theme');
    if (saved) setTheme(saved);
  }, []);
  
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// app/layout.js
import { ThemeProvider } from './providers/ThemeProvider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// app/page.js
import dynamic from 'next/dynamic';

// Client Component with no SSR (for heavy libraries)
const HeavyChart = dynamic(
  () => import('./HeavyChart'),
  { 
    ssr: false,
    loading: () => <div>Loading chart...</div>
  }
);

export default function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      <HeavyChart />
    </div>
  );
}

// ❌ Bad – Whole page client component
'use client';
export default function ProductPage() {
  // Everything here is client component
  // Bundle size: 150 KB
  // Includes: product data fetching, image gallery, reviews, add to cart
}

// ✅ Good – Hybrid approach
// app/products/[id]/page.js (Server Component)
export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <ProductImages images={product.images} />  // Client (lightweight)
      <ProductInfo product={product} />          // Server
      <ProductReviews productId={product.id} />  // Server (data)
      <AddToCartButton productId={product.id} /> // Client (lightweight)
    </div>
  );
}

// ❌ Unnecessary 'use client'
'use client';
export default function StaticText() {
  return <div>This has no interactivity!</div>;
}

// ✅ Remove 'use client' – let it be server component
export default function StaticText() {
  return <div>This has no interactivity!</div>;
}

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

// ✅ Add 'use client'
'use client';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ❌ Error
'use client';
import ServerComponent from './ServerComponent'; // Won't work properly

export default function Page() {
  return <ServerComponent />;
}

// ✅ Solution: Pass as children
'use client';
export default function ClientWrapper({ children }) {
  return <div>{children}</div>;
}

// ❌ Error
'use client';
export default async function Page() {  // Error: async not allowed in client component
  const data = await fetchData();
  return <div>{data}</div>;
}

// ✅ Fetch in useEffect or use Server Component
export default async function Page() {  // Remove 'use client'
  const data = await fetchData();
  return <div>{data}</div>;
}

# Create new Next.js app (App Router default)
npx create-next-app@latest my-app

# Run dev server
npm run dev

app/
├── layout.js        # Can be server component (no 'use client')
├── page.js          # Can be server component
├── components/
│   ├── ServerComponent.js      # No 'use client'
│   └── ClientComponent.js      # 'use client' at top