Next.SSR 시 js 및 emotion을 사용하여 CSS 미리 적용

며칠 전Beyond Magazine에 매체를 열었다.
Next.js, Shifter의Headless CMS 같은 구성으로 개발되었지만, 몇 가지 지식을 공유했기 때문입니다.
(아키텍처와 같은 계획은 별도로 설명)

프로비저닝

Next.js 10.2.0

Emotion 11.1.x

현상.

일부 이유로 SSR을 사용하지만 SSR 시 초기 디스플레이가 붕괴될 수 있습니다.
사용@emotion/css, 이 경우 Next.js의pre-render 페이지에는 스타일의 방법이 포함되어 있지 않기 때문입니다.Chrome의 Inspector에서 네트워크 레이블을 열고 요청을 확인합니다.
Response의 HTML에는 emotion 스타일이 포함되지 않으며 Preview에서 오류 표시를 확인할 수 있습니다.
(다른 문제도svg404를 보여 주었다.그 후에야 알아차렸다.)

import { css } from "@emotion/css";
import Image from "next/image";
export const Header = () => {
  return (
    <header
      className={css`
        width: 100%;
        padding: 16px 0;
        text-align: center;
        border-bottom: 1px solid rgba(0, 118, 255, 0.9);
      `}
    >
      <Image src="/nextjs.svg" alt="Next.js Logo" height={"32"} width={"64"} />
    </header>
  );
};

해결하다

emotionSSR 시 사용하는 API에 제한이 있습니다. @emotion/react, @emotion/styled에 있습니다.
(맨 위에 써놓고도 눈치채지 못하고 푹 빠져 있다)@emotion/react Pragma를 쓰고 싶지 않은 경우 runtime를 만들어야 하고, emotion11이라면 버전 간 거동이 수상한 부분도 있는데, 이슈가 여러 개 올라갔기 때문에 이용하기로 했다@emotion/styled.
babel-plugin-inline-react-svgpre-render에서svg를 표시할 수 있습니다.

import styled from '@emotion/styled'
import Nextjs from '../components/icons/nextjs.svg'
export const Header = () => {
  return (
    <StyledHeader>
      <Nextjs />
    </StyledHeader>
  )
}

const StyledHeader = styled.header`
  width: 100%;
  padding: 16px 0;
  text-align: center;
  border-bottom: 1px solid rgba(0, 118, 255, 0.9);

총결산

실제 제품에서 탑 페이지에 갑자기 카셀(Calcell)이 있어서 첫눈에 텍스트가 화면 왼쪽에 가까워지고 이미지가 한순간에 화면으로 가득 차는 현상이 발생하여 UX가 매우 떨어지는 상태가 되었다.제멋대로 말하면 몇 개의feature를 뒤에 놓고 시작하기 전에 해결한다(조급해 w).
Beyond Magazine 잡지를 제작하는 구성원을 중심으로 높은 디자인성을 목표로 한다.특히 이미지의 창의력이 뛰어나 웹 기술자들은 세계관을 더욱 개선할 계획이다.
앞으로 미디어의 패러디뿐만 아니라 고품질의 콘텐츠와 다방면의 사업으로 확대될 예정이니 관심 있는 분들은 트위터에 DM!

참고 자료

In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?
CSS in JS라니요?

Nextjs 내연에서svg를react component로 읽기