Trong App Router, tại sao CSS-in-JS runtime (styled-components, Emotion) gặp khó với Server Components, còn CSS Modules và Tailwind thì không?

CSS Modules và Tailwind xử lý style lúc build (compile ra file CSS tĩnh) → hoạt động tự nhiên với Server Components, không cần JS runtime ở client.

Đây là lựa chọn khuyến nghị cho App Router.

// CSS Module — chạy thẳng trong Server Component
import styles from './card.module.css'
export default function Card() {
  return <div className={styles.card}>...</div>
}

CSS-in-JS runtime (styled-components, Emotion) sinh CSS lúc render bằng JS, dựa vào React context và useState/hooks ở client. Mà Server Components không chạy hooks và không gửi JS xuống client → thư viện không thể inject style đúng, dễ lỗi style nhấp nháy (FOUC) khi SSR.

Giải pháp nếu vẫn muốn dùng: chỉ dùng trong Client Component ('use client') và cấu hình một style registry với useServerInsertedHTML để inject CSS lúc SSR. Phức tạp hơn hẳn — nên với App Router, ưu tiên Tailwind / CSS Modules.