css 로딩 sync 이슈

[jinsujj]

owl-dev.me 블로그 사이트 접속 시, css 렌더링 속도 이슈.

Sidebar, Header ,Footer 등에서 HTML 이 먼저 받아오고, 이 후 CSS 가 로딩되면서, 지연 시간의 사용자 경험이 떨어짐 .

원인: SSR 방식이 아닌 React 기반의 CSR 이기 때문에, javascript , css 를 로딩 되기 까지 이슈 발생

1차 해결 : Redux + useEffect() 를 활용해서, 렌더링 속도를 지연 및 순서를 부여 2차 해결 : Next.js 의 useRouter().isReady 를 활용해서 ready 상태 이후 렌더링 가능하게 설정 3차 해결 : Next.js 의 useRouter().isReady 를 Hook 으로 빼서 처리

[jinsujj]

Redux, useEffect 로 처리할 때보다 코드도 깔끔해지고 효율적으로 변함 확인

[jinsujj]

완료