Support for RSC

[Danji-ya]

Problem Statement

Next.js 프레임워크가 업데이트를 하면서 꽤 많은 부분이 달라지게 되었는데 그 중 하나가 App Router입니다. 기본적으로 app 폴더 내의 page들은 RSC(React-Server-Component)이며 이는 동작 방식에 근본적인 변화를 가져와 우리가 사용해 오던 일부 라이브러리와 도구들에게 혼란을 가져다주었습니다.

저희 Gganbu-UI는 @emotion/styled 의존성으로 인해 런타임 CSS-in-JS를 가지고 있습니다. 그렇기 때문에 RSC에서 Gganbu-UI를 사용하는 것에 대한 제약이 따릅니다. Gganbu-UI에만 국한되어 있는게 아니라 Material UI, Mantine(Prior to version 7.0), Chakra UI와 같은 인기있는 라이브러리에서도 동일합니다. 런타임 CSS-in-JS를 제거하여 RSC에서 호환 가능하도록 하는 것은 사용자로부터 받고 있는 가장 흔한 요구 중 하나입니다.

Proposed Solution

더이상 Gganbu-UI는 스타일 생성을 위해 emotion에 의존하지 않도록 하려고합니다. 모든 Gganbu-UI의 스타일은 앞으로 모듈 가져오기를 통해 생성할 수 있도록 native css파일을 함께 제공하려고 합니다.

이 변경 사항을 통해서 성능을 향상시키고 CSS-in-JS가 지원되지 않거나 제한적으로 지원되는 환경(e.g. App Router)에서 Gganbu-UI를 사용할 수 있게 하고자 합니다.

Compare performance

• 리렌더링 성능은 Ipad Pro 모바일에서 페이지를 로드하여 측정하였습니다. 총 5번씩 측정하였고 확실히 상호작용 및 컴포넌트의 재렌더링에서 약간의 오버헤드가 존재하는 것을 확인할 수 있었습니다.
• 규모가 작은 환경에서 테스트하다보니 FCP, LCP은 큰 차이가 존재하지 않았습니다.

[Re-rendering] Emotion	Panda Css

[FCP, LCP, TBT] Emotion	Panda Css

[minzzang144]

설명 감사합니다! 재밌게 읽었습니다:) 원래 성능 개선은 사이즈가 커질 때 진가를 발휘하는 법이죠 ㅋ.ㅋ