Next.js에서 서버 컴포넌트에 Emotion Cache 사용하기

[portfolio-y0711]

Next.js에서 서버 컴포넌트에 Emotion Cache 사용하기

Next.js에서 서버 컴포넌트(Server Components)에 Emotion cache를 사용하는 방법은 클라이언트 사이드에서의 방법과 다소 차이가 있습니다. 서버 컴포넌트는 서버에서 렌더링되며, 클라이언트로 전송되기 전에 HTML로 변환됩니다. 이 과정에서, Emotion cache를 사용하여 서버 사이드 렌더링(SSR)과 관련된 스타일을 효과적으로 관리할 수 있습니다.

기본적인 사용 방법

1. Emotion 캐시 설정: 서버와 클라이언트에서 공통으로 사용될 Emotion 캐시를 설정합니다. 이 설정은 클라이언트 사이드와 유사한 방식으로 이루어집니다.

2. 스타일 추출과 HTML 삽입: 서버 사이드 렌더링 과정에서 @emotion/server의 renderStylesToString 함수를 사용하여 렌더링된 컴포넌트에서 스타일을 추출하고, 이를 최종 HTML 문자열에 삽입합니다.

예시 코드

import { renderToString } from 'react-dom/server';
import { CacheProvider } from '@emotion/react';
import createEmotionCache from './createEmotionCache';
import { renderStylesToString } from '@emotion/server';
import App from './App'; // 서버 컴포넌트를 렌더링하는 루트 컴포넌트

const emotionCache = createEmotionCache(); // Emotion 캐시 인스턴스 생성

const html = renderStylesToString(
  renderToString(
    <CacheProvider value={emotionCache}>
      <App />
    </CacheProvider>
  )
);

이 코드는 서버에서 애플리케이션을 렌더링하고, 렌더링된 결과에서 스타일을 추출하여 최종 HTML 문자열에 스타일을 적용하는 과정을 보여줍니다. 이렇게 하면, 페이지가 로드될 때 스타일이 즉시 적용되어 사용자에게 보여지게 됩니다.

참고

Next.js의 버전이나 사용 중인 기능에 따라 구체적인 구현 방법은 다를 수 있습니다. 공식 문서나 커뮤니티에서 제공하는 가이드를 참조하는 것이 좋으며, 특히 서버 컴포넌트와 관련된 기능이나 API가 업데이트되는 경우가 많기 때문에 최신 정보를 확인하는 것이 중요합니다.