Next.js의 서버 및 클라이언트 구성 요소 사용 시기 및 방법

Next.js 13은 React 서버 구성 요소를 도입하여 개발자가 성능을 위해 서버에서 또는 상호 작용을 위해 클라이언트에서 구성 요소를 렌더링할 위치와 방법을 선택할 수 있는 기능을 제공합니다. 이러한 유연성을 통해 속도와 동적 기능을 결합한 앱을 구축할 수 있습니다.

이 기사에서는 기본 사항뿐만 아니라 동적이고 효율적인 앱을 구축할 때 일반적으로 요구되는 클라이언트 구성 요소 내에서 서버 구성 요소를 사용하는 방법도 자세히 살펴보겠습니다.

서버 구성 요소 이해

서버 구성 요소는 서버에서 완전히 렌더링되며 클라이언트 측 JavaScript가 필요하지 않습니다. 머리글, 바닥글 또는 사용자 상호 작용이 필요하지 않은 데이터 기반 구성 요소와 같은 정적 콘텐츠에 적합합니다.

예: 간단한 서버 구성 요소

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

이 구성 요소는 서버에서 렌더링되며 클라이언트 측 상호 작용을 포함하지 않습니다. 즉, 더 적은 양의 JavaScript로 더 빠르게 로드됩니다.

서버 구성 요소의 이점

• JavaScript 페이로드 감소: 서버 구성 요소는 브라우저로 전송되는 JavaScript의 양을 줄입니다.
• 향상된 데이터 가져오기: 서버 구성 요소가 데이터를 데이터베이스에 더 가깝게 가져오므로 네트워크 대기 시간이 단축됩니다.

서버 구성 요소에서 데이터 가져오기

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

이 PostList 구성 요소는 서버에서 데이터를 가져오고 사전 렌더링된 HTML을 클라이언트에 전송하여 로드 시간을 단축합니다.

클라이언트 구성 요소를 사용하는 경우

클라이언트 구성 요소는 양식 입력, 이벤트 리스너 또는 동적 콘텐츠와 같은 상호 작용이 필요할 때 필수적입니다. 이러한 구성 요소는 클라이언트에서 JavaScript를 사용하여 사용자 상호 작용을 처리합니다.

예: 대화형 작업을 위한 클라이언트 구성 요소

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

SearchBar는 대화형이므로 클라이언트 구성 요소여야 합니다. useState 후크 및 기타 React 후크는 클라이언트 구성 요소에서만 사용할 수 있습니다.

서버 구성요소와 클라이언트 구성요소를 결합하는 사용 사례가 있을 수 있으므로 다음에는 이를 수행하는 방법에 대해 이야기해 보겠습니다.

서버와 클라이언트 구성 요소 결합

Next.js 13의 핵심 강점은 서버와 클라이언트 구성 요소를 결합하는 기능입니다. 가장 좋은 방법은 기본적으로 서버 구성 요소를 사용하고 클라이언트 구성 요소를 구성 요소 트리에 최대한 깊이 삽입하는 것입니다.

예: 서버 및 클라이언트 구성 요소 결합

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

SearchBar 구성 요소는 클라이언트측 상호 작용을 처리하고 나머지 레이아웃은 서버에서 렌더링되어 성능과 상호 작용 간의 균형을 제공합니다.

반대로 클라이언트 구성 요소 내부에서 서버 구성 요소를 사용하는 사용 사례가 있을 수 있습니다. 그 방법을 확인해 보겠습니다.

클라이언트 구성 요소 내에서 서버 구성 요소를 사용하는 방법

서버 구성 요소는 클라이언트 구성 요소 내에 중첩될 수 있지만 클라이언트 구성 요소로 직접 가져올 수는 없다는 점을 이해하는 것이 중요합니다. 클라이언트 구성 요소에 서버 구성 요소를 포함하려면 둘 사이의 경계가 깨지는 것을 방지하기 위해 해당 구성 요소를 자식 또는 소품으로 전달합니다.

예: 서버 구성 요소를 클라이언트 구성 요소로 전달

다음은 서버 구성 요소가 클라이언트 구성 요소에 하위 구성 요소로 전달되는 실제 예입니다.

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

