<Next.js> Server Component vs Client Components

Next.js 14 app router부터는 모든 리액트 컴포넌트는 '리액트 서버 컴포넌트다.'

Next.js 14부터는 리액트 컴포넌트들이 next.js 서버에서 미리 랜더링되게 된다.
이를 리액트 서버 컴포넌트라고 부른다. (React Server Components, RSC)

Next.js 14에서 RSC를 사용하면 성능 최적화에 큰 도움이 된다. 서버 컴포넌트는 서버에서만 렌더링되므로 불필요한 클라이언트 측 자바스크립트 전송을 줄여준다. 이를 통해 더 가벼운 클라이언트 측 자바스크립트 번들을 만들고, 초기 페이지 로딩 속도를 개선할 수 있다는 성능적인 이점이 있다.

RSC는 서버에서 실행되는 컴포넌트이기에, 클라이언트 측(혹은 브라우저)에서 사용되는 이벤트핸들러, Hook, api를 사용할 수 없다.

'use client'가 없는 컴포넌트는 기본적으로 서버 컴포넌트로 처리되며, 클라이언트에서 실행되지 않는다는 점을 명확히 할 수 있다. 서버 컴포넌트는 서버에서만 실행되므로, 서버에서 데이터를 가져오거나 처리할 때 매우 유리하다.

클라이언트 컴포넌트로 사용하려면 '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'를 명시하게 되면, 클라이언트 컴포넌트로 취급하여 hooks, 이벤트핸들러 등을 사용할 수 있다. 즉, 유저와 상호작용가능한 페이지를 구축할 수 있음을 의미한다. (UI Component)

'use client'를 사용하는 컴포넌트들은, 서버 컴포넌트의 하위 노드로 들어가는 것이 가장 좋은 그림이다.
➡️ 만약 RCC가 RSC보다 위에 위치한다면 Next.js가 제공하는 이점들을 제대로 누릴 수 없음.

Next.js 14에서 화면을 구성하는 방법
1. 초기 상태는 RSC로 빠르게 설정하고,
2. 이후에 데이터 핸들링은 RCC로 처리한다.

React Server Components (RSC)와 React Client Components (RCC)의 조합을 활용하면 성능 최적화와 유연한 데이터 처리가 가능하다.
이를 통해 초기 상태는 서버 컴포넌트(RSC)로 빠르게 설정하고, 그 이후의 데이터 핸들링이나 사용자 상호작용은 클라이언트 컴포넌트(RCC)에서 처리하는 방식이다.