Mẹo TypeScript Cho React Server Components

Server components thay đổi ý nghĩa của các kiểu dữ liệu. Prop vốn luôn phải serialize được giờ bắt buộc phải vậy, và params đến dưới dạng promise. Đây là những thói quen giữ cho codebase trộn server/client luôn ổn định.

Định kiểu ở ranh giới, không phải bên trong

Đánh dấu client component tường minh bằng "use client" và định kiểu prop của chúng là dữ liệu thuần. Mọi thứ vượt qua ranh giới đó phải sống sót qua serialization, nên hãy ưu tiên chuỗi, số và object thường thay vì instance của class.

Async params là một promise

Trong Next.js 16, page props đến bất đồng bộ. Định kiểu đúng loại bỏ cả một lớp sự cố lúc chạy:

interface PageProps {
  params: Promise<{ locale: string; slug: string }>;
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;
}

Để message đi qua props

Bộ nạp bản dịch chỉ chạy phía server. Truyền object message đã resolve vào client component giúp bản dịch không lọt vào bundle phía client và kiểu dữ liệu luôn trung thực.

Danh sách kiểm

• Prop vượt tuyến server/client là dữ liệu thuần
• Params và searchParams được awaited và định kiểu là promise
• View model đến từ repository, không bao giờ là dòng dữ liệu thô