[Next.js] 풀스택 프레임워크의 정의와 서버 컴포넌트의 동작 원리
리액트를 넘어선 표준 프레임워크 Next.js의 핵심인 '보호된 파일명'과 서버 중심의 렌더링 설계를 분석함
키워드: Full-stack Framework, File-based Routing, RSC(React Server Components), Prefetching
1. Next.js의 정의와 특징
Next.js는 리액트(React)를 기반으로 하는 풀스택 프레임워크입니다. 리액트가 UI 라이브러리로서 기능을 제공한다면, Next.js는 라우팅, 서버 사이드 렌더링, API 구축 등 웹 서비스에 필요한 모든 도구를 종합적으로 제공합니다.
❖ 핵심 특징:
- 파일 기반 라우팅: 특정 폴더 구조와 파일명만으로 자동으로 URL 경로를 생성함.
- 서버 컴포넌트 기본값: 모든 컴포넌트가 별도 설정 없이도 서버에서 실행되는 구조를 가짐.
- 성능 자동 최적화: 이미지, 폰트 최적화 및 코드 분할(Code Splitting)을 자동으로 처리함.
2. 보호된 파일명: page.js
Next.js 프로젝트에서는 파일명이 곧 기능이 되는 약속된 규칙이 존재합니다. 그중 가장 핵심이 되는 것이 page.js입니다.
- 역할: 해당 경로(URL)에서 실제로 브라우저에 렌더링될 리액트 컴포넌트를 정의함.
- 규칙: 반드시 해당 파일 내에서 컴포넌트를
export해야만 Next.js 엔진이 인지하고 화면을 구성함.
3. 리액트 서버 컴포넌트 (React Server Components)
Next.js 환경의 컴포넌트는 기본적으로 서버 컴포넌트로 취급됩니다. 이는 컴포넌트가 브라우저가 아닌 백엔드 서버에서 실행됨을 의미합니다.
### 서버 컴포넌트 실행 프로세스
- 서버 실행: 사용자가 페이지를 요청하면 서버에서 컴포넌트 함수를 실행함.
- 로그 출력: 컴포넌트 내부의
console.log는 브라우저 콘솔이 아닌 서버 터미널에 출력됨.- HTML 전송: 계산이 끝난 완성된 HTML 구조만 브라우저로 전송함.
- 클라이언트 부담 감소: 브라우저가 내려받아야 할 자바스크립트 번들 크기가 획기적으로 줄어듦.
4. Link 컴포넌트: SPA의 부드러움과 SEO의 결합
Next.js는 초기 방문 시에는 서버에서 완성된 페이지를 보여주고, 이후 이동 시에는 필요한 데이터만 교체하는 하이브리드 방식을 취합니다.
<a>태그의 한계: 전체 페이지를 다시 다운로드하여 새로고침(깜빡임)이 발생하고 SPA의 장점이 사라짐.<Link>컴포넌트: 브라우저의 기본 이동 동작을 막고 자바스크립트로 화면 내용만 교체함.
### 성능의 핵심: 프리페칭(Prefetching)
Next.js의 <Link>는 단순히 이동만 돕지 않습니다. 링크가 사용자의 화면(뷰포트)에 들어오는 순간, Next.js는 해당 페이지의 데이터를 미리 로드해둡니다.
사용자가 링크를 클릭하기도 전에 데이터를 준비해두기 때문에, 클릭하는 순간 즉각적인 전환이 일어나는 압도적인 반응성을 제공합니다.
요약 및 결론
| 구분 | 설명 |
|---|---|
| 서버 컴포넌트 | 백엔드에서 실행되어 초기 로딩 속도와 보안 향상 |
| page.js | 경로를 결정짓는 핵심 파일 (보호된 파일명) |
| Link 컴포넌트 | 새로고침 없는 SPA 이동과 프리페칭을 통한 초고속 전환 |
결론
Next.js를 사용한다는 것은 단순히 리액트를 서버에서 돌리는 것을 넘어, 최적의 사용자 경험을 위한 설계 시스템을 도입하는 것입니다. 서버 컴포넌트와 Link 컴포넌트의 조화는 현대 웹이 추구하는 속도와 SEO 두 마리 토끼를 모두 잡는 가장 우아한 방법입니다.
