Я переробив купу секцій із клієнтських на серверні компоненти на цьому самому сайті, щоб зрізати кілька КБ JS із початкового завантаження. Патерн виглядав нормально — async компонент, await getTranslations(), готово.
Потім білд крашнувся з:
Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"
Ані файлу, ані номера рядка. Трюк: серверний компонент передавав компоненти іконок (які є функціями) як props у клієнтський компонент. React серіалізує props через межу, а функцію серіалізувати не можна.
Фікс був маленький — серверний компонент рендерить іконки як JSX (<CalendarIcon />) і передає їх як ReactNode замість передачі посилання на компонент. Один рядок зміни на поверхні, але зсув ментальної моделі важливий: все, що перетинає межу server → client, має бути серіалізованим JSON або серіалізованими React-елементами.
Хороше нагадування, що "use server" і "use client" — не просто прагми. Це межа серіалізації, і все, що кладеш у props, має це поважати.