Giới thiệu

Next.js là một framework mạnh mẽ cho React, giúp xây dựng các ứng dụng web nhanh chóng và hiệu quả. Trong Next.js, các thành phần mặc định được coi là Server Components, tuy nhiên, khi cần tính năng tương tác trên trình duyệt, bạn cần sử dụng chỉ thị "use client". Bài viết này sẽ giải thích chi tiết về "use client", cách sử dụng và những lưu ý cần biết khi làm việc với Next.js.

Mục lục

• 1. use client là gì?
• 2. Tại sao cần sử dụng use client?
• 3. Khi nào nên sử dụng use client?
• 4. Cách hoạt động của use client
• 5. Kết hợp Server và Client Components
• 6. Mô hình tư duy
• 7. Thực tiễn tốt nhất
• 8. Những cạm bẫy thường gặp
• 9. Mẹo hiệu suất
• 10. Giải quyết sự cố

1. use client là gì?

Chỉ thị "use client" được đặt ở đầu tệp mã, chỉ định rằng thành phần này sẽ được render trên trình duyệt (client). Nếu không có chỉ thị này, thành phần sẽ vẫn là một Server Component.

// Button.tsx
"use client";

export default function Button() {
  return <button onClick={() => alert("Clicked!")}>Click me</button>
}

Nếu không có "use client", các trình xử lý sự kiện và useState sẽ không hoạt động vì chúng chỉ hoạt động trên trình duyệt.

2. Tại sao cần sử dụng use client?

Next.js mặc định sử dụng Server Components để tối ưu tốc độ và giảm kích thước gói. "use client" là một escape hatch cho những trường hợp bạn cần các tính năng chỉ có trên client.

3. Khi nào nên sử dụng use client?

Bạn cần sử dụng "use client" trong các trường hợp sau:

• Sử dụng các React hooks: useState, useEffect, useRef
• Sử dụng trình xử lý sự kiện: onClick, onChange, …
• Sử dụng Browser APIs: localStorage, window, document
• Thư viện chỉ có trên client: Chart.js, React-Quill, v.v.

4. Cách hoạt động của use client

Next.js sẽ quét tìm "use client" trong quá trình xây dựng ứng dụng.

• Tệp đó và các import của nó sẽ được đóng gói thành một gói JS gửi đến trình duyệt.
• Các Server Components sẽ được chuyển đổi thành HTML và các props được tuần tự hóa.

5. Kết hợp Server và Client Components

• Server Components có thể import Client Components.
• Client Components không thể import Server Components.

// page.tsx (Server Component)
import Button from "./Button";

export default function Page() {
  return (
    <div>
      <h1>Hello</h1>
      <Button />  // Client-side, interactive
    </div>
  );
}

6. Mô hình tư duy

• Mặc định = Server Component (nhanh, không có JS client).
• Chỉ thêm "use client" khi bạn cần trạng thái, sự kiện hoặc Browser APIs.
• Sử dụng một cách tiết kiệm → giữ phần lớn cây trên server.

7. Thực tiễn tốt nhất

• Chỉ sử dụng "use client" khi thực sự cần thiết.
• Sắp xếp mã của bạn để tối ưu hiệu suất.
• Kiểm tra thường xuyên để đảm bảo các Client Components hoạt động tốt trên trình duyệt.

8. Những cạm bẫy thường gặp

• Quá nhiều Client Components có thể làm giảm hiệu suất ứng dụng.
• Không phân tách rõ ràng giữa Server và Client Components có thể gây nhầm lẫn và khó khăn trong bảo trì.

9. Mẹo hiệu suất

• Sử dụng các công cụ phân tích để theo dõi hiệu suất ứng dụng của bạn.
• Giảm thiểu số lượng Client Components để tối ưu tốc độ tải trang.

10. Giải quyết sự cố

• Nếu sự kiện không hoạt động, hãy kiểm tra xem bạn đã thêm "use client" hay chưa.
• Kiểm tra console trong trình duyệt để tìm lỗi liên quan đến Client Components.

Kết luận

Chỉ thị "use client" là một công cụ mạnh mẽ trong Next.js giúp bạn khai thác tối đa khả năng tương tác của React trong các ứng dụng web. Hãy sử dụng nó một cách hợp lý để tối ưu hóa hiệu suất và trải nghiệm người dùng. Để tìm hiểu thêm về Next.js, hãy tham khảo tài liệu chính thức của Next.js.