Server-only và client-only packages trong Next.js là gì?

server-only và client-only là hai package nhỏ của Next.js dùng để đánh dấu rõ ràng một module chỉ được chạy ở một môi trường, giúp trình biên dịch báo lỗi ngay khi bạn import nhầm. server-only chặn việc import module vào client bundle; client-only chặn việc import module trên server.

Cơ chế hoạt động: khi bạn thêm import 'server-only' ở đầu file, package này dùng conditional exports trong package.json (điều kiện react-server): với Server Component nó resolve tới module rỗng, còn lại (client graph) nó resolve tới module chỉ chứa throw new Error(...) vô điều kiện nên bundler báo lỗi ngay khi phát hiện import sai. client-only làm ngược lại (rỗng ở client, throw ở server), không dựa trên typeof window.

Ví dụ:

// lib/db.ts
import 'server-only';

export const db = createDb(process.env.DATABASE_URL);

// components/Chart.tsx
import 'client-only';

export function Chart() {
  // dùng window, localStorage, v.v.
}

Edge case: server-only không bảo vệ dữ liệu nhạy cảm nếu bạn vẫn import trực tiếp biến môi trường vào component client. Nó chỉ chặn việc import module, không chặn việc lộ giá trị qua props hoặc qua API. Ngoài ra, nếu bạn dùng dynamic import hoặc điều kiện runtime, lỗi có thể trở thành runtime error thay vì build error.

Lưu ý: Đây là công cụ hỗ trợ, không thay thế cho việc kiểm soát biến môi trường và dữ liệu nhạy cảm. Luôn đặt server-only ở file chứa database connection, secret key, hoặc logic server cần bảo vệ.