2026.07.21

배경

antd는 CSS-in-JS 방식으로 스타일을 생성한다. Next.js App Router 환경에서 SSR 시 서버에서 생성한 스타일이 클라이언트 hydration 시점에 주입되어 FOUC(Flash of Unstyled Content) 가 발생한다.

기존 대응 방식 (임시방편)

Table — setTimeout 패턴

const [renderLoading, setRenderLoading] = useState(true);

useEffect(() => {
  const timer= setTimeout(() => {
    setRenderLoading(false);
  }, 100); // antd 스타일 주입 대기
}, []);

if (renderLoading) return <Skeleton />;

Descriptions — mounted 패턴

const [mounted, setMounted] = useState(false);

useEffect(() => { setMounted(true); }, []);

if (!mounted) return <Skeleton />;

문제점:

• Table은 매 렌더마다 100ms 불필요한 딜레이 발생
• 사용자에게 스켈레톤 → 실제 컴포넌트 전환이 노출됨
• 근본적인 해결이 아닌 회피 방식

해결 방법 — @ant-design/nextjs-registry 적용

antd 공식 제공 패키지. SSR 시 antd 스타일을 <style> 태그로 서버에서 미리 주입해줘 FOUC를 근본적으로 차단한다.

설치

pnpm add @ant-design/nextjs-registry

적용 (apps/service/app/layout.tsx)

import { AntdRegistry} from "@ant-design/nextjs-registry";

<AntdRegistry>
  <QueryProvider>
    {children}
  </QueryProvider>
</AntdRegistry>