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

Jayden ·2024년 5월 15일

1. 서버 컴포넌트

  • 서버에서 동작하는 컴포넌트로 useEffect, useState 등의 훅을 사용할 수 없다.
  • 서버에서 API 호출이 이루어지고 렌더링할 정보를 트리 객체 로 가져온다
  • 이는 기존에 서버에서 완성된 HTML을 가져와 브라우저에 표시하는 SSR(Server-side Rendering)과는 구별된다.
  • 백엔드 API 로직이 필요없으며, 바로 DB에 접근하여 CRUD 작업을 수행할 수 있다.
  • Next 13, 14버전에서 프로젝트 내부에 위치한 컴포넌트는 기본적으로 서버 컴포넌트로 동작.

2. 클라이언트 컴포넌트

  • 컴포넌트 최상단에 "use client"로 선언해야 한다.
    (선언하지 않을 시 개발화면에 메시지 출력)
  • 클라이언트 컴포넌트 내부에서는 서버 컴포넌트를 사용할 수 없다. (import로 사용 불가)
    (단, children의 형태로 서버 컴포넌트를 사용할 수 있다.)
  • "use client" 선언의 의미는 서버에서 렌더링되고, 클라이언트에서 hydration 작업이 수행됨을 의미한다.
profile
프론트엔드 개발자

0개의 댓글