Next.js 14+의 App Router: 서버 컴포넌트 및 클라이언트 컴포넌트를 활용한 완전한 풀스택 개발

on
Next.js 14+의 App Router: 서버 컴포넌트 및 클라이언트 컴포넌트를 활용한 완전한 풀스택 개발

Next.js 14+의 App Router

Next.js가 14 버전으로 업데이트되면서 App Router의 기능이 더욱 강력해졌습니다. 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)를 적절히 활용하면 완전한 풀스택 개발이 가능합니다. 이번 글에서는 제가 직접 Next.js 14+을 사용하며 습득한 내용을 바탕으로 효과적인 개발 방법과 팁을 공유하려고 합니다.


1. Next.js 14+에서 App Router란?

기존의 pages/ 디렉터리 기반 라우팅 대신, app/ 디렉터리를 활용하는 App Router가 기본 방식이 되었습니다. 이 방식은 서버 컴포넌트를 활용한 SSR(Server-Side Rendering)을 더욱 효과적으로 수행할 수 있도록 설계되었습니다.

App Router의 주요 특징

  • 서버 컴포넌트 기본 지원 (클라이언트 측에서 불필요한 JS 로딩 감소)
  • 데이터 가져오기(Fetching) 최적화
  • Middleware를 통한 요청 처리 강화
  • 새로운 use 훅 도입으로 비동기 데이터 로딩 개선

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

Next.js 14+에서는 기본적으로 서버 컴포넌트를 사용하며, 클라이언트 컴포넌트가 필요한 경우 "use client"를 명시적으로 선언해야 합니다.

서버 컴포넌트 예제

서버에서 직접 데이터를 가져와 렌더링하는 간단한 예제입니다.

// app/posts/page.tsx (서버 컴포넌트 기본 설정)
import { fetchPosts } from '@/lib/api';

export default async function PostsPage() {
    const posts = await fetchPosts();
    return (
        <div>
            <h2>블로그 포스트</h2>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
}

클라이언트 컴포넌트 예제

상태를 관리해야 하거나 이벤트 핸들러가 필요한 경우 클라이언트 컴포넌트가 필요합니다.

// app/components/LikeButton.tsx
"use client";
import { useState } from 'react';

export default function LikeButton() {
    const [likes, setLikes] = useState(0);
    return (
        <button onClick={() => setLikes(likes + 1)}>
            좋아요 {likes}개
        </button>
    );
}

서버 컴포넌트와 클라이언트 컴포넌트를 적절히 조합하면 성능과 UX를 모두 최적화할 수 있습니다.


3. Next.js 14+에서 데이터 가져오기 최적화

Next.js 14+에서는 서버 컴포넌트에서 직접 데이터를 가져오는 것이 일반적이며, use 훅을 사용하여 비동기 데이터를 쉽게 처리할 수 있습니다.

use 훅을 활용한 데이터 가져오기

import { use } from 'react';
import { fetchUser } from '@/lib/api';

export default function UserProfile() {
    const user = use(fetchUser());
    return <div>사용자 이름: {user.name}</div>;
}

이 방식은 기존 useEffect를 사용한 방식보다 훨씬 간결하고 직관적입니다.


4. 결론

Next.js 14+의 App Router를 활용하면 성능 최적화는 물론, 유지보수성이 뛰어난 풀스택 애플리케이션을 구축할 수 있습니다. 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 활용하는 것이 핵심이며, 데이터를 가져오는 방식도 개선되었습니다.

그럼, 다음 글에서는 Next.js 14+에서 SEO 최적화 및 이미지 최적화 방법을 다룰 예정입니다!

Comments

Post a Comment