위의 예에서:

• 프로필은 데이터를 가져오거나 정적 콘텐츠를 표시하는 서버 구성 요소입니다.
• 대시보드는 상호 작용(프로필 표시/숨기기)을 처리하는 클라이언트 구성 요소입니다.
• 프로필 서버 구성 요소는 대시보드 클라이언트 구성 요소의 하위 구성 요소로 전달됩니다.

이 패턴을 사용하면 클라이언트 측 상호 작용을 유지하면서 서버 렌더링의 이점(자바스크립트 감소, 성능 향상)을 활용할 수 있습니다.

타사 라이브러리 및 클라이언트 구성 요소

인증 공급자나 UI 구성 요소와 같은 많은 타사 라이브러리는 클라이언트 구성 요소에서만 사용할 수 있는 React 후크에 의존합니다. 클라이언트 구성 요소 내에 타사 라이브러리를 래핑하여 이러한 제한을 해결하는 방법은 다음과 같습니다.

예: 타사 캐러셀 사용

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

제3자 반응 슬릭 캐러셀을 클라이언트 구성 요소에 래핑하면 상호 작용과 같은 클라이언트 측 기능에 계속 액세스하면서 서버 렌더링 페이지에서 사용할 수 있습니다.

서버와 클라이언트 구성 요소 간의 속성 처리

서버와 클라이언트 구성 요소 간에 데이터를 전달할 때 props는 직렬화 가능해야 합니다(예: 문자열, 숫자, 부울). 함수나 클래스 인스턴스와 같은 복잡한 객체는 전달할 수 없습니다.

예: 서버에서 클라이언트로 데이터 전달

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

이제 UserCard 클라이언트 구성 요소는 모든 것이 직렬화 가능한 상태로 유지되어 문제 없이 서버-클라이언트 경계를 통과하도록 하면서 서버 구성 요소에서 전달된 데이터를 동적으로 렌더링할 수 있습니다.

모든 것을 고려하여 모범 사례로 결론을 내리는 것도 흥미로울 것입니다. 다음으로 넘어가겠습니다:

서버 및 클라이언트 구성 요소 구성에 대한 모범 사례

다음은 서버 및 클라이언트 구성 요소를 효과적으로 구성하기 위한 몇 가지 팁입니다.

1. 서버 구성 요소의 기본값: 정적 또는 데이터 기반 콘텐츠에 대해 가능한 경우 서버 구성 요소를 사용하여 JavaScript 로드를 줄이고 성능을 향상시킵니다.

2. 상호작용을 위해 클라이언트 구성 요소 사용: 사용자 상호 작용이나 브라우저별 API가 필요한 경우에만 클라이언트 구성 요소를 사용하세요.

3. 클라이언트 구성 요소를 트리 아래로 이동: 클라이언트 구성 요소를 구성 요소 트리에 최대한 깊이 밀어 넣습니다. 이를 통해 서버에서 더 많은 앱을 렌더링할 수 있어 성능이 향상됩니다.

4. 서버 구성 요소를 하위 항목으로 전달: 서버 구성 요소를 클라이언트 구성 요소 내에서 사용해야 하는 경우 직접 가져오는 대신 하위 구성 요소 또는 prop으로 전달하세요.

마지막 단어: 성능과 상호 작용 사이의 균형 유지

Next.js 13을 사용하면 서버와 클라이언트 모두에서 구성 요소를 유연하게 렌더링할 수 있습니다. 정적 콘텐츠용 서버 구성 요소와 상호 작용용 클라이언트 구성 요소를 기본으로 설정하고 둘 사이의 경계를 신중하게 관리하면 빠르고 동적인 앱을 구축할 수 있습니다.

서버 구성 요소를 클라이언트 구성 요소에 전달하고 신중하게 결합하는 등 여기에 나온 패턴과 예를 따르면 Next.js 13의 모든 기능을 활용하여 고성능 대화형 웹 애플리케이션을 만들 수 있습니다.

행복한 코딩
저는 마이클입니다.

위 내용은 Next.js의 서버 및 클라이언트 구성 요소 사용 시기 및 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!