Server Components

 

 

Next.js에서 Server Components는 서버에서 렌더링되는 컴포넌트를 의미합니다. 이는 클라이언트에서 실행되지 않고 서버에서만 실행되며, HTML을 생성하여 클라이언트로 전달됩니다. 이러한 접근 방식은 성능 향상, SEO 개선, 초기 로드 시간 단축 등의 이점을 제공합니다.

주요 특징

1. 서버 전용 실행: Server Components는 클라이언트에서 실행되지 않으며, 서버에서만 실행됩니다. 따라서 클라이언트로 전송되는 JavaScript 번들의 크기를 줄일 수 있습니다.
2. 데이터 페칭: Server Components는 서버에서 직접 데이터베이스나 API로부터 데이터를 가져올 수 있습니다. 이를 통해 클라이언트 측에서 데이터를 가져오기 위한 추가적인 코드나 네트워크 요청을 줄일 수 있습니다.
3. SEO 최적화: 서버에서 렌더링된 HTML을 클라이언트로 전송하기 때문에, 검색 엔진 크롤러가 페이지를 쉽게 인덱싱할 수 있어 SEO에 유리합니다.
4. 보안: 중요한 로직이나 비밀 데이터를 클라이언트로 전송하지 않고 서버에서 처리할 수 있기 때문에 보안이 강화됩니다.

 

예시

export const metadata = {
  title: 'Home',
};

const URL = process.env.API_URL;

async function getMovies() {
  const response = await fetch(URL);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies();
  return (
    <div>
      <h1>Movies</h1>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

 

클라이언트 컴포넌트와의 차이점

• 클라이언트 컴포넌트는 브라우저에서 실행되며, 상호작용이나 이벤트 핸들링 같은 동작을 포함할 수 있습니다.
• 서버 컴포넌트는 서버에서만 실행되며, 초기 HTML을 생성합니다. 클라이언트에서 필요한 추가적인 상호작용을 처리하기 위해 클라이언트 컴포넌트와 결합할 수 있습니다.

 

 

서버 컴포넌트와 클라이언트 컴포넌트 결합

서버 컴포넌트에서 클라이언트 컴포넌트를 사용할 수 있습니다. 이를 통해 서버에서 데이터를 가져오고 클라이언트에서 상호작용을 처리할 수 있습니다.

 

// app/page.js (Server Component)
import ClientComponent from './ClientComponent';

export const metadata = {
  title: 'Home',
};

async function getMovies() {
  const response = await fetch(URL);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies();
  return (
    <div>
      <h1>Movies</h1>
      <ClientComponent movies={movies} />
    </div>
  );
}

// app/ClientComponent.js (Client Component)
'use client';

import { useState } from 'react';

export default function ClientComponent({ movies }) {
  const [likedMovies, setLikedMovies] = useState([]);

  const handleLike = (movie) => {
    setLikedMovies((prev) => [...prev, movie]);
  };

  return (
    <div>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>
            {movie.title}
            <button onClick={() => handleLike(movie)}>Like</button>
          </li>
        ))}
      </ul>
      <h2>Liked Movies</h2>
      <ul>
        {likedMovies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

 

데이터 페칭

서버 컴포넌트에서는 데이터를 서버 측에서 직접 가져와 렌더링하는 것이 일반적입니다. 이를 통해 클라이언트로 전송되는 초기 HTML에 데이터가 포함되어 빠른 초기 로드와 SEO 최적화를 달성할 수 있습니다.

 

최적화

서버 컴포넌트를 사용하면 클라이언트로 전송되는 JavaScript 번들의 크기를 줄일 수 있어, 로딩 속도를 개선할 수 있습니다. 또한, 중요한 로직을 서버 측에서 실행하기 때문에 보안도 강화됩니다.

 

결론

Next.js의 Server Components는 성능, 보안, SEO 최적화 등을 제공하는 강력한 기능입니다. 클라이언트 컴포넌트와의 결합을 통해 서버에서 데이터를 가져오고 클라이언트에서 상호작용을 처리할 수 있어 유연하고 강력한 애플리케이션을 개발할 수 있습니다.