Hai loại thành phần

Mọi component bạn đã viết đến giờ trong phần này đều chạy ở một nơi có thể bạn chưa để ý: trên máy chủ. Đây không phải là chế độ đặc biệt mà bạn đã bật. Đó là chế độ mặc định và là ý tưởng quan trọng nhất trong Next.js.

Có chính xác hai loại thành phần (component), và mỗi loại mang lại cho bạn điều mà loại kia không thể.

Thành phần máy chủ: mặc định

• Chúng chạy một lần, trên máy chủ, trước khi trang được gửi đi
• Chúng có thể là async, nên có thể await dữ liệu ngay bên trong thành phần
• Chúng không gửi JavaScript đến trình duyệt: người dùng tải kết quả xuống, không phải code

Vấn đề là khi trang đến trình duyệt, thành phần máy chủ đã hoàn tất. Nó chỉ là ảnh chụp nhanh. Nó không thể ghi nhớ bất cứ điều gì, phản hồi khi bạn nhấp chuột hay thay đổi.

Thành phần phía máy khách: chủ động bật

Khi cần trang phản hồi, bạn đánh dấu một tệp để chạy trong trình duyệt bằng một dòng ngay đầu tệp:

'use client';

Điều đó đánh dấu tệp này là một thành phần phía máy khách, và chỉ các thành phần phía máy khách mới có thể dùng:

• Hook: useState, useEffect và các hook khác
• Bộ xử lý sự kiện: onClick, onChange, …
• API của trình duyệt: window, localStorage

Hãy để ý sự đánh đổi. Thành phần phía máy chủ nhanh và yên lặng nhưng bị đóng băng. Thành phần phía máy khách sống động nhưng code của nó phải được tải xuống và chạy trong trình duyệt.

Vậy từ giờ, với mỗi thành phần, bạn sẽ không hỏi "mình thích thành phần nào?" mà hỏi "thành phần cụ thể này có cần phản hồi người dùng không?" Nếu câu trả lời là không, mà thường là vậy, hãy để thành phần đó trên máy chủ.