Server and Client Components

[원문]

서버 및 클라이언트 구성 요소의 작동 방식을 이해하려면 두 가지 기본 웹 개념을 익히는 것이 도움이 됩니다.

  • 애플리케이션 코드가 실행될 수 있는 환경은 서버와 클라이언트입니다.
  • 서버와 클라이언트 코드를 구분하는 네트워크 경계입니다.

Server and Client Environments

웹 애플리케이션의 맥락에서:

  • 클라이언트는 애플리케이션 코드에 대한 요청을 서버에 보내는 사용자 장치의 브라우저를 의미합니다. 그런 다음 서버로부터 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 바꿉니다.
  • 서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 계산을 수행하고 적절한 응답을 다시 보내는 데이터 센터의 컴퓨터를 의미합니다.

각 환경에는 고유한 기능 및 제약 조건이 있습니다. 예를 들어 렌더링 및 데이터 가져오기를 서버로 이동하면 클라이언트로 전송되는 코드의 양을 줄여 애플리케이션 성능을 향상시킬 수 있습니다. 그러나 앞서 배운 것처럼 UI를 대화형으로 만들려면 클라이언트에서 DOM을 업데이트해야 합니다.

따라서 서버와 클라이언트에 대해 작성하는 코드가 항상 동일하지는 않습니다. 특정 작업(예: 데이터 가져오기 또는 사용자 상태 관리)은 다른 환경보다 한 환경에 더 적합합니다.

Network Boundary

네트워크 경계는 서로 다른 환경을 구분하는 개념적 선입니다.

React에서는 컴포넌트 트리에서 네트워크 경계를 배치할 위치를 선택합니다. 예를 들어 서버에서 데이터를 가져오고 사용자의 게시물을 렌더링한 다음(서버 구성 요소 사용) 클라이언트의 각 게시물에 대해 대화형 LikeButton을 렌더링할 수 있습니다(클라이언트 구성 요소 사용).

마찬가지로 서버에서 렌더링되고 페이지 전체에서 공유되는 Nav 구성 요소를 만들 수 있지만 링크에 대한 활성 상태를 표시하려는 경우 클라이언트에서 링크 목록을 렌더링할 수 있습니다.

구성 요소는 두 개의 모듈 그래프로 분할됩니다. 서버 모듈 그래프(또는 트리)에는 서버에서 렌더링되는 모든 서버 구성 요소가 포함되고, 클라이언트 모듈 그래프(또는 트리)에는 모든 클라이언트 구성 요소가 포함됩니다.

서버 구성 요소가 렌더링된 후 React Server Component Payload(RSC)라는 특수 데이터 형식이 클라이언트로 전송됩니다. RSC 페이로드에는 다음이 포함됩니다.

  1. 서버 구성 요소의 렌더링된 결과입니다.
  2. 클라이언트 구성 요소를 렌더링해야 하는 위치에 대한 Placeholders(or holes) 및 해당 JavaScript 파일에 대한 참조입니다.

React는 이 정보를 사용하여 서버와 클라이언트 구성 요소를 통합하고 클라이언트의 DOM을 업데이트합니다. 이것이 어떻게 작동하는지 봅시다.

Using Client Components

지난 장에서 배운 것처럼 Next.js는 기본적으로 서버 구성 요소를 사용합니다. 이는 애플리케이션의 성능을 향상하기 위한 것이며 이를 채택하기 위해 추가 단계를 수행할 필요가 없음을 의미합니다.

브라우저의 오류를 되돌아보면 Next.js는 서버 구성 요소 내에서 useState를 시도하고 있음을 경고합니다. 대화형 “좋아요” 버튼을 클라이언트 구성 요소로 이동하여 이 문제를 해결할 수 있습니다.

LikeButton 구성 요소를 내보내는 앱 폴더 내에 like-button.js라는 새 파일을 만듭니다.

/app/like-button.js
export default function LikeButton() {}

<button> 요소와 handlerClick() 함수를 page.js에서 새 LikeButton component로 이동합니다.

/app/like-button.js
export default function LikeButton() {
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

다음으로 likes 상태와 가져오기를 이동합니다.

/app/like-button.js
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

이제 LikeButton을 클라이언트 구성 요소로 만들려면 파일 상단에 React 'use client' 지시어를 추가하세요. 이는 React에게 클라이언트에서 구성 요소를 렌더링하도록 지시합니다.

/app/like-button.js
'use client';
 
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

page.js 파일로 돌아가서 LikeButton 구성 요소를 페이지로 가져옵니다.

/app/page.js
import LikeButton from './like-button';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <LikeButton />
    </div>
  );
}

두 파일을 모두 저장하고 브라우저에서 앱을 봅니다. 이제 오류가 없으므로 변경하고 저장하면 변경 사항을 반영하기 위해 브라우저가 자동으로 업데이트되는 것을 볼 수 있습니다.

이 기능을 빠른 새로 고침이라고 합니다. 이는 모든 편집 내용에 대한 즉각적인 피드백을 제공하며 Next.js로 사전 구성되어 제공됩니다.

Summary

요약하자면, 서버 및 클라이언트 환경과 각각의 사용 시기를 배웠습니다. 또한 Next.js는 성능 향상을 위해 기본적으로 React Server 구성 요소를 사용하고 UI 대화형의 작은 부분에 클라이언트 구성 요소를 선택할 수 있는 방법도 배웠습니다.

Additional Reading

There’s a lot more to learn about Server and Client Components. Here are some additional resources: