리액트 서버 컴포넌트: 스트리밍과 선택적 하이드레이션 - 종합 가이드

리액트 서버 컴포넌트(RSC)는 우리가 리액트 애플리케이션을 구축하는 방식에 있어 패러다임의 전환을 의미하며, 성능과 사용자 경험을 크게 개선합니다. 컴포넌트 렌더링을 서버로 옮김으로써 RSC는 더 빠른 초기 페이지 로드, 감소된 클라이언트 사이드 자바스크립트, 그리고 향상된 SEO를 가능하게 합니다. 이 가이드는 RSC에 대한 포괄적인 개요를 제공하며, 스트리밍과 선택적 하이드레이션의 개념을 탐구하고 현대 웹 개발에서의 실제 적용 사례를 보여줍니다.

리액트 서버 컴포넌트란 무엇인가?

전통적으로 리액트 애플리케이션은 클라이언트 사이드 렌더링(CSR)에 크게 의존합니다. 브라우저는 자바스크립트 번들을 다운로드하고 실행한 다음 UI를 렌더링합니다. 이 과정은 특히 느린 네트워크나 장치에서 지연을 유발할 수 있습니다. 서버 사이드 렌더링(SSR)은 이 문제를 해결하기 위해 도입되었으며, 초기 HTML이 서버에서 렌더링되어 클라이언트로 전송되어 첫 콘텐츠 페인트(FCP)를 개선합니다. 그러나 SSR은 여전히 클라이언트에서 전체 애플리케이션을 하이드레이션해야 하므로 연산 비용이 많이 들 수 있습니다.

리액트 서버 컴포넌트는 다른 접근법을 제공합니다. 애플리케이션의 특정 부분을 자바스크립트로 클라이언트에 보내지 않고 서버에서 직접 렌더링할 수 있게 해줍니다. 이는 다음과 같은 몇 가지 주요 이점을 가져옵니다:

• 클라이언트 사이드 자바스크립트 감소: 다운로드, 파싱, 실행할 자바스크립트가 줄어들어 초기 페이지 로드가 빨라지고 특히 저사양 장치에서 성능이 향상됩니다.
• 성능 향상: 서버 컴포넌트는 백엔드 리소스에 직접 접근할 수 있어 클라이언트의 API 호출 필요성을 없애고 지연 시간을 줄입니다.
• SEO 강화: 서버에서 렌더링된 HTML은 검색 엔진에 의해 쉽게 인덱싱될 수 있어 더 나은 SEO 순위로 이어집니다.
• 개발 간소화: 개발자는 복잡한 데이터 페칭 전략 없이 백엔드 리소스와 원활하게 통합되는 컴포넌트를 작성할 수 있습니다.

서버 컴포넌트의 주요 특징:

• 서버 전용 실행: 서버 컴포넌트는 서버에서만 독점적으로 실행되며 window나 document와 같은 브라우저 특정 API를 사용할 수 없습니다.
• 직접 데이터 접근: 서버 컴포넌트는 데이터베이스, 파일 시스템 및 기타 백엔드 리소스에 직접 접근할 수 있습니다.
• 제로 클라이언트 사이드 자바스크립트: 클라이언트 사이드 자바스크립트 번들 크기에 기여하지 않습니다.
• 선언적 데이터 페칭: 데이터 페칭을 컴포넌트 내에서 직접 처리할 수 있어 코드가 더 깔끔하고 이해하기 쉬워집니다.

스트리밍 이해하기

스트리밍은 서버가 전체 페이지가 렌더링되기를 기다리지 않고, UI의 일부를 사용 가능해지는 대로 클라이언트로 보낼 수 있게 하는 기술입니다. 이는 특히 여러 데이터 종속성이 있는 복잡한 페이지의 경우 애플리케이션의 체감 성능을 크게 향상시킵니다. 마치 비디오 스트림을 시청하는 것과 같습니다. 비디오 전체가 다운로드될 때까지 기다릴 필요 없이, 충분한 데이터가 사용 가능해지면 바로 시청을 시작할 수 있습니다.

리액트 서버 컴포넌트와 스트리밍의 작동 방식:

