5차 강의 노트 (앱라우터)

리액트 서버 컴포넌트(React Server Components)의 이해와 활용

리액트 서버 컴포넌트(RSC)는 애플리케이션의 성능을 향상시키고 복잡성을 줄이기 위해 등장한 새로운 패러다임입니다.

기존의 클라이언트 컴포넌트와는 달리 서버에서만 렌더링되고 실행되며, 브라우저에 불필요한 자바스크립트를 전송하지 않아 초기 로딩 속도를 크게 개선합니다.

---

서버 컴포넌트란?

서버 컴포넌트는 서버 측에서만 실행되는 컴포넌트입니다.

이 컴포넌트들은 브라우저에서는 실행되지 않기 때문에 useEffect, useState와 같은 클라이언트 측 훅(hook)이나 브라우저 API를 사용할 수 없습니다.

페이지의 대부분을 서버 컴포넌트로 구성하는 것이 권장되며, 이는 초기 로딩 시간을 단축하고 서버 자원을 효율적으로 사용하게 합니다.

서버 컴포넌트가 렌더링되면 결과물은 RSC Payload라는 형태로 직렬화되어 클라이언트로 전송됩니다.

이 페이로드에는 컴포넌트의 구조와 데이터만 포함되며, 불필요한 자바스크립트가 없기 때문에 초기 로딩 성능이 향상됩니다.

---

클라이언트 컴포넌트란?

클라이언트 컴포넌트는 기존의 리액트 컴포넌트와 유사합니다.

브라우저에서 상호작용이 필요한 경우에 사용되며, useState나 onClick과 같은 이벤트 핸들러를 포함할 수 있습니다.

예를 들어, 실시간 입력값을 처리하는 서치바 컴포넌트는 클라이언트 컴포넌트로 만들어야 합니다.

클라이언트 컴포넌트를 사용하기 위해서는 파일 최상단에 "use client";를 명시해야 합니다.

클라이언트 컴포넌트는 서버에서 한번 사전 렌더링된 후, 브라우저에서 다시 하이드레이션(Hydration)을 위해 실행되는 두 번의 실행 과정을 거칩니다.

---

서버 vs. 클라이언트 컴포넌트 선택 기준

두 컴포넌트를 구분하는 가장 중요한 기준은 상호작용성입니다.

• 서버 컴포넌트: 상호작용이 필요 없는 정적인 콘텐츠나 데이터 표시용 컴포넌트.
• 클라이언트 컴포넌트: 사용자 입력, 상태 관리, 이벤트 처리 등 상호작용이 필요한 컴포넌트.

⚠️ 주의사항

• 서버 컴포넌트는 브라우저에서 실행될 코드를 포함할 수 없습니다. (useState, useEffect, onClick 등)
• 클라이언트 컴포넌트에서 서버 컴포넌트를 직접 import할 수 없습니다. 만약 서버 컴포넌트를 클라이언트 컴포넌트 내에서 사용하고 싶다면, 서버 컴포넌트를 클라이언트 컴포넌트의 자식(Children) 컴포넌트로 전달하는 방식으로 사용해야 합니다.
• 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화되지 않는 Props(예: 함수)를 직접 전달할 수 없습니다.

import ClientComponent from "../components/client-component";
import ServerComponent from "../components/server-component";

export default function Home() {
  console.log("home 컴포넌트 실행")

  return (
    <div>
      인덱스 페이지
      <ClientComponent>
        <ServerComponent />
      </ClientComponent>
    </div>
  );
}

 

💡
서버 컴포넌트는 RSC 페이로드로, 클라이언트 컴포넌트는 자바스크립트 번들로 나뉘어서 동시에 전달이 된다

 

앱 라우터에선 useRouter 를 사용해서 쿼리스트링을 꺼내올 수 없다.
useSearchParams 훅을 사용해서 쿼리스트링을 꺼내와야 한다

import { useRouter, useSearchParams } from "next/navigation";

export default function Searchbar() {

  const searchParams = useSearchParams();
  const q = searchParams.get("q");

}

 

 

이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

https://inf.run/4oB9v