[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트

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

들어가며

• Next.js는 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 도입한 리액트 기반의 풀스택(Full-Stack) 프레임워크이다.
• Next.js는 단순히 프론트엔드 라이브러리인 리액트를 넘어 서버 측에서도 코드를 실행할 수 있는 기능을 제공한다.

 

서버 컴포넌트

개념

• Next.js 프로젝트에서는 모든 리액트 컴포넌트가 기본적으로 서버에서 렌더링 된다.
• 이 컴포넌트들을 서버 컴포넌트라고 하며, 브라우저가 아닌 서버에서 실행된다.

 

예

• 다음과 같이 컴포넌트에 로그를 출력하면, 웹 브라우저 개발자 도구(클라이언트 단)가 아닌, IDE(서버 단)의 터미널에서 로그를 확인할 수 있다.

 

장점

성능 향상

• 클라이언트 측에서 다운로드해야 할 자바스크립트(JS) 코드가 줄어든다.

 

SEO 개선

• 서버 단에서 모든 컴포넌트를 실행하여 렌더링한 결과를 클라이언트 단으로 보내고, 클라이언트 단에서 해당 내용을 표시한다.
  • 페이지의 모든 내용들을 웹 브라우저의 개발자 도구를 통해 확인할 수 있다.
• 웹 검색 크롤러가 모든 페이지 콘텐츠를 확인하고 내용을 수집할 수 있다.

 

클라이언트 컴포넌트

개념

• 일부 컴포넌트는 클라이언트 측에서만 사용할 수 있는 기능(@useState@, @useEffect@, 이벤트 핸들러 등)을 포함하기 때문에 클라이언트에서 렌더링되어야 한다.
• Next.js에서 특정 컴포넌트가 클라이언트 단에서 실행되도록 하려면 @use client@ 지시어를 사용하여 해당 컴포넌트를 클라이언트 컴포넌트로 지정하면 된다.

'use client';

import { useEffect, useState } from 'react';
import Image from 'next/image';

import burgerImg from '@/assets/burger.jpg';
import curryImg from '@/assets/curry.jpg';
import dumplingsImg from '@/assets/dumplings.jpg';
import macncheeseImg from '@/assets/macncheese.jpg';
import pizzaImg from '@/assets/pizza.jpg';
import schnitzelImg from '@/assets/schnitzel.jpg';
import tomatoSaladImg from '@/assets/tomato-salad.jpg';
import classes from './image-slideshow.module.css';

const images = [
  { image: burgerImg, alt: 'A delicious, juicy burger' },
  { image: curryImg, alt: 'A delicious, spicy curry' },
  { image: dumplingsImg, alt: 'Steamed dumplings' },
  { image: macncheeseImg, alt: 'Mac and cheese' },
  { image: pizzaImg, alt: 'A delicious pizza' },
  { image: schnitzelImg, alt: 'A delicious schnitzel' },
  { image: tomatoSaladImg, alt: 'A delicious tomato salad' },
];

export default function ImageSlideshow() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prevIndex) =>
        prevIndex < images.length - 1 ? prevIndex + 1 : 0
      );
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className={classes.slideshow}>
      {images.map((image, index) => (
        <Image
          key={index}
          src={image.image}
          className={index === currentImageIndex ? classes.active : ''}
          alt={image.alt}
        />
      ))}
    </div>
  );
}

 

주의

• @use client@ 지시어를 사용하지 않고 클라이언트 컴포넌트에서만 사용할 수 있는 기능을 사용할 경우, 빌드 과정에서 오류가 발생한다.

 

정리

• Next.js를 사용하면 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 활용하여 성능을 최적화하고 SEO를 개선할 수 있다.
• 기본적으로 모든 컴포넌트는 서버 컴포넌트로 렌더링되며, 클라이언트 컴포넌트가 필요한 경우 @use client@ 지시어를 사용하여 지정할 수 있다. 

 

참고 사이트

Rendering: Client Components | Next.js