Next.js 13과 리액트 서버 컴포넌트

App Router의 등장

Next.js가 13버전으로 올라오면서, App Router 방식이 등장하게 되었다. App Router가 처음 등장했을 때에는 beta 버전이다 보니 production에서는 사용이 권장되지는 않았었다. Next.js가 13.4 버전으로 업데이트되면서, App Router 방식도 stable 버전으로 바뀌어서 이에 대해 살펴보고자 한다.

먼저, App Router 방식의 가장 큰 변경점은, 기본적으로 모든 컴포넌트가 서버 컴포넌트가 된다는 것이다. 그러므로, 서버 컴포넌트 대신 클라이언트 컴포넌트로 사용하려면, use client를 파일 최상단(import 구문보다 위)에 작성해야 한다.

• use client 예시

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

서버 컴포넌트와 클라이언트 컴포넌트

리액트 서버 컴포넌트는 리액트 18버전부터 도입되었다. 서버 컴포넌트는 서버에서 렌더링되고, 클라이언트 컴포넌트는 클라이언트에서 렌더링된다는 점이 둘의 가장 큰 차이점이다.

그렇다면, 언제 서버 컴포넌트를 쓰고, 언제 클라이언트 컴포넌트를 써야 할까?

Next.js의 공식 문서에 나와있는 표를 살펴보자.

출처: Next.js 공식 문서

정리하면, 서버에서 처리가 필요한 경우에는 서버 컴포넌트를, 브라우저에서 처리 해야 하는 경우에는 클라이언트 컴포넌트를 사용해야 함을 알 수 있다.

클라이언트 및 서버 컴포넌트 구성

클라이언트 컴포넌트와 서버 컴포넌트는 동일한 구성 요소 트리에서 결합될 수 있다.

1. 서버에서, React는 클라이언트로 결과를 보내기 전에, 모든 서버 컴포넌트를 렌더링합니다.

• 여기에는 클라이언트 구성 요소 내에 중첩된 서버 구성 요소가 포함됩니다.
• 이 단계에서 발생한 클라이언트 구성 요소는 건너뜁니다.

2. 클라이언트에서 React는 서버 구성 요소의 렌더링된 결과에서 클라이언트 구성 요소와 슬롯을 렌더링하여 서버와 클라이언트에서 수행된 작업을 병합합니다.

• 서버 구성 요소가 클라이언트 구성 요소 내에 중첩된 경우 렌더링된 콘텐츠는 클라이언트 구성 요소 내에 올바르게 배치됩니다.

서버 컴포넌트를 클라이언트 컴포넌트의 구성 요소로 가져오는 경우, 서버 컴포넌트를 클라이언트 컴포넌트 안에서 import해서 사용할 수는 없습니다. 대신 클라이언트 구성 요소를 디자인할 때 React props를 사용하여 서버 구성 요소의 “슬롯”을 표시할 수 있습니다. 서버 컴포넌트는 서버에서 렌더링되고 클라이언트 컴포넌트가 클라이언트에서 렌더링될 때 “슬롯”은 서버 컴포넌트의 렌더링된 결과로 채워집니다. 일반적인 패턴은 React prop을 사용하여 “슬롯”을 children으로 만드는 것 입니다.

전체 레이아웃을 클라이언트 컴포넌트로 만드는 대신에, 상호 작용이 필요한 로직만 클라이언트 컴포넌트에 구현하고,레이아웃은 서버 컴포넌트로 구현한다. 이렇게 하면, 클라이언트에 보내야 하는 자바스크립트의 양이 감소하기 때문에 애플리케이션의 성능 개선으로 이어질 수 있다.

참조

• Next) 서버 컴포넌트(React Server Component)에 대한 고찰
• Next 공식 문서