1. 서버는 정적 콘텐츠와 플레이스홀더 컴포넌트를 포함할 수 있는 페이지의 초기 셸 렌더링을 시작합니다.
2. 데이터가 사용 가능해지면, 서버는 페이지의 다른 부분에 대한 렌더링된 HTML을 클라이언트로 스트리밍합니다.
3. 클라이언트는 스트리밍된 콘텐츠로 UI를 점진적으로 업데이트하여 더 빠르고 반응성 좋은 사용자 경험을 제공합니다.

스트리밍의 이점:

• 더 빠른 TTFB(Time to First Byte): 초기 HTML이 클라이언트로 훨씬 빨리 전송되어 초기 로딩 시간을 줄입니다.
• 체감 성능 향상: 전체 페이지가 완전히 렌더링되지 않았더라도 사용자는 화면에 콘텐츠가 더 빨리 나타나는 것을 봅니다.
• 더 나은 사용자 경험: 스트리밍은 더 매력적이고 반응성 좋은 사용자 경험을 만듭니다.

스트리밍 예시:

소셜 미디어 피드를 상상해 보세요. 스트리밍을 사용하면 기본 레이아웃과 처음 몇 개의 게시물을 즉시 렌더링하여 클라이언트로 보낼 수 있습니다. 서버가 데이터베이스에서 더 많은 게시물을 가져오면, 이들은 클라이언트로 스트리밍되어 피드에 추가됩니다. 이를 통해 사용자는 모든 게시물이 로드되기를 기다리지 않고 훨씬 빨리 피드를 탐색하기 시작할 수 있습니다.

선택적 하이드레이션

하이드레이션은 서버에서 렌더링된 HTML을 클라이언트에서 상호작용 가능하게 만드는 과정입니다. 전통적인 SSR에서는 전체 애플리케이션이 하이드레이션되는데, 이는 시간이 많이 걸리는 과정일 수 있습니다. 반면, 선택적 하이드레이션은 상호작용이 필요한 컴포넌트만 하이드레이션할 수 있게 하여 클라이언트 사이드 자바스크립트를 더욱 줄이고 성능을 향상시킵니다. 이는 정적 콘텐츠와 상호작용 콘텐츠가 혼합된 페이지에 특히 유용합니다.

선택적 하이드레이션의 작동 방식:

1. 서버는 전체 페이지에 대한 초기 HTML을 렌더링합니다.
2. 클라이언트는 버튼, 폼, 상호작용 요소와 같은 상호작용 컴포넌트만 선택적으로 하이드레이션합니다.
3. 정적 컴포넌트는 하이드레이션되지 않은 상태로 남아 클라이언트에서 실행되는 자바스크립트의 양을 줄입니다.

선택적 하이드레이션의 이점:

• 클라이언트 사이드 자바스크립트 감소: 실행할 자바스크립트가 줄어들어 초기 페이지 로드가 빨라지고 성능이 향상됩니다.
• TTI(Time to Interactive) 개선: 페이지가 완전히 상호작용 가능해지는 데 걸리는 시간이 줄어들어 더 나은 사용자 경험을 제공합니다.
• 최적화된 리소스 활용: 필요한 컴포넌트만 하이드레이션되므로 클라이언트의 리소스가 더 효율적으로 사용됩니다.

선택적 하이드레이션 예시:

전자상거래 상품 페이지를 생각해 보세요. 상품 설명, 이미지, 평점은 일반적으로 정적 콘텐츠입니다. 그러나 "장바구니에 담기" 버튼과 수량 선택기는 상호작용적입니다. 선택적 하이드레이션을 사용하면 "장바구니에 담기" 버튼과 수량 선택기만 하이드레이션하면 되고, 페이지의 나머지 부분은 하이드레이션되지 않은 상태로 남아 로딩 시간을 단축하고 성능을 향상시킵니다.

스트리밍과 선택적 하이드레이션 결합하기

리액트 서버 컴포넌트의 진정한 힘은 스트리밍과 선택적 하이드레이션을 결합하는 데 있습니다. 초기 HTML을 스트리밍하고 상호작용 컴포넌트만 선택적으로 하이드레이션함으로써 상당한 성능 향상을 달성하고 진정으로 반응성 좋은 사용자 경험을 만들 수 있습니다.

