Next.js 클라이언트 컴포넌트와 서버 컴포넌트 차이점 간단 요약

 노마드 코더의 Next.js 시작하기 강의를 듣던 중, 두 컴포넌트의 특징과 차이점을 간단히 기록하기 위해 글을 작성한다.

 

1. 클라이언트 컴포넌트 (Client Component)

"use client";
import { useEffect, useState } from "react";

export default function Page() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    const response = await fetch("https://nomad-movies.nomadcoders.workers.dev/movies");
    const json = await response.json();
    setMovies(json);
    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <h1>{isLoading ? "Loading..." : JSON.stringify(movies)}</h1>;
}

 

• "use client"가 코드 상에 포함되어 있다.
• useState, useEffect 같은 훅을 이용해 데이터를 비동기로 가져와 관리한다.
• 페이지가 먼저 렌더링된 후, useEffect가 실행되어 데이터를 가져온다.

 

2. 서버 컴포넌트 (Server Component)

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

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

export default async function Page() {
  const movies = await getMovies();

  return <h1>{JSON.stringify(movies)}</h1>;
}

 

• 서버 컴포넌트에서 동작하며, 서버에서 데이터를 가져온 후 페이지가 렌더링된다.
• 클라이언트에서 로딩 상태를 관리하지 않고 데이터를 모두 받아온 후에 렌더링된다. 그렇기에 처음부터 완전한 HTML이 브라우저에 전달된다.
• 서버 컴포넌트는 브라우저에서 실행되지 않기에  useEffect, useState같은 훅은 이용할 수 없다. 데이터 패칭은 서버에서 처리되고 결과를 바로 렌더링할 수 있다.

 

3. 차이점 요약

• 실행 위치:
  • 클라이언트 컴포넌트: 브라우저에서 실행
  • 서버 컴포넌트: 서버에서 실행
• 데이터 패칭:
  • 클라이언트 컴포넌트: 페이지가 먼저 렌더링된 후, useEffect를 통해 데이터를 가져옴. 초기 상태는 로딩 상태로 표시
  • 서버 컴포넌트: 서버에서 데이터를 패칭한 후 HTML을 생성하여 클라이언트로 보냄. 로딩 상태가 필요 없음
• SEO 및 초기 렌더링 성능:
  • 클라이언트 컴포넌트: 초기 로딩 시 SEO에 불리할 수 있으며, JavaScript가 실행되기 전까지 데이터를 가져올 수 없음
  • 서버 컴포넌트: 서버에서 완전히 렌더링된 상태로 전송되므로 SEO와 초기 렌더링 성능이 향상됨
• 상태 관리 및 훅:
  • 클라이언트 컴포넌트: useState, useEffect와 같은 훅을 사용할 수 있음
  • 서버 컴포넌트: 훅을 사용할 수 없고, 상태 관리가 필요 없는 정적인 데이터 렌더링에 적합