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

Question

안녕하세요! 서버사이드 렌더링 적용후에 css가 풀렸다가 다시 적용되는 것 같은데, 해결 방법이 있을까요? 로그인 후 새로고침을 하면 잠깐 첫번째 화면이 보였다가 두번째 화면을 보여줍니다. 세번째 화면은 리덕스 상태입니다. 서버사이드 렌더링을 해서 user와 post의 데이터는 잘 받아오고 있는것 같습니다.

Teo · Answer

와.. 드디어 되네요 너무 감사합니다!! 며칠 째 고생했는데 이렇게 되니까 너무 좋은데, 너무 허무하기도 하네요..ㅠㅠ 저는 여태껏 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, }

제로초(조현영) · Answer

https://ant.design/docs/react/use-with-next#using-pages-router 이거 적용하셔야 할 것 같습니다. 공지사항에 등록해두겠습니다.

제로초(조현영) · Answer

styled component용 ssr 설정 하셨나요?