Nuxt

Nuxt는 Vue를 사용해 웹 애플리케이션을 구성하는 프레임워크이다. Vue 컴포넌트에 페이지 구성과 렌더링 전략을 연결한다. 브라우저 안에서만 실행하는 방식뿐 아니라 서버에서 만든 HTML을 전달하는 구성도 지원한다.

유니버설 렌더링

유니버설 렌더링에서는 서버가 HTML을 만들고 브라우저가 이를 받은 뒤 자바스크립트로 상호작용을 연결한다. 이미 만들어진 화면과 클라이언트 동작을 연결하는 과정을 하이드레이션이라고 부른다. 서버와 브라우저 양쪽에서 코드가 실행될 수 있다는 점이 설계에 영향을 준다.

실행 환경의 차이

서버에서는 브라우저 전용 객체를 그대로 사용할 수 없다. 또한 현재 시각이나 무작위 값처럼 두 환경에서 달라질 수 있는 결과를 최초 화면에 직접 넣으면 서버 HTML과 클라이언트의 예상 결과가 어긋날 수 있다. 상태와 데이터가 양쪽으로 어떻게 전달되는지 확인한다.

렌더링 선택 예시

공개 상품 소개는 서버에서 본문을 준비하고 사용자별 관리 화면은 클라이언트 상호작용을 중심으로 구성할 수 있다. Nuxt는 유니버설·클라이언트·하이브리드 렌더링을 지원한다. 어느 방식이든 검색 노출, 최초 응답, 자바스크립트 비용과 운영 환경을 함께 판단한다.

Vue와의 관계

Vue는 컴포넌트와 반응형 상태를 담당하는 기반이고 Nuxt는 애플리케이션의 구성과 렌더링 흐름을 제공한다. 클라이언트 렌더링을 사용한다고 API 서버까지 필요 없어지는 것은 아니며, 서버 렌더링을 사용한다고 모든 화면이 자동으로 빠르거나 검색에 최적화되는 것도 아니다.

참고 자료