서버사이드 렌더링 적용 후, css가 풀렸다가 다시 적용되는것 같... - 인프런

[리뉴얼] React로 NodeBird SNS 만들기

쿼리스트링과 lastId 방식

서버사이드 렌더링 적용 후, css가 풀렸다가 다시 적용되는것 같아요.

해결된 질문

작성

870

안녕하세요!

서버사이드 렌더링 적용후에 css가 풀렸다가 다시

적용되는 것 같은데, 해결 방법이 있을까요?

로그인 후 새로고침을 하면 잠깐 첫번째 화면이 보였다가 두번째 화면을 보여줍니다.

세번째 화면은 리덕스 상태입니다.

서버사이드 렌더링을 해서 user와 post의 데이터는 잘 받아오고 있는것 같습니다.

답변 3

질문자

와.. 드디어 되네요 너무 감사합니다!!

며칠 째 고생했는데 이렇게 되니까 너무 좋은데, 너무 허무하기도 하네요..ㅠㅠ

저는 여태껏 next config 설정과 babel 쪽만 보고 있었는데

이렇게 방법을 찾아내고 적용하는것이 실력이겠죠? 앞으로 더 열심히 하겠습니다!

아 그리고 혹시 몰라서 코드 남겨봅니다.

babel 대신 swc를 이용했습니다. (혹시 babel 설정으로 안되시는 분들을 위해서..)

npm install --save-dev @swc/plugin-styled-components @swc/core
root 폴더 안에 .swcrc 만들기

// .swcrc

{ "jsc": { "experimental": { "plugins": [ [ "@swc/plugin-styled-components", { "displayName": true, "ssr": true } ] ] } } }
next.config 파일에 설정 추가

swcMinify: true,
compiler: { styledComponents: true, },
** 혹시 .babelrc를 삭제하지 않고 남겨두고 swc를 사용하려고 하면 이런 문구가 보입니다.
'Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
'
'compiler options in next.config.js will be ignored while using Babel https://nextjs.org/docs/messages/ignored-compiler-options'

바벨 셀정파일을 남겨두고 싶으시다면, 아래 설정도 next.config 파일에 추가해주시면 됩니다.
experimental: { forceSwcTransforms: true, }