여러 위젯이 있는 대시보드 애플리케이션을 상상해 보세요. 스트리밍을 사용하면 대시보드의 기본 레이아웃을 즉시 렌더링하여 클라이언트로 보낼 수 있습니다. 서버가 각 위젯의 데이터를 가져오면 렌더링된 HTML을 클라이언트로 스트리밍하고, 클라이언트는 차트 및 데이터 테이블과 같은 상호작용 위젯만 선택적으로 하이드레이션합니다. 이를 통해 사용자는 모든 위젯이 로드되고 하이드레이션되기를 기다리지 않고 훨씬 빨리 대시보드와 상호작용을 시작할 수 있습니다.

Next.js를 사용한 실제 구현

Next.js는 리액트 서버 컴포넌트, 스트리밍, 선택적 하이드레이션을 내장 지원하는 인기 있는 리액트 프레임워크로, 이러한 기술들을 프로젝트에 더 쉽게 구현할 수 있도록 해줍니다. Next.js 13 및 이후 버전은 RSC를 핵심 기능으로 채택했습니다.

Next.js에서 서버 컴포넌트 생성하기:

기본적으로 Next.js 프로젝트의 app 디렉토리에 있는 컴포넌트들은 서버 컴포넌트로 취급됩니다. 특별한 지시어나 어노테이션을 추가할 필요가 없습니다. 다음은 예시입니다:

            // app/components/MyServerComponent.js
import { getData } from './data';

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

이 예시에서 MyServerComponent는 getData 함수를 사용하여 서버에서 직접 데이터를 가져옵니다. 이 컴포넌트는 서버에서 렌더링되고, 결과 HTML이 클라이언트로 전송됩니다.

Next.js에서 클라이언트 컴포넌트 생성하기:

클라이언트 컴포넌트를 생성하려면 파일 상단에 "use client" 지시어를 추가해야 합니다. 이는 Next.js에게 해당 컴포넌트를 클라이언트에서 렌더링하도록 지시합니다. 클라이언트 컴по넌트는 브라우저 특정 API를 사용하고 사용자 상호작용을 처리할 수 있습니다.

            // app/components/MyClientComponent.js
"use client";

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

            

              
                Copy
              
            
          

이 예시에서 MyClientComponent는 useState 훅을 사용하여 컴포넌트의 상태를 관리합니다. 이 컴포넌트는 클라이언트에서 렌더링되며, 사용자는 이와 상호작용할 수 있습니다.

서버 및 클라이언트 컴포넌트 혼합하기:

Next.js 애플리케이션에서 서버 컴포넌트와 클라이언트 컴포넌트를 혼합할 수 있습니다. 서버 컴포넌트는 클라이언트 컴포넌트를 가져와 렌더링할 수 있지만, 클라이언트 컴포넌트는 서버 컴포넌트를 직접 가져올 수 없습니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 데이터를 전달하려면 props로 전달할 수 있습니다.

            // app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

async function Page() {
  return (
    <div>
      <MyServerComponent />
      <MyClientComponent />
    </div>
  );
}

export default Page;

            

              
                Copy
              
            
          

이 예시에서 Page 컴포넌트는 MyServerComponent와 MyClientComponent를 모두 렌더링하는 서버 컴포넌트입니다.

서버 컴포넌트에서 데이터 페칭하기:

서버 컴포넌트는 클라이언트의 API 호출 없이 백엔드 리소스에 직접 접근할 수 있습니다. async/await 구문을 사용하여 컴포넌트 내에서 직접 데이터를 가져올 수 있습니다.

            // app/components/MyServerComponent.js

