Server Component và Client Component trong Next.js App Router khác nhau thế nào?

	Server Component	Client Component
Khai báo	mặc định	'use client' ở đầu file
Chạy ở	server (build hoặc request)	server (prerender HTML) rồi hydrate ở client
useState, useEffect, onClick	Không	Có
Truy cập DB, secret, fs	Có	Không
JS gửi xuống browser	Không	Có

// app/page.tsx (Server Component, có thể async)
import Counter from "./counter";

export default async function Page() {
  const posts = await db.post.findMany();
  return <Counter initial={posts.length} />;
}

// app/counter.tsx
"use client";
import { useState } from "react";
export default function Counter({ initial }: { initial: number }) {
  const [n, setN] = useState(initial);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}