1. 13:30 06/10/2026
React Server Components là một tính năng mới nổi bật trong hệ sinh thái React, cho phép bạn render nội dung trực tiếp trên máy chủ mà không gửi JavaScript không cần thiết đến client. Điều này giúp giảm kích thước bundle, cải thiện tốc độ tải trang và mang lại trải nghiệm người dùng mượt mà hơn, đặc biệt trên các kết nối chậm.
**Tại sao nên sử dụng Server Components?**
- **Giảm dữ liệu truyền tải:** Chỉ những phần tương tác mới được gửi dưới dạng client components, trong khi nội dung tĩnh có thể được render sẵn trên máy chủ.
- **Cải thiện SEO:** Nội dung được render sẵn giúp các công cụ tìm kiếm dễ dàng thu thập dữ liệu hơn.
- **Tối ưu hiệu suất:** Các thành phần được chia nhỏ giúp giảm thời gian xử lý trên client, từ đó tăng tốc độ hiển thị.
**Cách bắt đầu**
1. **Tạo một Server Component** – Đặt file có tiền tố `fc.` (ví dụ: `fc.BlogPost.js`). Đây là một file JavaScript thông thường có thể import các module Node.js, gọi API và sử dụng các thư viện side-effect‑free.
2. **Bao bọc các phần tương tác trong Client Component** – Sử dụng `use client` ở đầu file React để đánh dấu một component sẽ được render trên trình duyệt. Chỉ những component này mới có thể sử dụng hooks, context hoặc thư viện có side-effect.
3. **Kết hợp chúng trong layout** – Layout có thể bao gồm nhiều Server Component để hiển thị cấu trúc trang, trong khi các thành phần như nút “thích”, dropdown hoặc biểu mẫu sẽ được render trên client.
**Ví dụ thực tế: Trang blog đơn giản**
```jsx
// fc.BlogList.js (Server Component)
export default async function BlogList() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return (
<ul>
{posts.map(p => (
<li key={p.id}><Link href={`/blog/${p.slug}`}>{p.title}</Link></li>
))}
</ul>
);
}
```
```jsx
// components/BlogPostClient.js (Client Component)
'use client';
import { useState } from 'react';
export default function BlogPostClient({ id, initialContent }) {
const [content, setContent] = useState(initialContent);
const handleLike = async () => {
const res = await fetch('/api/like', { method: 'POST', body: JSON.stringify({ id }) });
setContent(await res.text());
};
return (
<div>
<article>{content}</article>
<button onClick={handleLike}>Thích</button>
</div>
);
}
```
**Lời khuyên thực hành**
- **Bắt đầu từ từ:** Triển khai Server Component cho các sections có dữ liệu tĩnh, sau đó dần dần mở rộng.
- **Tận dụng caching:** Sử dụng `revalidate` trong route segments để giữ cho nội dung được cập nhật mà không ảnh hưởng đến hiệu suất.
- **Kiểm tra kỹ lưỡng:** Đảm bảo rằng các component được đánh dấu `use client` thực sự cần side-effect; các component không cần thiết sẽ chỉ làm tăng kích thước bundle.
Bằng cách kết hợp Server Components với Client Components một cách chiến lược, bạn có thể tạo ra các ứng dụng web nhanh, tương tác và thân thiện với SEO, đồng thời giữ cho mã nguồn dễ bảo trì và mở rộng.