styled-components 가 아닌 css SSR 적용

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

작성

445

nextjs9 에서 styled-components 와 CSS를 같이 사용해서 작업중인데 (외부 스타일 라이브러리 때문에)

ssr 때 지금 사용하는 css도 같이 _document 에서 서버사이드 렌더링으로 스타일 처리를 해주고 싶습니다.

또한, 이미지는 Lazy 하게 불러오더라도 해당 css 파일에 font-face 코드가 있는데 그래서 그런지 로컬 렌더링 후에 폰트가 적용되는 어색한 화면이 나옵니다.

혹시 어떻게하면 좋을지 참고할 수 있는 관련 링크라도 알려주시면 감사하겠습니다.

nodejs redux express react Next.js

답변 3

제로초(조현영)

지식공유자

제가 말씀드린 것은

이렇게 직접 넣는 것이었습니다. 저렇게 fs.readFileSync로 하면 브라우저에서 _document.js 불러올 때는 에러가 날 수 있어서요.

외부 스타일 CSS가 있으면 그냥 _app.js에서 import 'CSS경로'하면 알아서 Next.js가 번들링해줍니다. 제가 강좌에서 antd css import한 것 처럼요.

Tony

질문자

네.. 혹시 예시 코드나 링크가 있을까요?

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 파일이 없더라구요.

제로초(조현영)

지식공유자

_document에 Head(next/head)를 넣으시고 css나 style 태그를 넣어두면 제일 먼저 그 부분이 렌더링되므로 css가 먼저 적용된 상태로 컴포넌트가 렌더링됩니다.

인프런 커뮤니티 질문&답변

styled-components 가 아닌 css SSR 적용