Next.js - Server Component/ Client Components

 

 

**v12가 아닌 v13을 선택한 이유

- v12에서는 페이지 단위로 서버/클라이언트를 구분했는데, 앱이 복잡해질수록 필요한 클라이언트 소스코드가 많아지니 결국 사용자에게 필요한 JS 번들링이 커지고, 앱의 성능면에도 영향을 준다.

- 이번 프로젝트에서는 실시간 데이터를 가져오는 오픈 API 사용 + 사용자가 글을 자주 올리는 커뮤니티 + 레이아웃 등의 각각 성격이 매우 다른 컴포넌트들이 한 페이지에 동시에 존재하는 경우가 있다.

- 기존 v12의 페이지 단위 렌더링 방식보다는 컴포넌트 단위로 다른 렌더링방식을 가지는 v13이 더 최적화에 도움이 될 것이라고 생각한다.

 

 

1. Server Components vs Client Components

- Server Components

v13에 도입된 app 폴더 내의 모든 컴포넌트들은 server components이다. 따라서 별도로 설정하지 않는이상 모두 서버에서 실행된다.

 

브라우저에는 컴포넌트가 실행된 이후의 pre-rendered 된 HTML 파일이 전송된다. 따라서 서버 컴포넌트 내에서 console.log("hi")를 찍어보면 브라우저가 아닌 terminal에서 확인할 수 있다. 

 

또한 브라우저에서 제공하는 API는 사용할 수 없는 대신 노드 환경에서 제공하는 노드 API는 사용할 수 있다. 즉 노드처럼 사용할 수 있으나 localStorage 접근이나 사용자 이벤트 처리, 상태 관련 코드(useState), 마운트 관련 코드(useEffect) 등은 서버 컴포넌트에서 불가능하다.

 

 

- Client Components

컴포넌트 맨 위 "use client"로 client component 선언

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>
        숫자 증가시키기
      </button>
    </div>
  );
}

 

 

 

 

2. Why server components? 

https://nextjs.org/docs/getting-started/react-essentials#why-server-components

Getting Started: React Essentials | Next.js

 

build 때 client component가 왜 실행됬을까?

build 후 yarn start로 실행해보면 메인페이지에 처음으로 받아오는 html에 client component도 포함되어 같이 실행된 것을 볼 수 있다.

 

 

와이?

 

클라이언트 컴포넌트는 무조건 클라이언트 사이드 (브라우저)에서만 실행된다는 것은 아니다. 클라이언트 컴포넌트에서 보여줄 수 있는 정적인 요소를 찾고, 그 정적인 요소는 html과 함께 서버에서 가져온다. 그러나 숫자 증가시키기 버튼은 동작하지 않는다.

 

동작하게 하려면 Hydration 이 일어나게 하면 된다. Hydration 이후 이벤트 처리 interaction이 가능하다.

 

 

yarn start 후

- 서버 컴포넌트 : 서버에서 실행된 이후 상태로 로드 됨 (html)

- 클라이언트 컴포넌트 : 클라이언트 컴포넌트를 위한 부분적인 코드만 html 로드 후 추가적으로 보내준다. 그리고 나서 이벤트를 처리할 수 있다.

 

따라서 html 로드 후 다운로드되는 Client component의 interaction을 위한 JS 번들의 크기를 줄일 수 있으며 서버 컴포넌트는 서버에서 모두 실행되므로 브라우저에 보내줄 필요가 없다. => 성능 굳