Next 13 서버 컴포넌트와 클라이언트 컴포넌트 SSR 차이점

Next.js 13 버전 이전에는 Page 폴더 내에서 라우팅을 하였습니다.

하지만 13 버전 이후에는 App 폴더 내에서 라우팅을 할 수 있는 새로운 개념이 생겼습니다.

 

Next13에서 앱 라우터는 컴포넌트 단위로 Hydration이 가능할 수 있도록 변경되었습니다.

Hydration이란?

Next.js에서 미리 렌더링 된 HTML에 이벤트 리스너를 연결하고, 사용자와 상호 작용할 수 있도록 합니다.

 

서버 컴포넌트

Next13 버전에서는 기본적으로 서버 컴포넌트로 사용됩니다.

장점

• 데이터 페치
• 보안
• 캐시
• 자바스크립트 번들 감소

서버에서 바로 데이터에 접근하기 때문에 빠르고, 한번 조회한 데이터는 캐시로 가지고 있어서 성능이 우수합니다.

그리고 민감한 정보들을 클라이언트에서 볼 수 없어서 더욱 안전합니다.

 

서버 컴포넌트 관련된 자바스크립트 파일을 bundle.js로 전달하지 않아도 돼서 번들 크기가 감소합니다.

 

클라이언트 컴포넌트

서버 컴포넌트의 장점이 많지만,

useEffect, useState와 같은 React 훅을 사용하거나, 이벤트 리스너를 등록하기 위해서는 클라이언트 컴포넌트를 사용해야 합니다.

클라이언트 컴포넌트는 use Client;라고 상단에 표시를 해줘야 합니다.

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

export default const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

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

클라이언트 컴포넌트 내에서는 서버 컴포넌트를 사용하지 못합니다.

그래서 컴포넌트 트리 구조에서 최대한 아래에 클라이언트 컴포넌트를 만드는 것이 좋습니다.

 

Server Side Rendering VS Server Component

상호 보완적인 개념입니다.

 

SSR은 서버에서 렌더링 된 HTML을 가져옵니다.

 

하지만 Next.js 에서는 HTML이 아닌 렌더링 할 트리 객체를 가져옵니다.

트리 객체는 서버 컴포넌트, 클라이언트 컴포넌트로 구성되어 있습니다.

 

트리 객체를 보고 DOM을 업데이트하게 됩니다.