서버 컴포넌트, 왜 프론트엔드 개발자가 주목해야 하는가

서버 컴포넌트란 무엇인가

서버 컴포넌트는 이름 그대로 서버에서만 실행되는 리액트 컴포넌트다.

기존의 리액트는 모든 컴포넌트가 브라우저에서 실행되었다. 즉, 서버에서 HTML을 한 번 만들어 보내더라도, 결국 클라이언트에서 리액트가 다시 그려야 하는 구조였다.

하지만 서버 컴포넌트는 다르다.

렌더링을 서버에서 미리 수행하고, 그 결과를 클라이언트로 스트리밍한다.

덕분에 클라이언트는 데이터를 가져오기 위한 네트워크 요청 없이, 이미 준비된 HTML과 JSON만 받아서 바로 렌더링할 수 있다.

예를 들어 다음과 같은 코드가 있다고 하자.

// app/posts/page.tsx (Server Component)
import { getPosts } from "@/lib/db";
import PostList from "./PostList";

export default async function PostsPage() {
  const posts = await getPosts(); // 서버에서 DB 접근 가능
  return <PostList posts={posts} />;
}
TypeScript
복사

getPosts()는 서버에서 직접 DB를 조회한다.

이 데이터는 클라이언트로 노출되지 않고, 렌더링된 결과만 전달된다.

결과적으로 API 요청도 없고, 브라우저 번들에도 DB 로직이 포함되지 않는다.

왜 서버 컴포넌트가 필요한가

리액트 팀이 서버 컴포넌트를 만든 이유는 명확하다.

“더 빠른 렌더링”과 “더 작은 번들”을 위해서다.

번들 크기 감소

서버에서만 실행되는 코드(예: 데이터 패칭, 인증 등)는 클라이언트로 전송되지 않는다.

즉, 브라우저가 다운로드해야 할 자바스크립트 파일이 줄어든다.

데이터 패칭 효율화

기존에는 클라이언트에서 useEffect나 SWR, React Query 같은 라이브러리로 데이터를 가져와야 했다.

서버 컴포넌트를 사용하면, 서버에서 데이터를 불러와 바로 렌더링하기 때문에 네트워크 왕복이 줄어든다.

보안 강화

서버 내부에서만 실행되므로 API 키나 데이터베이스 커넥션 정보가 클라이언트로 노출되지 않는다.

즉, 민감한 정보를 다뤄도 안전하다.

서버 컴포넌트와 클라이언트 컴포넌트의 협업

서버 컴포넌트가 모든 걸 대체하는 것은 아니다.

서버는 데이터 중심의 렌더링,

클라이언트는 사용자 인터랙션 중심의 렌더링을 맡는다.

리액트는 이를 명시적으로 구분하도록 use client 지시문을 제공한다.

// app/posts/PostList.tsx
"use client";

export default function PostList({ posts }) {
  const [liked, setLiked] = useState(false);

  return (
    <div>
      {posts.map((p) => (
        <div key={p.id}>{p.title}</div>
      ))}
      <button onClick={() => setLiked(!liked)}>
        {liked ? "❤️ 좋아요 취소" : "🤍 좋아요"}
      </button>
    </div>
  );
}
TypeScript
복사

이처럼 서버는 데이터를 준비하고, 클라이언트는 상호작용을 처리한다.

Next.js 13 이후의 App Router는 이 철학을 기반으로 만들어졌다.

서버 컴포넌트의 단점

완벽한 기술은 없다.

서버 컴포넌트에도 몇 가지 현실적인 제약이 존재한다.

1. 서버 의존성 증가

서버 컴포넌트는 서버에서 실행되므로,

서버가 없으면 동작하지 않는다.

정적 사이트처럼 CDN에 올려두고 끝내는 구조와는 맞지 않는다.

또한 서버 응답이 느리면 렌더링 속도도 함께 느려진다.

2. 인터랙션 한계

서버 컴포넌트는 이벤트 핸들러를 가질 수 없다.

즉, onClick, onChange 같은 브라우저 이벤트는 클라이언트 컴포넌트에서만 가능하다.

따라서 실시간 반응형 UI나 애니메이션이 많은 화면에서는 서버 컴포넌트만으로 구현하기 어렵다.

3. 학습 곡선

서버/클라이언트 컴포넌트를 분리해야 하고,

경우에 따라 use client 선언을 잊으면 에러가 발생한다.

또한 Suspense, 스트리밍 렌더링 등 새로운 개념을 함께 이해해야 한다.

프론트엔드 개발자가 얻는 이점

그럼에도 불구하고 서버 컴포넌트는 프론트엔드 개발자에게 분명한 장점을 준다.

•

데이터 패칭 로직 단순화: API 호출용 훅이나 상태 관리 도구가 줄어든다.

•

보일러플레이트 감소: 서버에서 데이터를 바로 전달하므로 props 전달이 단순해진다.

•

성능 향상: 초기 로딩 속도가 체감될 정도로 개선된다.

•

보안 향상: 민감한 로직을 서버에 숨길 수 있다.