React의 renderToString 실행 여부 감지 방법

React에서 renderToString을 사용하여 서버 사이드 렌더링(SSR)을 수행할 때, 해당 코드가 서버에서 실행 중인지 클라이언트에서 실행 중인지 구분해야 할 경우가 있다. 이를 확인하는 방법을 정리한다.

1. window 객체를 활용한 감지

브라우저 환경에서는 window 객체가 존재하지만, 서버 환경(Node.js)에서는 존재하지 않는다. 이를 이용하여 실행 환경을 구분할 수 있다.

const isServer = typeof window === "undefined";

• true: 서버에서 실행 중 (renderToString이 실행될 가능성이 있음)
• false: 클라이언트에서 실행 중

2. useEffect를 활용한 감지

React의 useEffect는 클라이언트에서만 실행되므로 이를 활용하여 SSR 여부를 확인할 수 있다.

import { useEffect, useState } from "react";

const useIsServer = () => {
  const [isServer, setIsServer] = useState(true);

  useEffect(() => {
    setIsServer(false);
  }, []);

  return isServer;
};

• true: 서버에서 실행됨
• false: 클라이언트에서 실행됨

3. Hydration 감지

React의 Hydration 과정(서버 렌더링된 HTML을 클라이언트에서 바인딩하는 과정)을 감지하면 renderToString이후 클라이언트 실행 여부를 확인할 수 있다.

import { useEffect, useState } from "react";

const useHydrated = () => {
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    setHydrated(true);
  }, []);

  return hydrated;
};

const Component = () => {
  const isHydrated = useHydrated();
  return <div>{isHydrated ? "클라이언트 렌더링 완료" : "서버 렌더링 상태"}</div>;
};

• false: 서버에서 renderToString으로 렌더링됨
• true: 클라이언트에서 Hydration 완료됨

4. Node.js 환경 확인

서버에서 실행 중인지 확인하는 또 다른 방법으로 process 객체를 활용할 수 있다.

const isServer = typeof process !== "undefined" && process.release?.name === "node";

• true: 서버(Node.js)에서 실행 중
• false: 브라우저에서 실행 중