Next.js 10-1 React Essentials

  Next.js로 앱을 구축하려면 Server Components와 같은 React의 최신 기능에 익숙해지는 것이 도움이 된다. 여기에서는 Server Component와 Client Component의 차이점, 사용 시기와 권장 패턴을 살펴보고자 한다.

 

• Server Component

  서버 및 클라이언트 컴포넌트를 사용하면 개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 구축하여 클라이언트 측 앱의 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 결합할 수 있다.

  React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지 React Server Components를 통해 알 수 있는데, React Server Components는 서버와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위한 새로운 정신 모델을 도입했다.

  React는 전체 앱 클라이언트 측(예: 단일 페이지 애플리케이션의 경우)을 렌더링 하는 대신 이제 용도에 따라 컴포넌트를 렌더링 할 위치를 선택할 수 있는 유연성을 제공한다.

  페이지를 더 작은 컴포넌트로 분할하면 대부분의 컴포넌트가 비대화형이기 때문에 서버 컴포넌트로 서버에서 렌더링 될 수 있음을 알 수 있다. 더 작은 대화형 UI의 경우 클라이언트 컴포넌트에 뿌릴 수 있다. 이것은 Next.js 서버 우선 접근 방식과 일치한다.

• 왜 서버 컴포넌트를 사용할까?

  서버 컴포넌트를 통해 개발자는 서버 인프라를 더 잘 활용할 수 있다. 예를 들어 이전에는 클라이언트의 자바스크립트 번들 크기에 영향을 미쳤던 큰 종속성이 클라이언트 대신 서버에서 가지고 있음으로 성능이 향상될 수도 있다. React 애플리케이션 작성이 PHP 또는 Ruby on Rails와 유사하게 느껴지지만 React의 강력함과 유연성, 템플릿 UI를 위한 컴포넌트 모델이 있다.

  서버 컴포넌트를 사용하면 또 초기 페이지 로드가 빨라지고 클라이언트 측 JavaScript 번들 크기가 줄어든다. 기본 클라이언트 측 런타임은 캐시 가능하고 크기를 예측할 수 있으며, 애플리케이션이 커져도 증가하지 않는다. 추가 JavaScript의 경우에는 클라이언트 컴포넌트를 통해 애플리케이션에서 클라이언트 측 상호 작용이 사용되는 경우에만 추가된다.

  경로가 Next.js로 로드되면 초기 HTML이 서버에서 렌더링 된다. 그런 다음 이 HTML은 브라우저에서 점진적으로 향상되어 클라이언트가 NExt.js 및 React 클라이언트 측 런타임을 비동기식으로 로드하여 애플리케이션을 인계하고 상호 작용을 추가할 수 있다.

  Next.js는 서버 컴포넌트의 전환을 더 쉽게 하기 위해 앱 라우터 내부의 모든 컴포넌트를 특수 파일 및 공동 배치 컴포넌트를 포함한 기본적인 서버 컴포넌트로 구성되어 있다. 이를 통해 추가 작업 없이 자동으로 채택하고 즉시 사용할 수 있는 뛰어난 성능을 얻을 수 있다. 선택적으로 'use client' 지시문을 사용하여 클라이언트 컴포넌트에 옵트인 할 수도 있다.

 

• Client Component

  클라이언트 컴포넌트를 사용하면 응용 프로그램에 클라이언트 측 상호 작용을 추가할 수 있다. Next.js에서는 서버에서 사전 렌더링되고 클라이언트에서 상호작용된다. 페이지 라우터의 컴포넌트가 항상 작동하는 방식으로 클라이언트 컴포넌트를 생각할 수도 있다.

• 'use client'

  지시문 'use client'는 서버와 클라이언트 컴포넌트 모듈 그래프 사이의 경계를 선언하는 규칙이다.

// app/counter.tsx

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

  'use client'는 서버 전용 코드와 클라이언트 코드 사이에 있다. 서버 전용에서 클라이언트 부분까지의 경계를 교차하는 컷오프지점을 정의하기 위해 import 위에 파일 맨 위에 배치된다. 'use client'가 파일에 정의되면 자식 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈은 클라이언트의 번들의 일부로 간주된다.

  서버 컴포넌트가 기본값이므로 'use clinet' 지시문으로 시작하는 모듈에서 정의하거나 import 하지 않는 한 모든 컴포넌트는 서버 컴포넌트 모듈 그래프의 일부이다.

  주의할 점으로 서버 컴포넌트 모듈 그래프의 컴포넌트는 서버에서만 렌더링 되도록 보장받고, 클라이언트 컴포넌트 모듈 그래프의 컴포넌트는 클라이언트에서 렌더링 되지만 Next.js를 사용하면 서버에서 사전 렌더링되고 클라이언트에서 상호 작용될 수도 있다. 또 지시문 'use client'는 import 전에 파일의 맨 위에 정의해야 하고, 모든 파일에서 'use client'를 정의할 필요는 없다. 클라이언트 모듈 경계는 '진입점'에서 한 번만 정의하면 클라이언트 컴포넌트로 간주되는 모든 모듈에 대해 가져올 수 있다.