현재 진행중인 개인 프로젝트에서 처음으로 Next.js를 사용하지 않고 SSR과 코드스플리팅을 적용해보고 있습니다. 프레임워크를 사용하지 않으니 개발환경 구축에 여러모로 애를 먹었지만 리엑트 공식 문서와 stackoverflow, 페이스북 React Korea 커뮤니티등 여러 웹페이지를 왔다갔다하며 많은 사람들과 커뮤니케이션을 할 수 있었는데요, 오늘은 SSR과 코드스플리팅을 구축하며 서버에서 렌더링되는 html 파일에 스타일링이 제대로 입혀지지 않는 것을 어떻게 해결했는지에 대해 나누고자 합니다. 👉 무슨 문제가 있었나요? webpack-dev-middleware와 webpack-hot-middleware 을 이용해서 express 서버 코드인 server.tsx에서 앱 구동시 초기 화면을 불러올때 찰나의 시간동안 스타일이 전혀 입혀지지 않은 plain text들이 화면에 표시되는 것이 문제였습니다. SSR과 코드스프리팅의 특