async function getData() {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

이 예시에서 getData 함수는 외부 API에서 데이터를 가져옵니다. MyServerComponent는 getData 함수의 결과를 기다렸다가 UI에 데이터를 렌더링합니다.

실제 예시 및 사용 사례

리액트 서버 컴포넌트, 스트리밍, 선택적 하이드레이션은 다음과 같은 유형의 애플리케이션에 특히 적합합니다:

• 전자상거래 웹사이트: 상품 페이지, 카테고리 페이지, 쇼핑 카트는 더 빠른 초기 페이지 로드와 향상된 성능의 이점을 누릴 수 있습니다.
• 콘텐츠 중심 웹사이트: 블로그, 뉴스 웹사이트, 문서 사이트는 스트리밍을 활용하여 콘텐츠를 더 빨리 전달하고 SEO를 개선할 수 있습니다.
• 대시보드 및 관리자 패널: 여러 위젯이 있는 복잡한 대시보드는 선택적 하이드레이션을 통해 클라이언트 사이드 자바스크립트를 줄이고 상호작용성을 향상시킬 수 있습니다.
• 소셜 미디어 플랫폼: 피드, 프로필, 타임라인은 스트리밍을 사용하여 콘텐츠를 점진적으로 전달하고 사용자 경험을 개선할 수 있습니다.

예시 1: 글로벌 전자상거래 웹사이트

전 세계적으로 상품을 판매하는 전자상거래 웹사이트는 RSC를 사용하여 사용자의 위치에 따라 데이터베이스에서 직접 상품 상세 정보를 가져올 수 있습니다. 페이지의 정적인 부분(상품 설명, 이미지)은 서버에서 렌더링되고, 상호작용 요소(장바구니 담기 버튼, 수량 선택기)는 클라이언트에서 하이드레이션됩니다. 스트리밍은 사용자가 기본 상품 정보를 신속하게 볼 수 있도록 보장하며, 나머지 콘텐츠는 백그라운드에서 로드됩니다.

예시 2: 글로벌 뉴스 플랫폼

전 세계 잠재고객을 대상으로 하는 뉴스 플랫폼은 RSC를 사용하여 사용자의 언어와 지역에 따라 다른 소스에서 뉴스 기사를 가져올 수 있습니다. 스트리밍을 통해 웹사이트는 초기 페이지 레이아웃과 헤드라인을 신속하게 전달하고, 전체 기사는 백그라운드에서 로드됩니다. 선택적 하이드레이션은 댓글 섹션 및 소셜 공유 버튼과 같은 상호작용 요소를 하이드레이션하는 데 사용될 수 있습니다.

리액트 서버 컴포넌트 사용을 위한 모범 사례

리액트 서버 컴포넌트, 스트리밍, 선택적 하이드레이션을 최대한 활용하려면 다음과 같은 모범 사례를 고려하세요:

• 서버 및 클라이언트 컴포넌트 식별: 애플리케이션을 신중하게 분석하여 어떤 컴포넌트가 서버에서 렌더링될 수 있고 어떤 컴포넌트가 클라이언트에서 렌더링되어야 하는지 결정하세요.
• 데이터 페칭 최적화: 효율적인 데이터 페칭 기술을 사용하여 서버에서 클라이언트로 전송되는 데이터의 양을 최소화하세요.
• 캐싱 활용: 캐싱 전략을 구현하여 서버의 부하를 줄이고 성능을 향상시키세요.
• 성능 모니터링: 성능 모니터링 도구를 사용하여 성능 병목 현상을 식별하고 해결하세요.
• 점진적 향상: 자바스크립트가 비활성화된 경우에도 작동하도록 애플리케이션을 설계하여 모든 사용자에게 기본적인 수준의 기능을 제공하세요.

과제 및 고려사항

리액트 서버 컴포넌트는 상당한 이점을 제공하지만, 명심해야 할 몇 가지 과제와 고려사항도 있습니다:

• 복잡성: RSC를 구현하면 애플리케이션에 복잡성이 추가될 수 있으며, 특히 서버 사이드 렌더링 및 스트리밍에 익숙하지 않은 경우 더욱 그렇습니다.
• 디버깅: RSC 디버깅은 서버와 클라이언트를 모두 고려해야 하므로 전통적인 클라이언트 사이드 컴포넌트 디버깅보다 더 어려울 수 있습니다.
• 도구: RSC 관련 도구는 아직 발전 중이므로 몇 가지 제한 사항이나 문제에 직면할 수 있습니다.
• 학습 곡선: RSC를 효과적으로 이해하고 구현하는 데에는 학습 곡선이 있습니다.

결론

리액트 서버 컴포넌트, 스트리밍, 선택적 하이드레이션은 웹 개발의 중요한 발전을 나타냅니다. 컴포넌트 렌더링을 서버로 옮김으로써 이러한 기술들은 더 빠른 초기 페이지 로드, 감소된 클라이언트 사이드 자바스크립트, 향상된 SEO를 가능하게 합니다. 명심해야 할 몇 가지 과제와 고려사항이 있지만, RSC의 이점은 부인할 수 없으며, 리액트 생태계의 표준적인 부분이 될 가능성이 높습니다. 이러한 기술들을 수용함으로써 더 빠르고, 더 효율적이며, 더 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다.

추가 자료

• React 18 공식 발표
• Next.js 앱 라우터 문서
• 리액트 서버 컴포넌트 - Patterns.dev