인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

이태용님의 프로필 이미지
이태용

작성한 질문수

React로 NodeBird SNS 만들기

styled component SSR 질문 있습니다.

작성

·

300

0

styled components를 AppLayout에 사용하면 SSR이 안되네요.

pages에 들어간 styled-components 부분에서는 SSR이 됩니다.

_app.js에서 AppLayout에 props를 내려 줘야 되나요?

답변 5

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

혹시 styled components 버전이 5인가요? 4로 내려보세요.

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

강좌를 만들 때는 https://github.com/zeit/next.js/tree/master/examples/with-styled-components

를 참고해서 만들었습니다. _document.js에 있는 설정이 다입니다. ㅠㅠ

0

이태용님의 프로필 이미지
이태용
질문자

4버전에서 되네요 감사합니다

0

이태용님의 프로필 이미지
이태용
질문자

새로고침 하면 AppLayout 부부에 styled-components css가 적용이 안되다가 다시 적용 되는 현상이있습니다.

(dev환경에서는 확인 못했었는데 Production 환경에서는 확인 됩니다.)

포스트맨으로 확인해도 AppLayout 부분만 styled-components가 적용이 안되네요. pages에 넣은것은 되구요.

그래서 AppLayout에 있던 Meun, Footer component를 pages/index에 넣어보니까

새로고침 할때 styled-components 적용안됬다 되는 부분이랑, 포스트맨에 styled-components 적용 안되있는 부분 

이 해결 됩니다.

그런데 저렇게 하면 pages 부분에 하나하나 다 Layout에 필요한 component를 하나하나 다 넣어 줘야해서..

AppLayaout에서 해결하고 싶은데.. 안되네요.

혹시 _app.js에서 AppLayout으로 감싸는 Component 감싸는 부분에서 따른게 필요한가 생각했는데

다른 설정이있나요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

AppLayout에 넣는다고 안 될 이유는 없어보이는데요. 안 된다는 것을 어떻게 파악하셨나요? 페이지 로딩 후에 화면이 뜨나요?

이태용님의 프로필 이미지
이태용

작성한 질문수

질문하기