Next.js 앱 라우터의 FOUC 이해 및 수정 (2025 가이드)

FOUC(Flash of Unstyled Content)는 React 앱에서 로딩 중에 스타일이 없는 콘텐츠가 잠시 표시되는 시각적 결함입니다. 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 UI 간의 불일치로 인해 발생하는 경우가 많으며, Next.js와 같은 프레임워크에서 자주 발생합니다. 증상에는 스타일이 적용되기 전에 원시 HTML이 표시되는 것과 CSS 변수가 즉시 적용되지 않는 것입니다. 일반적인 원인에는 동적 테마, 공유 컴포넌트에서 `Date.now()` 또는 `Math.random()`를 사용하는 것, CSS 라이브러리를 너무 늦게 가져오는 것이 있습니다. FOUC를 수정하려면 `layout.tsx`에 글로벌 CSS를 항상 가져와 스타일이 먼저 로드되도록 합니다. `globals.scss`에 폴백 테마 스타일을 제공하여 스타일이 없는 요소가 플래싱하는 것을 방지할 수 있습니다. 하이드레이션 가드(hydration guard)를 사용하여 클라이언트가 제어를 가져올 때까지 렌더링을 지연시켜 불일치를 방지할 수 있습니다. 동적 CSS 가져오기, `Date.now()` 또는 `Math.random()`를 직접 렌더링에 사용하거나, 서버 컴포넌트에서 `localStorage` 또는 `window`를 읽는 것을 피하세요. 서버 로직을 클라이언트 특정 렌더링에서 분리하면 스타일 플래싱과 하이드레이션 경고를 제거할 수 있습니다.