[FE] Trouble Shooting - Next.js / FOUC, 화면 깜빡임 장애 해결
FOUC, Flash of Unstyled ContentSSR 시 스타일이 처음에 적용되지 않다가 나중에 적용되어 깜빡이는 현상 💥문제 상황좌측 상단에 보면 스타일이 뒤늦게 적용되어 UI가 깨지는 모습을 볼 수 있다Styled-Components로 스타일을 진행하였다 ❓원인 - Next.js 렌더링 방식 : SSR (Server Side Rendering) 1. HTML 렌더링 => Client 전달2. JS 렌더링 => Client 전달 👉🏻 Styled-Components : CSS-in-JS→ HTML 렌더링 후, Styled-Components의 JS 파일 적용 간 타이밍 이슈 발생 ❗해결 방법 - 서버에서 스타일을 미리 렌더링 : Next.js 공식 문서1️⃣Styled-Component..
2025.02.27