8. React Server Components

React Server Component(RSC) 는 React 팀에 의해서 디자인된 새로운 아키텍처로,

이 접근 방식은 서버와 클라이언트 환경 각자의 강점을 활용하여 효율성, 로딩 시간, 인터랙션을 최적화하는 것을 목표로 함

이 아키텍처는 두 가지의 컴포넌트 모델을 소개함

Client Components
Server Components

이러한 구분은 컴포넌트의 기능적인 측면이 아닌,
컴포넌트가 실행되는 위치와 해당 컴포넌트가 사용자와 인터랙션이 가능한지의 여부를 기준으로 함

1. Client Component

Client Component는 기존에 사용하던 리액트 컴포넌트와 같다고 볼 수 있음 따라서 사용자와 인터랙션이 필요한 컴포넌트들을 제작할 때 사용

Client Component는 기본적으로 클라이언트 쪽에서 렌더링(CSR) 되지만, 필요에 따라 최적화를 위해 서버에서 사전 렌더링(Pre-rendering)되기도 함(SSR)

→ 왜냐하면 초기 로딩 페이지로 빈 화면보단 Static HTML 페이지라도 보여줘야 하기 때문에 주로 클라이언트에서 실행되지만 최적화를 위해 서버에서 먼저 한 번 실행될 수 있음

이러한 Client Component는 사용자와 상호작용 하기 위해 브라우저나 useState, useEffect, 이벤트 리스너와 같은 클라이언트 환경에 접근할 수 있음

또한 browser-exclusive(브라우저 독점적인) API인 geolocation이나 LocalStorage와 같은 API에도 접근할 수 있고, 사용 상황에 따른 UI를 빌드할 때도 사용할 수 있음

즉, 클라이언트 컴포넌트는 새롭게 등장한 개념은 아님

1-1. Client Component 사용 방법

컴포넌트의 상단에 ‘use client’라고 명시하여 해당 컴포넌트가 Client Component로 동작할 수 있도록 지정

Counter.jsx


'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

2. Server Component

Server Component는 새로운 타입의 리액트 컴포넌트로 서버에서만 동작하도록 설계되었음

Client Component와는 다르게 해당 컴포넌트 코드는 서버에 머물러 있고, 클라이언트에서 절대 다운로드 되지 않음

이러한 설계는 리액트 애플리케이션에 다양한 이점들을 제공하게 되었음

React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering,

Server Component는 서버에서 렌더링되고, 선택적으로 캐시되도록 할 수 있는 UI를 작성할 수 있도록 해줌

Next.js에서 렌더링 작업은 스트리밍과 부분 렌더링을 가능하게 하기 위해 라우트 세그먼트별로 더 분할됨