😲Sử dụng 'use client', 'use server' khi nào? Giải thích dễ hiểu bằng ví dụ cho tôi?

🚀 use client và use server trong Next.js 14+ (App Router)

Trong Next.js 14 (và App Router), các file trong thư mục app/ mặc định là server component. Để tạo client component, bạn cần thêm 'use client' ở đầu file.

1️⃣ use client – Khi cần thao tác trên trình duyệt 🖥️

Dùng khi component có: ✅ Sự kiện người dùng (onClick, onChange, useState, useEffect) ✅ Truy cập localStorage, sessionStorage ✅ Thư viện chỉ chạy trên client (ví dụ: Chart.js, Three.js)

🔹 Ví dụ:

Bấm nút để tăng số đếm (useState)

'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Số đếm: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
    </div>
  );
}

👉 Không thể dùng useState trong server component, nên cần 'use client'.

2️⃣ use server – Khi cần gọi backend trên server 🖥️

Dùng khi function: ✅ Chỉ chạy trên server ✅ Truy vấn database, gọi API backend ✅ Xử lý dữ liệu quan trọng (không để lộ trên client)

🔹 Ví dụ:

Tạo function gọi database trên server

'use server';
import { db } from '@/lib/db'; // Giả sử bạn có database
export async function getPosts() {
  const posts = await db.post.findMany();
  return posts;
}

👉 getPosts() chạy trên server, không bị lộ database query ra client.

3️⃣ Kết hợp use client & use server

Client gọi server để lấy dữ liệu

🔹 Ví dụ:

Client Component gọi hàm Server

'use client';
import { useEffect, useState } from 'react';
import { getPosts } from './actions';
export default function Posts() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    getPosts().then(setPosts);
  }, []);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

👉 getPosts() chạy trên server, client không thấy database query. 👉 useEffect chạy trên client để gọi dữ liệu.

🏆 Tóm tắt nhanh

Tính năng	use client 🖥️	use server 🖥️
useState, useEffect	✅	❌
Xử lý form (trừ Server Actions)	✅	❌
Gọi API Backend/DB	❌	✅
localStorage, sessionStorage	✅	❌

📌 Nguyên tắc chung:

• Dùng use server cho các thao tác nặng, bảo mật (DB, API).

• Dùng use client cho UI, sự kiện người dùng.

• Hạn chế dùng use client nếu không cần thiết để tối ưu performance.

Bạn cần ví dụ cụ thể hơn không? 🚀

Dưới đây là một ví dụ cụ thể về cách sử dụng use client và use server trong Next.js.

🎯 Yêu cầu:

• Hiển thị danh sách bài viết từ MongoDB.

• Người dùng có thể thêm bài viết mới từ form nhập liệu.

📌 1. Tạo Server Action (use server) để lấy & thêm bài viết

👉 Lưu ý: Code này chỉ chạy trên server, giúp bảo vệ dữ liệu.

📂 app/actions.ts

'use server';
import { db } from '@/lib/db'; // Giả sử bạn có kết nối MongoDB
// Lấy danh sách bài viết từ database
export async function getPosts() {
  return await db.post.findMany();
}
// Thêm bài viết mới
export async function addPost(title: string) {
  await db.post.create({ data: { title } });
}

• getPosts(): Truy vấn danh sách bài viết từ MongoDB.

• addPost(): Thêm bài viết mới vào database.

⚡ Những function này chỉ chạy trên server, client không thể thấy logic database.

📌 2. Tạo Component hiển thị danh sách bài viết (use client)

👉 Vì component này có tương tác người dùng (useState, useEffect) nên phải thêm 'use client'.

📂 app/components/PostList.tsx

'use client';
import { useEffect, useState } from 'react';
import { getPosts } from '../actions';

export default function PostList() {
  const [posts, setPosts] = useState<{ id: string; title: string }[]>([]);

  // Gọi API lấy danh sách bài viết khi component được mount
  useEffect(() => {
    getPosts().then(setPosts);
  }, []);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

👉 Vì useEffect chỉ chạy trên client, nên file này cần 'use client'. 👉 Client sẽ fetch dữ liệu từ server và render danh sách bài viết.

📌 3. Tạo Form thêm bài viết (use client)

📂 app/components/AddPostForm.tsx

'use client';
import { useState } from 'react';
import { addPost } from '../actions';
export default function AddPostForm() {
  const [title, setTitle] = useState('');
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await addPost(title); // Gửi dữ liệu lên server
    setTitle(''); // Reset ô nhập liệu
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Nhập tiêu đề bài viết"
      />
      <button type="submit">Thêm bài viết</button>
    </form>
  );
}

👉 Vì có useState và xử lý sự kiện (onChange, onSubmit), file này cần 'use client'. 👉 Dữ liệu được gửi lên server thông qua addPost(), giúp bảo vệ logic backend.

📌 4. Gộp lại vào Trang chính (page.tsx)

📂 app/page.tsx

import PostList from './components/PostList';
import AddPostForm from './components/AddPostForm';
export default function Home() {
  return (
    <div>
      <h1>Danh sách bài viết</h1>
      <AddPostForm />
      <PostList />
    </div>
  );
}

👉 Đây là một server component vì không có 'use client'. 👉 Chỉ render hai component con, không cần tương tác trên client.

🏆 Tóm tắt lại cách sử dụng use client và use server:

✅ use client khi:

• Cần quản lý state (useState, useEffect).

• Có sự kiện người dùng (onClick, onSubmit).

• Truy cập localStorage, sessionStorage.

✅ use server khi:

• Cần truy vấn database.

• Thực hiện xử lý logic trên backend.

• Muốn ẩn dữ liệu nhạy cảm khỏi client.