React Server Components (RSC) render chỉ trên server — JavaScript của chúng không bao giờ được gửi tới browser. Trong App Router, mọi component mặc định là Server Component; bạn chủ động opt-in vào hành vi client.
db ;
() {
users = db..();
(
);
}
Server Components có thể là async, await dữ liệu trực tiếp, và truy cập các tài nguyên chỉ-server (database, filesystem, bí mật) — vì chúng chạy trên server. Không cần một lớp API để fetch dữ liệu, và bí mật không bao giờ tới client.
Browser nhận UI/HTML đã render, không phải code của component hay các dependency của nó. Một Server Component dùng một thư viện markdown hay date nặng sẽ gửi không chút nào thư viện đó tới browser — giảm mạnh kích thước bundle.
// ❌ những thứ này chỉ hoạt động trong Client Components
useState, useEffect, useRef // hooks (không có interactivity/state trên server)
onClick, onChange // event handlers
window, localStorage, document // các API chỉ của browser
Không có interactivity, state, effect, hay browser API — những thứ đó cần một Client Component.
// Server Component fetch dữ liệu, truyền cho một Client Component tương tác
import LikeButton from "./LikeButton"; // một component "use client"
export default async function Post({ id }) {
const post = await getPost(id); // fetch phía server
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Mô hình: Server Components xử lý dữ liệu/cấu trúc; nhúng Client Components chỉ ở nơi cần interactivity ("islands").
Server Components là tính năng định danh của App Router.
Chúng cắt giảm kích thước bundle client (ít JS để tải/parse), cho phép truy cập dữ liệu phía server trực tiếp và an toàn mà không cần API, và cải thiện hiệu năng cùng SEO.
Biết rằng chúng là mặc định — và điều gì buộc một component trở thành Client Component — là nền tảng để cấu trúc các app App Router hiệu quả.