NextJS: page router와 app router(1)

Page Router와 App Router의 가장 큰 차이점은 서버 컴포넌트이다.

 

서버 컴포넌트란?

서버 컴포넌트는 서버에서만 실행되며, 클라이언트에 JavaScript를 전달하지 않는다. JavaScript 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 도움이 된다. 단, 클라이언트에서 직접 상호작용하는 이벤트 핸들러는 사용할 수 없고, 서버에서 렌더링된 HTML만 클라이언트로 전달한다.

 

page router에서는 페이지 전체를 SSR로 처리할지, SSG로 처리할지, 혹은 CSR으로 처리할지 결정할 수 있었지만 app router에서는 컴포넌트 단위로 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.

 

만약 서버 컴포넌트가 클라이언트 컴포넌트의 자식으로 있다면 클라이언트에서 서버 컴포넌트가 렌더링되는 것이므로 RSC를 사용하는 이유가 상실된다.즉, 서버 컴포넌트의 중요한 특성 중 한 가지가 상실되는 것이다.

- 서버에서 렌더링됨: 서버 컴포넌트를 서버에서 렌더링되어 클라이언트로 전달되는 HTML을 생성한다.

- 상태 관리 없음: 클라이언트 측 상태 관리와 상호관리 로직이 포함되지 않는다.

- 데이터 페칭: 서버에서 데이터를 로드하고 렌더링한다.

 

그리고 app router는 SSR, SSG 등을 지정해줄 필요 없이 내부적으로 자동으로 결정된다.

 

ex) 사용자 프로필 페이지에서 팔로우 기능이 추가되는 경우를 예를 들어 생각해보자.

*서버 컴포넌트

// app/profile/page.js - 서버 컴포넌트
import React from 'react';
import FollowButton from './FollowButton';

// 서버에서 프로필 데이터를 가져오는 함수
async function fetchProfileData() {
  const response = await fetch('https://api.example.com/profile', {
    cache: 'no-store', // 최신 데이터를 가져오기 위해 no-store 설정
  });
  if (!response.ok) throw new Error('Failed to fetch profile data');
  return response.json();
}

// 서버 컴포넌트에서 프로필 데이터를 렌더링
export default async function ProfilePage() {
  const profileData = await fetchProfileData();

  return (
    <div>
      <h1>{profileData.name}'s Profile</h1>
      <p>Email: {profileData.email}</p>
      
      {/* 하위에 클라이언트 컴포넌트를 포함 */}
      <FollowButton userId={profileData.id} />
    </div>
  );
}

*클라이언트 컴포넌트

// app/profile/FollowButton.js
'use client'; // 클라이언트 컴포넌트임을 명시

import React, { useState } from 'react';

export default function FollowButton({ userId }) {
  const [isFollowing, setIsFollowing] = useState(false);

  // 버튼 클릭 시 팔로우 상태를 전환하는 함수
  const handleFollow = async () => {
    const response = await fetch(`/api/follow/${userId}`, {
      method: isFollowing ? 'DELETE' : 'POST',
    });
    if (response.ok) {
      setIsFollowing(!isFollowing);
    }
  };

  return (
    <button onClick={handleFollow}>
      {isFollowing ? 'Unfollow' : 'Follow'}
    </button>
  );
}

 

 

참고

https://velog.io/@ubin_ing/nextjs-app-router