[NextJS] Next JS의 렌더링 방식 (SSR, CSR, Hydration)

렌더링(Rendering)

: React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업

 

 

 

CSR (Client-Side Rendering)

: 모든 렌더링이 클라이언트(브라우저) 측에서 발생하는 방식

• 클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드한다.
• 초기 페이지 로드 시, HTML 파일은 간단히 구성 요소만 담고 있다.

 

특징

• 초기 로딩이 빠르지만, 콘텐츠가 모두 표시될 때까지는 시간이 걸릴 수 있다.
• SEO(검색 엔진 최적화)에 불리할 수 있다.

 

작동 방식

• 사용자가 페이지 요청 → 서버가 기본 HTML + 자바스크립트 파일 전달
  → 브라우저가 자바스크립트 실행, 데이터를 서버에서 받아옴 → React가 클라이언트에서 UI를 완성하여 페이지 렌더링

 

 

 

SSR (Server-Side Rendering)

: 웹 페이지를 사용자가 보기 전에 서버에서 먼저 완성된 HTML을 만들어서 브라우저에 보내주는 방식

• Next.js에서 기본적으로 사용하는 렌더링 방식
• 서버에서 컴포넌트를 렌더링하여 HTML을 생성하고, 이 HTML을 클라이언트로 전달한다.

 

특징

• 서버에서 미리 렌더링되므로 초기 로딩 속도가 빠르다.
• SEO와 매번 최신 데이터가 필요한 경우 유리하다.

 

작동 방식 

• 사용자가 페이지를 요청 → 서버가 React 컴포넌트를 HTML로 변환(렌더링)
  → 완성된 HTML을 사용자에게 전달 → 브라우저에 전체 페이지가 표시됨 → 자바스크립트가 로딩되면서 페이지와 상호작용 가능

 

---

하이드레이션(Hydration)

: 서버사이드 렌더링(SSR)으로 미리 생성된 정적 HTML을 브라우저에서 동적인 React 애플리케이션으로 변환하는 과정

• 서버에서 HTML을 생성해 사용자에게 빠르게 보여준 후, 클라이언트 자바스크립트를 통해 HTML에 React의 상호작용 기능을 추가하여 React 컴포넌트로 변환하고, 이벤트 리스너 등을 부착해 인터랙티브한 페이지로 만드는 역할을 한다.
• 사용자에게 초기 로딩 시간을 줄이면서도 완전한 React 앱의 기능을 제공한다.

 

 

 

Client Components

: 상호작용이 필요한 요소

• "use client" 지시어가 최상단에 추가된 컴포넌트

 

특징

• "use client"은 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용됩니다. (client에서만 render된다는 뜻 ❌)
  
  • 파일에 "use client"가 있으면, 그 컴포넌트와 모든 하위 컴포넌트가 클라이언트 번들로 처리된다.
• 서버에서 HTML이 먼저 렌더링된 후, 클라이언트에서 하이드레이션을 통해 상호작용이 활성화된다.
  (server에서 먼저 render되고 hydrate 됨)
• 상호작용이 필요한 UI(폼, 버튼 클릭, 입력 이벤트 등)에 적합하다. 
  

 

 

 

Server Components

: 상호작용이 없는 읽기 전용 콘텐츠 

• "use client" 지시어가 없는 컴포넌트

 

특징

• 상호작용이 필요하지 않거나 서버에서 미리 렌더링해도 충분한 콘텐츠에 적합하다.
• 서버에서 렌더링되어 클라이언트 측 자바스크립트 부담이 줄어듭니다.
  (server에서 먼저 render되고 hydrate는 되지 않음)

 

---

Next JS의 렌더링 방식 (SSR + CSR)

• Next.js에서는 기본적으로 모든 컴포넌트와 페이지가 서버에서 먼저 렌더링(SSR)된다.
• ‘use client’ 지시어를 사용해 클라이언트 컴포넌트로 설정하더라도, Next.js는 처음에 서버에서 페이지를 렌더링(SSR)한 후 클라이언트에서만 동작하는 추가적인 로직이 실행되도록 한다.
• Next.js는 SSR과 CSR을 결합하여 사용자가 빠르게 콘텐츠에 접근할 수 있게 하면서도, 필요에 따라 클라이언트에서 UI를 동적으로 조작할 수 있는 유연성을 제공한다.

 

 

 

React client hook in Server Component 오류

문제

• 서버 컴포넌트 내에서 React 클라이언트 전용 훅(useState, useEffect 등)을 사용할 경우, 오류가 발생할 수 있다. 

 

원인

• 서버와 클라이언트에서의 렌더링 차이
  
  • Next.js에서는 서버 컴포넌트(Server components)와 클라이언트 컴포넌트(Client components)가 분리되어 있다. 
  • 서버 컴포넌트(Server components)는 서버에서만 렌더링되며, 클라이언트에 보내지는 HTML을 생성하는 역할을 한다.
• 클라이언트 전용 훅의 제한
  
  • 클라이언트 훅(useState, useEffect, usePathname 등)은 브라우저 환경에서만 동작하도록 설계되었다.
    
  • 클라이언트 훅들은 브라우저에서 실행되는 코드와 상태 관리가 필요하기 때문에, 서버에서 사용할 수 없다.
  • 서버에서는 이러한 브라우저와의 상호작용이나 상태 변경이 불가능하기 때문에 서버 컴포넌트에서 클라이언트 훅을 호출할 경우 오류가 발생합니다.

 

해결

• 컴포넌트의 맨 위에 "use client" 지시어를 추가해 해당 컴포넌트를 클라이언트 컴포넌트로 바꾼다.

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navigation() {
  const path = usePathname();

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link> 
          {path === "/" ? "✨" : ""}
        </li>
        <li>
          <Link href="/about-us">About us</Link>
          {path === "/about-us" ? "💟" : ""}
        </li>
      </ul>
    </nav>
  );
}

 

---

 

React client hook in Server Component

 

Rendering: Client Components | Next.js

 

All Courses – 노마드 코더 Nomad Coders