[Next.js] Server Component & Client Component

[공식문서]

Rendering: Fundamentals | Next.js

 

13 버전부터는 컴포넌트 단위(server/client)로 렌더링 방식을 규정한다

 

 

Server Component

: 서버에서 빌드가 될 때 실행이 되는 컴포넌트

app 폴더에 있는 모든 컴포넌트는 기본적으로 server 컴포넌트이다

서버 상에서는 '안녕'이라는 로그가 보이지만,

브라우저의 콘솔에는 아무것도 찍히지 않는 것을 볼 수 있다.

 

외글얼까?..

1. 서버 컴포넌트는 서버에서 실행이 된다.

2. 코드는 서버에서 실행이되어서 pre-rendering 된 HTML 형태로 브라우저에게 전달된다.

=> console.log는 브라우저에서 실행이 되지 않는다! 

 

서버에서 동작하기 때문에 서버 컴포넌트 내에서 사용할 수 있는 코드는

브라우저에서 제공하는 API는 사용할 수 없지만, 노드 환경에서 제공하는 API는 사용가능

그렇다면,

-> 서버상에 있는 file 시스템에 접근 가능? YES.

-> 서버상에 있는 파일을 읽고 쓸 수 있다? YES..!

-> 서버상에있는 데이터 입출력을 할 수 있다? YES!!

 

서버에서 실행이 되는 서버 컴포넌트에서는 상태를 관리할 수 없다 . 그럼 어떻게 해야할까?

 

 

Client Component

컴포넌트를 하나 만들고 'use client'로 클라이언트 컴포넌트임을 명시해주자.

'use client';

'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>
  );
}

 

Counter 만들기 예제

'use client'

import { useState } from "react";

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

카운터의 상태가 바로 반영되는 것을 확인할 수 있다.

 

어떻게 동작하는 걸까?

브라우저의 개발툴을 열어서 reload 해보면,

처음으로 받은 정적인 HTML을 확인해보면 클라이언트 컴포넌트도 포함 되어있다.

 

클라이언트 컴포넌트는 클라이언트 측에서 렌더링 되는 것이 아니라,

사용자의 클릭을 처리하는 것과 같이 브라우저에서 실행되어야하는 코드를 클라이언트 컴포넌트라고 한다.

=> 이 때 필요한 것이 Hydration!! (= 정적인 HTML에 리액트 컴포넌트를 채워 넣는 것)

 

 

[정리]

client component라고 해서 client side에서만 렌더링 되는 것이 아니라, Next.js에서 자동으로 가능한 모든 컴포넌트를 정적인 HTML로 만들어 제공한다. 그 이후에는 Client component에 필요한 코드만 Hydration!

=> 최종적으로 번들링되는 client-side javascript 크기가 작아진다 (성능 개선) 

 

 

[각각 필요한 경우]

 

 

 

 

 

편지 읽고 울컥하는거 참았다. 나는 20대 후반이니까,,

아침에 교육장으로 데려다주는 서비스까지 완벽한 하루,,  더 좋은 사람이 되어야겠다고 다짐하게 해주는 사람들!