Next.js

Next.js는 React를 기반으로 페이지와 라우팅, 서버·클라이언트 렌더링을 구성하는 웹 애플리케이션 프레임워크이다. React 컴포넌트를 사용하지만 애플리케이션 전체의 데이터 전달과 실행 환경을 다루는 계층을 추가한다.

서버와 클라이언트 경계

App Router에서는 페이지와 레이아웃이 기본적으로 서버 컴포넌트이다. 서버에서 데이터를 읽고 화면 구성을 전달할 수 있으며, 사용자 상호작용이나 브라우저 API가 필요한 부분에는 클라이언트 컴포넌트를 사용한다.

use client는 클라이언트 쪽 모듈 경계를 선언한다. 페이지 전체를 무조건 이 경계 안에 넣기보다 실제로 상태와 이벤트가 필요한 부분을 나누면 브라우저로 전달하는 코드의 범위를 줄일 수 있다. 클라이언트 컴포넌트라는 이름을 최초 HTML의 서버 렌더링이 전혀 없다는 뜻으로 받아들이지는 않는다.

상품 상세 페이지 예시

상품 설명은 서버에서 조회해 표시하고, 수량 변경이나 장바구니 버튼은 상호작용 컴포넌트로 구성할 수 있다. 서버에서 클라이언트로 넘기는 값에 비밀 키나 내부 전용 데이터가 섞이지 않도록 전달 경계를 설계한다.

렌더링과 캐시

어디서 실행되는지, 언제 HTML을 만드는지, 결과를 얼마나 재사용하는지는 서로 다른 질문이다. 서버 컴포넌트라고 항상 요청마다 새 데이터를 읽는다고 단정하지 않는다. 캐시와 재검증 동작은 사용 중인 Next.js 버전과 API를 기준으로 확인한다.

React와의 관계

React는 화면을 구성하는 핵심 프로그래밍 모델을 제공하고 Next.js는 그 모델을 웹 서비스로 구성하는 기능을 제공한다. 두 문서는 별도로 유지하며, 다른 React 기반 프레임워크의 동작을 Next.js의 규칙으로 설명하지 않는다.

참고 자료