NuxtJS 활용한 웹 개발, 라우팅 및 SSR 및 CSR 페이지 이동 과정

NuxtJS 활용한 웹 개발, 라우팅 및 SSR 및 CSR 페이지 이동 과정 - Whitmem

VueJS 개발
2025-06-16 23:58 게시 5dc1be74b0cb49c0aa4a

이 페이지는 외부 공간에 무단 복제할 수 없으며 오직 있는 그대로 게시되며 부정확한 내용을 포함할 수 있습니다. 법률이 허용하는 한 가이드 라인에 맞춰 게시 내용을 인용하거나 출처로 표기할 수 있습니다.
This page is not to be distributed to external services; it is provided as is and may contain inaccuracies.

기본적으로 NuxtJS 패키지가 생성되면 위와 같은 디렉터리 구조를 가진다.

라우팅을 생성하기 위해서 pages 라는 디렉터리를 생성하면 된다.

pages 라는 디렉터리 안에 생성하는 각 파일들은 파일 명대로 routing 경로를 가지며 이 routing 을 활성화 하기 위해서는 App.js 에 <NuxtPage/> 를 선언해주면 된다.

app.js 는 웹 페이지의 전반적인 구조를 가지는 부분이며, NuxtPage 태그가 존재하는 부분에 라우팅된 각 태그들의 페이지 정보가 렌더링된다.

즉 starts.vue 에는

그리고 test.vue 에는

위와 같이 선언이 되어있을 때, 웹 페이지

http://주소/starts 및 http://주소/test 로 접근할 수 있다.

특이한 점은 SSR 렌더링이 기본적으로 활성화되어 있기 때문에, 주소로 바로 접근하는 경우 웹에서 렌더링하지 않았더라도 Dom 컴포넌트들이 모두 렌더링된 상태로 접근되며, 버튼을 눌렀을 때에는 비로소 동적으로 페이지가 불러와진다.

실제 페이지 소스보기를 눌렀을 때 페이지 이동 하기 등과 같은 각 컴포넌트들이 웹 브라우저에서 별도 렌더링하지 않았음에도 미리 렌더링되어 있는 것을 볼 수 있다.

즉 최초 렌더링시에는 NuxtJS 가 서버쪽에서 해당 컴포넌트들을 모두 렌더링하고 그 결과를 반환하며, 그 결과에서 각 이벤트만 연결 및 할당한다. 그리고 브라우저에서 사용자가 어떤 액션을 취하면 그 때 비로소 동적으로 데이터를 로드 및 표시한다.

댓글 0개

댓글을 작성하는 경우 댓글 처리 방침에 동의하는 것으로 간주됩니다. 댓글을 작성하면 일회용 인증키가 발급되며, 해당 키를 분실하는 경우 댓글을 제거할 수 없습니다. 댓글을 작성하면 사용자 IP가 영구적으로 기록 및 부분 공개됩니다.