Next.js에서의 라우팅, MPA와 SPA의 하이브리드 접근법

본 글에서는 Next.js의 렌더링 전략을 MPA(Multi-Page Application)와 SPA(Single-Page Application) 관점에서 분석한다. Next.js가 어떻게 두 방식의 장점을 결합해 하이브리드 애플리케이션을 구현하는지 살펴보고, 특히 Link 컴포넌트의 역할과 client/server 컴포넌트의 관계를 중점적으로 조사한다. 이를 통해 Next.js가 제공하는 최적화된 사용자 경험 구현 메커니즘을 이해할 수 있다.

2025.05.03 | 조회 12 |

1. 서론

현대 웹 애플리케이션 개발에서는 성능, 사용자 경험, 개발 용이성이 중요한 요소로 자리 잡았다. 전통적인 MPA는 초기 로딩이 빠르고 SEO에 유리하지만 페이지 전환 시 전체 페이지를 다시 로드해야 하는 단점이 있다. 반면 SPA는 부드러운 페이지 전환과 더 나은 사용자 경험을 제공하지만 초기 로딩 시간이 길고 SEO 최적화에 추가 작업이 필요하다. Next.js는 이러한 두 접근법의 장점을 결합한 프레임워크로, 본 글에서는 그 구현 방식과 작동 원리를 심층 분석한다.

2. Link 컴포넌트의 필요성과 작동 원리

2.1 하이브리드 애플리케이션 구현

Next.js는 MPA와 SPA의 장점을 결합한 하이브리드 애플리케이션 개발을 지원한다. 이 접근법은 MPA의 초기 로딩 성능과 SEO 장점을 유지하면서도 SPA의 부드러운 페이지 전환 경험을 제공한다.

2.2 History API를 활용한 SPA 경험 제공

Next.js는 기존 MPA 구조에 History API를 구현하여 SPA의 부드러운 라우팅 전환을 지원한다. 이는 브라우저의 네이티브 History API를 확장함으로써 가능해진다.

2.3 부분적 리렌더링 메커니즘

Link 컴포넌트를 통한 라우팅은 전체 HTML을 다시 내려받지 않고 필요한 부분만 리렌더링하는 방식으로 작동한다. 이를 통해 SPA와 같은 사용자 경험을 제공하면서도 MPA의 장점을 유지할 수 있다.

3. use client와 use server 지시어의 이해

3.1 지시어에 대한 오해 해소

'use client' 지시어가 단순히 CSR(Client-Side Rendering)을 의미한다는 오해가 있으나, 이는 정확하지 않다. 실제로 use client와 use server 지시어는 모두 SSR(Server-Side Rendering) 과정에 관여한다.

3.2 컴포넌트 트리 구조의 구분

Next.js는 기본적으로 모든 컴포넌트를 server component로 간주하며, client component를 사용하기 위해서는 'use client' 지시어가 필요하다. 이 지시어들은 컴포넌트 트리 내에서 server component와 client component를 구분하는 역할을 한다.

3.3 hydration과 서버 상호작용

Client component는 hydration 과정을 거치게 되며, hydration 전후 결과가 일치하지 않을 경우 React는 오류를 발생시킨다. 반면 server component는 payload를 평문으로 전달받아 서버와 상호작용할 수 있는 메커니즘을 제공한다.

4. Link 컴포넌트의 구현 분석

4.1 History API 확장

Next.js의 Link 컴포넌트는 브라우저의 History API를 확장하여 구현되어 있다. 원래의 pushState와 replaceState 메서드를 보존하면서 Next.js에 필요한 기능을 추가한다.

// 원래 history 메서드 보존
const originalPushState = window.history.pushState.bind(window.history)
const originalReplaceState = window.history.replaceState.bind(window.history)

// pushState 확장
window.history.pushState = function pushState(data, _unused, url) {
// Next.js 내부 상태 복사
data = copyNextJsInternalHistoryState(data)

if (url) {
applyUrlFromHistoryPushReplace(url)
}

return originalPushState(data, _unused, url)
}

4.2 클릭 이벤트 처리

Link 컴포넌트는 클릭 이벤트를 처리하여 내부 URL과 외부 URL을 구분하고, 내부 URL의 경우 SPA 방식으로 처리한다.

function linkClicked(e, router, href, as, replace, shallow, scroll, locale, onNavigate) {
// 수정된 클릭(ctrl+클릭 등) 또는 다운로드 속성이 있으면 브라우저 기본 동작 수행
if ((isAnchorNodeName && isModifiedEvent(e)) || e.currentTarget.hasAttribute('download')) {
return;
}

// 외부 URL인 경우 처리
if (!isLocalURL(href)) {
if (replace) {
e.preventDefault();
location.replace(href);
}
return;
}

// 내부 URL 처리는 여기서 계속됨
}

5. 결론

Next.js는 MPA와 SPA의 장점을 효과적으로 결합한 하이브리드 접근법을 제공한다. Link 컴포넌트와 client/server 컴포넌트 구분을 통해 개발자는 초기 로딩 성능, SEO 최적화, 부드러운 사용자 경험을 모두 달성할 수 있다. 이러한 접근법은 현대 웹 애플리케이션이 직면한 여러 도전과제를 해결하는 효과적인 방법을 제시한다.

Next.js에서의 라우팅, MPA와 SPA의 하이브리드 접근법

Next.js 딥다이브 님에게 커피와 쪽지 보내기