Next.js 환경에서 초기 로딩 시, ods 컴포넌트의 기본 UI가 보여지는 현상 (FOUC)

Issue

• 순수하게 emotion/styled를 사용했을 경우에는 발생하지 않음

• ODS를 사용했을 경우에만 발생
• @emotion/styled를 기반으로 만든 컴포넌트만 발생 (동적 스타일)

차이점 파악해보기

• 써드파티 라이브러리
• @emotion/styled를 기반으로 만든 써드파티 디자인 시스템

const StyledButton = /* @__PURE__ */ createStyled("button", process.env.NODE_ENV === "production" ? {
  target: "eu67pk00"
} : {
  target: "eu67pk00",
  label: "StyledButton"
})(process.env.NODE_ENV === "production" ? {
  name: "1gitpv",
  styles: "width:200px;height:50px;background:blue;color:white"
} : {
  name: "1gitpv",
  styles: "width:200px;height:50px;background:blue;color:white",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zdXJpbS9Eb2N1bWVudHMvRGV2L29mZmVyLWRlc2lnbi1zeXN0ZW0vcGFja2FnZXMvcmVhY3Qvc3JjL2NvbXBvbmVudHMvU2FtcGxlMi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2tDIiwiZmlsZSI6Ii9Vc2Vycy9zdXJpbS9Eb2N1bWVudHMvRGV2L29mZmVyLWRlc2lnbi1zeXN0ZW0vcGFja2FnZXMvcmVhY3Qvc3JjL2NvbXBvbmVudHMvU2FtcGxlMi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gIHdpZHRoOiAyMDBweDtcbiAgaGVpZ2h0OiA1MHB4O1xuICBiYWNrZ3JvdW5kOiBibHVlO1xuICBjb2xvcjogd2hpdGU7XG5gXG5cbmV4cG9ydCBjb25zdCBTYW1wbGUyID0gKHsgY2hpbGRyZW4gfTogeyBjaGlsZHJlbjogUmVhY3ROb2RlIH0pID0+IHtcbiAgcmV0dXJuIDxTdHlsZWRCdXR0b24gdHlwZT1cImJ1dHRvblwiPntjaGlsZHJlbn08L1N0eWxlZEJ1dHRvbj5cbn1cbiJdfQ== */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const Sample2 = ({
  children
}) => {
  return /* @__PURE__ */ jsx(StyledButton, {
    type: "button",
    children
  });
};

• @emotion/css와 className을 기반으로 만든 써드파티 디자인 시스템(정적 스타일)

const ButtonStyle = /* @__PURE__ */ css(process.env.NODE_ENV === "production" ? {
  name: "1gitpv",
  styles: "width:200px;height:50px;background:blue;color:white"
} : {
  name: "cu1vyz-ButtonStyle",
  styles: "width:200px;height:50px;background:blue;color:white;label:ButtonStyle;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zdXJpbS9Eb2N1bWVudHMvRGV2L29mZmVyLWRlc2lnbi1zeXN0ZW0vcGFja2FnZXMvcmVhY3Qvc3JjL2NvbXBvbmVudHMvU2FtcGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoiL1VzZXJzL3N1cmltL0RvY3VtZW50cy9EZXYvb2ZmZXItZGVzaWduLXN5c3RlbS9wYWNrYWdlcy9yZWFjdC9zcmMvY29tcG9uZW50cy9TYW1wbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcblxuY29uc3QgQnV0dG9uU3R5bGUgPSBjc3Moe1xuICB3aWR0aDogJzIwMHB4JyxcbiAgaGVpZ2h0OiAnNTBweCcsXG4gIGJhY2tncm91bmQ6ICdibHVlJyxcbiAgY29sb3I6ICd3aGl0ZSdcbn0pXG5cbmV4cG9ydCBjb25zdCBTYW1wbGUgPSAoeyBjaGlsZHJlbiB9OiB7IGNoaWxkcmVuOiBSZWFjdE5vZGUgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24gY2xhc3NOYW1lPXtCdXR0b25TdHlsZX0gdHlwZT1cImJ1dHRvblwiPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvYnV0dG9uPlxuICApXG59XG4iXX0= */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
});
const Sample = ({
  children
}) => {
  return /* @__PURE__ */ jsx("button", {
    className: ButtonStyle,
    type: "button",
    children
  });
};

• 직접 작성한 컴포넌트
• @emotion/styled를 이용하여 앱 내에 직접 작성한 컴포넌트
• @emotion/css를 이용하여 앱 내에 직접 작성한 컴포넌트