Server-side rendering 시 style 적용은 어떻게 할까?
styled-component 의 경우
serverStyleSheet
이란 기능을 제공한다.
- 해당 긴기능을 통해서, 서버에서 앱이 렌더링 될 때 마다 styles 들을 추출하여
<style/>
태그로 주입해주는 것.
- 아마 emotion 도 비슷하지 않을까!
module.css의 경우
- 애초에 번들된 전역 css 파일을 html 헤더에 꽂아줘버린다.
- 사내프로젝트에서 module css 쓰는경우 그랬다.
<Head>
<link rel='stylesheet' href={globalCssPath} />
</Head>
- 저 globalCssPath 가 빌드된 css 결과물임
- 그런데..styled component 처럼 초기렌더링에 필요한 모든 css 를 서버사이드렌더링 시에 포함시켜주지는 못했다.
- 따로 지원을하지 않는 것 같은뎀..흠..............
- 그렇다고 초기렌더링에 필요한 style 을 식별해서 빌드 돌리고 그걸 꽂아줄 방법두 없슴...😔