SSR, React Server Components(RSC), Client Components

 

 

 

Next.js 

 

Server-Side Rendering (SSR)

 

**Server-Side Rendering (SSR)**는 페이지를 서버에서 렌더링하고, 완전히 렌더링된 HTML을 클라이언트로 보내는 방법입니다. 클라이언트는 초기 렌더링을 기다릴 필요가 없으며, 즉시 사용자에게 완전한 페이지를 제공합니다. Next.js는 기본적으로 SSR을 지원합니다.

특징:

초기 로드 속도: 서버에서 렌더링된 HTML을 전송하므로 초기 로드 속도가 빠릅니다.
SEO 친화적: 검색 엔진이 완전한 HTML을 크롤링할 수 있어 SEO에 유리합니다.
데이터 보안: 데이터가 서버에서만 렌더링되므로 보안이 강화됩니다.

 

 

 

React Server Components

 

React Server Components는 React에서 새로운 기능으로, 서버에서 React 컴포넌트를 렌더링하고 이를 클라이언트로 전송하는 방식입니다. 이 방식은 서버에서 컴포넌트를 렌더링하여 클라이언트로 보내므로, 클라이언트에서의 초기 로딩 시간을 줄이고 서버 리소스를 효율적으로 사용할 수 있습니다.

 

특징:

서버에서만 사용: 컴포넌트가 서버에서만 실행되고, 클라이언트에 전송된 후에는 클라이언트에서 다시 렌더링되지 않습니다.
데이터 페칭 최적화: 서버에서 데이터 페칭이 이루어지므로, 클라이언트에서의 네트워크 요청을 줄일 수 있습니다.
SEO 및 퍼포먼스 향상: 서버에서 렌더링된 HTML을 클라이언트로 보내기 때문에 SEO와 초기 로드 성능이 향상됩니다.

사용 예:

// server component
export default function ServerComponent() {
  const data = fetchDataFromAPI();
  return (
    <div>
      <h1>Data from Server Component</h1>
      <p>{data}</p>
    </div>
  );
}

 

 

 

 

 

 

React Client Components

React Client Components는 일반적인 React 컴포넌트로, 브라우저에서 렌더링되는 컴포넌트입니다. 대부분의 React 애플리케이션은 클라이언트 컴포넌트로 구성됩니다.

 

특징:

브라우저에서 실행: 컴포넌트가 브라우저에서 실행되므로, 사용자 인터랙션에 실시간으로 반응할 수 있습니다.
상태 관리: 클라이언트에서 상태를 관리하고, 사용자 인터랙션에 따라 UI를 동적으로 업데이트할 수 있습니다.
라이브러리 및 API 사용: 브라우저 환경에서 다양한 라이브러리와 API를 사용할 수 있습니다.

사용 예:

// client component

'use Client'
import { useState } from 'react';

const ClientComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Client Component</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default ClientComponent;

 

 

 

 

 

비교 요약

Next.js SSR: 서버에서 페이지를 렌더링하여 완전한 HTML을 클라이언트에 전송, 초기 로드 속도와 SEO가 좋음.
React Server Components: 서버에서 컴포넌트를 렌더링하여 클라이언트로 전송, 데이터 페칭 최적화와 퍼포먼스 향상.
React Client Components: 브라우저에서 렌더링되는 컴포넌트, 사용자 인터랙션 및 상태 관리에 적합.