server components react cách dùng: giữ server làm việc nặng, client làm việc tương tác
· Tác giả: Trường — Founder Webchốt
server components react cách dùng trong Next.js App Router là nghệ thuật phân chia: phần render dữ liệu tĩnh hoặc query nặng chạy trên server không ship hook xuống trình duyệt; phần cần click, animation hoặc form realtime nằm trong island client. Đội Việt Nam mới chuyển từ SPA cũ hay gặp lỗi nhồi `use client` vào root layout khiến toàn trang mất lợi ích RSC, hoặc ngược lại, quên directive khi dùng date picker. Bài viết mô tả boundary, fetch, composition pattern và debug. Xem dịch vụ, giá, liên hệ Webchốt — 0905 151 701, hi@webchot.com.
Khi CMS trả HTML phức tạp, việc sanitize ở server component thay vì client có thể giảm cả tải JS lẫn rủi ro XSS nếu pipeline nghiêm.
Các thư viện chart cũ đôi khi yêu cầu window — lúc đó dynamic import client với loading skeleton rõ ràng vẫn tốt hơn chặn cả page.
Boundary rõ giúp bundle client gọn | Nguồn: webchot.com
RSC pattern: composition, serialization và giới hạn props
RSC pattern trong thực tế là sắp xếp lại cây component để dữ liệu nặng và lý do bảo mật nghiêng về server. Bạn có thể import client component vào server file và truyền children render phía server — pattern này giảm boilerplate so với thời getServerSideProps trả props dài dòng. Tuy nhiên, props qua ranh giới phải serializable: không truyền class instance, symbol hay function xuống client children vô tình. Khi cần callback, dùng server action hoặc chuyển logic event sang client component gói nhỏ.
Trong dự án megamall ảo, team thường tách `ProductGrid` server đọc Prisma và `AddToCartButton` client — grid giữ HTML đầy đủ cho SEO trong khi nút tương tác không kéo toàn ORM xuống bundle. Nếu bạn dùng i18n, nhớ truyền locale string/number đã format thay vì object Date phức tạp để tránh hydration mismatch. Khi viết thư viện nội bộ, xuất hai entry: `.server.tsx` và `.client.tsx` để consumer không import nhầm vào server tree. Một anti-pattern phổ biến tại VN là copy code mẫu có `useEffect` fetch trong component được coi là server — build báo lỗi hoặc tệ hơn, team thêm `use client` ở file cha cao nhất để “cho qua”, phá vỡ toàn bộ lợi ích RSC.
Giữ danh sách package cấm import trong server — ví dụ chart dùng `window` — trong ESLint custom hoặc comment PR template để reviewer nhắc.
Data fetching, cache và streaming UX
fetch mặc định có thể cache tùy phiên bản — ghi nhãn `cache: 'no-store'` cho dữ liệu account. Với section chậm, bọc `Suspense` và `loading.tsx` để trang không trắng toàn phần. Tránh waterfall: đừng await tuần tự hai query độc lập trong cùng component khi có thể gom.
Khi render dashboard nội bộ, song song hoá query có thể giảm TTFB từ 1,2s xuống mức chấp nhận được trên VPN công ty. Nếu một phần dữ liệu phụ thuộc cookie session, hãy đọc cookie phía server và truyền `userId` vào các fetch downstream — tránh pattern “client gọi API public rồi filter” vừa chậm vừa lộ khả năng enumeration. Với internationalization, đảm bảo locale đọc từ segment URL hoặc header được forward tới query layer; RSC có thể cache nhầm bản tiếng Anh cho user Việt nếu cache key thiếu locale.
- Điểm 1: Tách query nóng và query có thể stale.
- Điểm 2: Dùng skeleton chiều cao cố định tránh CLS.
- Điểm 3: revalidateTag sau mutation server action.
- Điểm 4: Error boundary route cho từng segment thay vì một error toàn app.
Bảng: khi nào Client vs Server component
Tham chiếu nhanh khi review PR.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| onClick | Client | Server | Client |
| Đọc DB qua ORM | Server | Client | Server, không lộ URI |
| useSearchParams | Client | Server | Client hoặc searchParams prop page |
| Markdown tĩnh | Server | Client | Server compile MDX |
Sau bảng: biên bản review nên có cột lý do business, không chỉ kỹ thuật.
Quy trình 5 bước refactor từ SPA sang RSC hợp lý
- Bước 1: Vẽ tree component và đánh dấu tương tác.
- Bước 2: Di chuyển data fetch lên server closest need.
- Bước 3: Giảm provider client global không cần thiết.
- Bước 4: Đo bundle trước/sau bằng analyzer.
- Bước 5: Kiểm tra SEO và rich result trên staging.
Refactor một lần toàn trang thay vì incremental dễ block release hai tuần — hãy theo route. Sau mỗi milestone, ghi rõ trong README route nào đã là RSC thuần và route nào còn client legacy để PM không hứa feature không đúng kiến trúc.
Sau refactor, nên chạy một phiên crawl nội bộ hoặc Lighthouse CI trên 10 URL quan trọng nhất để phát hiện regression meta title và canonical — server component đôi khi thay đổi thứ tự head output mà mắt thường khó thấy trên preview.
Webchốt: kiến trúc App Router tại /dich-vu/
Chúng tôi thiết kế RSC cho TMĐT, blog và dashboard nội bộ — tách micro interaction khỏi dữ liệu lớn. /pricing/ cho phạm vi; 0905 151 701, hi@webchot.com.
Gói có thể kèm guideline naming file và ESLint rule nội bộ để PR không tái lỗi boundary. Chúng tôi cũng hỗ trợ vẽ diagram luồng dữ liệu từ CMS tới route segment để PM hiểu vì sao một thay đổi nhỏ ở field headless CMS có thể invalidate cache cả section hero.
Sai lầm phổ biến khi học server components react cách dùng
Bốn lỗi làm tăng bundle trở lại như SPA. Thêm vào đó, một số team copy pattern modal login full-screen làm client component rồi import vào layout cha server mà không lazy-load — kết quả là JS modal tải trước cả nội dung chính. Cách xử lý là dynamic import modal với `ssr: false` hoặc tách route login riêng nếu UX cho phép. Tương tự, chart nặng nên nằm phía sau `IntersectionObserver` bọc client để không chặn main thread khi người dùng chỉ đọc intro bài viết.
- Sai lầm 1: `use client` ở layout cao nhất vì một widget nhỏ.
- Sai lầm 2: Truyền secret qua props xuống client vì tiện.
- Sai lầm 3: Fetch client trong useEffect cho data đã có trên server.
- Sai lầm 4: Không test suspense với mạng 3G throttle.
FAQ — server components react cách dùng
Children client trong server parent?
Được — composition pattern: server import client, truyền children server-rendered là slot. Giữ type rõ để tránh circular import. Khi children là list dài, cân nhắc virtualization phía client để không tạo DOM quá lớn sau khi HTML tĩnh đã hiển thị.
Third-party không hỗ trợ RSC?
Wrap client file riêng; dynamic import nếu chỉ cần phía client mount. Kiểm tra issue upstream của thư viện và phiên bản React peer deps trước khi nâng Next.
Cần suspense mọi fetch?
Không — route có thể await toàn page nếu nhanh; suspense hữu ích khi có section chậm hơn 200–300ms. Quá nhiều boundary nhỏ làm stack trace khó đọc khi lỗi production.
Testing story?
Playwright tích hợp tốt hơn unit shallow cho server tree; mock fetch tầng integration và snapshot HTML quan trọng cho SEO route.
Webchốt có mẫu repo?
Xem template và consulting /dich-vu/; có thể kèm checklist review PR cho boundary và secret handling.
Liên Hệ Webchốt
server components react cách dùng đúng sẽ giảm JS và tăng tốc First Contentful Paint, nhưng đòi kỷ luật boundary và review PR chặt. Webchốt hỗ trợ bạn thiết lập convention phù hợp đội nhỏ tại Việt Nam. Liên hệ 0905 151 701 hoặc hi@webchot.com.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
