Next js

nextjs에서 첫 css가 적용 안된 채로 렌더링되는 경우 (feat. styled-components)

위 이미지에서 이상한점이 보이시나요? url을 치고 들어갈때 css 가 적용이 안된 상태로 0.1초정도 있다가 css가 뒤늦게 적용되는 모습이 보이실 겁니다. 굉장히 거슬렸고 저는 오류라고 판단해 구글링을 시작했습니다. 역시 저 이외에도 비슷한 증상을 겪는 분들이 많았고 해결방법도 의외로 쉽게 찾을 수 있었습니다. 이런 현상이 발생되는 이유를 추측해보자면 nextjs는 ssr형식으로 렌더링을 진행하고 클라이언트에게 렌더링된 웹사이트를 보내줍니다. 이때 styled-components는 렌더링이 안된채로 클라이언트에게 보내지고 html만 파싱된 상태에서 styled-components가 클라이언트에서 적용되는 것이라고 추측하고 있습니다. 서버측에서 styled-components가 적용되고 클라이언트에 보..