-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
styled-components 가 아닌 css SSR 적용
20.11.19 16:25 작성 조회수 356
0
nextjs9 에서 styled-components 와 CSS를 같이 사용해서 작업중인데 (외부 스타일 라이브러리 때문에)
ssr 때 지금 사용하는 css도 같이 _document 에서 서버사이드 렌더링으로 스타일 처리를 해주고 싶습니다.
또한, 이미지는 Lazy 하게 불러오더라도 해당 css 파일에 font-face 코드가 있는데 그래서 그런지 로컬 렌더링 후에 폰트가 적용되는 어색한 화면이 나옵니다.
혹시 어떻게하면 좋을지 참고할 수 있는 관련 링크라도 알려주시면 감사하겠습니다.
답변을 작성해보세요.
0
조현영
지식공유자2020.11.19
제가 말씀드린 것은
<Head>
<link rel="stylesheet " href="퍼블릭경로"></link>
<style>...</style>
</Head>
이렇게 직접 넣는 것이었습니다. 저렇게 fs.readFileSync로 하면 브라우저에서 _document.js 불러올 때는 에러가 날 수 있어서요.
외부 스타일 CSS가 있으면 그냥 _app.js에서 import 'CSS경로'하면 알아서 Next.js가 번들링해줍니다. 제가 강좌에서 antd css import한 것 처럼요.
0
Tony
질문자2020.11.19
네.. 혹시 예시 코드나 링크가 있을까요?
https://github.com/vercel/next-plugins/issues/238
이걸 바탕으로
class InlineStylesHead extends Head {
getCssLinks({ allFiles }) {
console.log("Inline Styles Head");
console.log(allFiles);
return allFiles
.filter((file) => file.endsWith(".css"))
.map((file) => (
<style
key={file}
nonce={this.props.nonce}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(".next", file), "utf-8"),
}}
/>
));
}
}
이렇게 코드를 만들어서 Head 대신에 넣어봤는데, .next 폴더에 css 파일이 없더라구요.
0
조현영
지식공유자2020.11.19
_document에 Head(next/head)를 넣으시고 css나 style 태그를 넣어두면 제일 먼저 그 부분이 렌더링되므로 css가 먼저 적용된 상태로 컴포넌트가 렌더링됩니다.
답변 3