개요

서버 사이드 렌더링(Server-Side Rendering, SSR)은 클라이언트에서 동적으로 생성되는 컨텐츠를 서버에서 렌더링하여 빠른 초기 로딩 속도와 검색 엔진 최적화(SEO)를 제공하는 방법입니다. MobX는 클라이언트 사이드 상태 관리를 위한 강력한 도구이지만, SSR과 함께 사용하기 위해서는 몇 가지 주의 사항을 알아야 합니다.

MobX와 SSR 함께 사용하기

MobX는 클라이언트 사이드에서 스토어를 생성하고 상태를 업데이트하는 데 사용됩니다. 하지만 SSR을 위해서는 서버에서도 동일한 상태를 가지고 있어야 합니다. 이를 위해 MobX에서는 mobx-react-lite 패키지를 제공합니다.

import { enableStaticRendering } from 'mobx-react-lite';

// 서버에서만 실행되도록 설정
enableStaticRendering(true);

// 스토어 생성
const store = new MyStore();

enableStaticRendering(true)을 호출하여 서버 환경에서만 MobX와 관련된 리렌더링을 비활성화할 수 있습니다. 이렇게 하면 서버에서 생성된 컴포넌트는 클라이언트에 전달될 때 리렌더링되지 않습니다.

서버 측 렌더링을 수행하는 함수에서 스토어를 공유할 수 있습니다.

import { Provider } from 'mobx-react-lite';

const serverRender = (req, res) => {
  const html = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  );

  res.send(html);
}

Provider 컴포넌트를 사용하여 서버에서 렌더링되는 컴포넌트에 스토어를 주입할 수 있습니다.

주의 사항

MobX를 서버 사이드 렌더링과 함께 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

1. async/await는 SSR에 영향을 줄 수 있습니다. MobX에서의 상태 업데이트는 동기적으로 처리되기 때문에, 비동기적인 상황에서 스토어 상태 변경을 기대할 수 없습니다. 이에 따라 async/await를 사용할 때에는 주의해야 합니다.

2. MobX의 스토어는 서로 독립적입니다. 서버에서 사용하는 스토어와 클라이언트에서 사용하는 스토어는 별도로 생성되어야 합니다. 이를 통해 서버와 클라이언트에서 동일한 상태를 유지할 수 있습니다.

3. 서버 사이드 렌더링은 성능에도 영향을 미칠 수 있습니다. MobX는 클라이언트에서 사용되는 상태 관리 도구로써 최적화되어 있지만, 서버 사이드 렌더링과 함께 사용할 때는 추가적인 작업이 필요할 수 있습니다.

결론

MobX는 서버 사이드 렌더링과 함께 사용하기 위해 mobx-react-lite 패키지를 제공합니다. 서버 사이드 렌더링을 구현하려면 일부 주의 사항을 알고 있어야 합니다. 이를 통해 서버 사이드 렌더링을 사용하여 초기 로딩 속도와 검색 엔진 최적화를 개선할 수 있습니다.