React 서버 컴포넌트에서 데이터 패칭 최적화 — 실제 성능 개선 사례 3가지

React 서버 컴포넌트는 클라이언트와 서버 간의 경계를 허물어주는 혁신적인 기능이다. 그러나 이 기능을 제대로 활용하기 위해서는 데이터 패칭 최적화가 필수적이다. 이번 글에서는 실무에서 경험한 성능 개선 사례를 통해 데이터 패칭 최적화의 중요성과 그 방법에 대해 알아보겠다.

1. 서버 컴포넌트와 클라이언트 컴포넌트의 분리

서버 컴포넌트와 클라이언트 컴포넌트를 적절히 분리하는 것이 중요하다. 서버에서 데이터 패칭을 담당하는 컴포넌트는 가능한 한 가볍게 유지해야 한다. 클라이언트 컴포넌트는 사용자 인터페이스(UI)와 상호작용하는 부분에 집중하도록 설계하는 것이 좋다.

예를 들어, 데이터 패칭을 서버 컴포넌트에서 처리하고 클라이언트 컴포넌트는 단순히 데이터를 표시하는 역할을 맡기면, 불필요한 데이터 요청을 줄일 수 있다. 이렇게 하면 서버의 부담을 줄이고, 클라이언트의 렌더링 성능을 높일 수 있다.

// 서버 컴포넌트
async function ServerComponent() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// 클라이언트 컴포넌트
function ClientComponent({ data }) {
  return <div>{data}</div>;
}

2. 데이터 요청의 지연 로딩

모든 데이터를 한 번에 요청하는 것보다 필요한 데이터만 요청하는 것이 성능을 크게 개선할 수 있다. 특히, 사용자 경험을 고려해 초기 로딩 시 필수적인 데이터만 요청하고, 나머지 데이터는 사용자가 필요할 때 로드하는 방식으로 전환할 수 있다.

이를 통해 초기 페이지 로딩 시간을 단축하고, 사용자에게 더 빠른 반응성을 제공할 수 있다. 예를 들어, 사용자가 스크롤을 내릴 때 추가 데이터를 요청하는 방식으로 구현할 수 있다.

// 지연 로딩 예시
function LazyLoadComponent() {
  const [data, setData] = useState(null);
  
  const loadData = async () => {
    const response = await fetchData();
    setData(response);
  };

  return (
    <div onScroll={loadData}>
      {data ? <DisplayComponent data={data} /> : <LoadingSpinner />}
    </div>
  );
}

3. 캐싱 전략 활용

서버에서 데이터를 패칭할 때 캐싱 전략을 적용하면 성능을 더욱 개선할 수 있다. 동일한 데이터에 대한 요청이 반복될 경우, 매번 서버에 요청하는 대신 캐시에서 데이터를 불러오는 것이 훨씬 효율적이다.

React Query, SWR과 같은 라이브러리를 활용하면 데이터 캐싱 및 재검증을 손쉽게 구현할 수 있다. 이를 통해 서버의 부하를 줄이고, 사용자에게 더 빠른 응답을 제공할 수 있다.

import { useQuery } from 'react-query';

function DataFetchingComponent() {
  const { data, error, isLoading } = useQuery('fetchData', fetchData);

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorComponent />;

  return <DisplayComponent data={data} />;
}

마무리

React 서버 컴포넌트에서의 데이터 패칭 최적화는 성능 개선에 있어 매우 중요한 요소다. 서버와 클라이언트 컴포넌트를 적절히 분리하고, 지연 로딩 및 캐싱 전략을 활용함으로써 더 나은 사용자 경험을 제공할 수 있다. 이러한 최적화 방법들은 실제 프로젝트에서 성능을 개선하는 데 큰 도움이 되며, 각 방법의 트레이드오프를 이해하고 적용하는 것이 중요하다.