Server Components ও Client Components

App Router-এ সব component ডিফল্ট Server Component। শুধু client-side interactivity (state, event handler, browser API) লাগলে Client Component বানান।

Server Component কখন?

• Data fetch — database/API থেকে, secret নিজের কাছে রাখতে
• Backend resources — database, API key
• Client-এ পাঠানো JavaScript কমানো
• SEO-এর জন্য rendering google-এ দেখা

Client Component কখন?

• State ও event handler (useState, onClick)
• Effects (useEffect, lifecycle)
• Browser-only API (localStorage, window)
• Custom hooks

Client Component তৈরি

ফাইলের শুরুতে `"use client"` directive যোগ করুন। এরপর ওই ফাইলের সব import/boundary client graph-এ চলে যায়।

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Server → Client Data Pass

Server Component-এ data fetch করে Client Component-কে props হিসেবে পাঠান। সব props অবশ্যই serializable হতে হবে।

import LikeButton from "../ui/like-button";

export default async function Page() {
  const data = await fetch("https://api.vercel.app/blog").then((r) => r.json());

  return <LikeButton likes={data.length} />;
}

"use client";

export default function LikeButton({ likes }: { likes: number }) {
  return <button onClick={() => console.log("liked")}>Like ({likes})</button>;
}

Interleaving (children pattern)

Server Component কে Client Component-এর children হিসেবে পাঠানো যায় — client provider-এর ভেতরে server-rendered UI। Theme providers-এ এই pattern ব্যবহার হয়।

import ThemeProvider from "./theme-provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}