Vue 서버 사이드 렌더링과 Nuxt 3 - Vue 심화 외전 3편Vue Server-Side Rendering and Nuxt 3 - Vue Advanced Part 3
📅
🚀
들어가기 전에 🔗
우리는 지금까지 코드의 재사용성을 높이고 컴포넌트를 유연하게 만드는 여러 고급 기술들을 탐험했습니다.
이제 마지막으로, 우리가 만든 Vue 애플리케이션이 사용자에게 보여지는
방식
에 대해 깊이 알아보고, 성능을 극대화하는 방법을 배워보겠습니다.이번 시간에는
서버 사이드 렌더링(SSR)
의 개념을 이해하고, Vue의 공식 슈퍼 프레임워크인 Nuxt 3
를 알아보도록 하겠습니다.🚀
클라이언트 vs 서버: 렌더링 방식의 차이 🔗
우리가 지금까지 만들어온 일반적인 Vue 애플리케이션은
클라이언트 사이드 렌더링(CSR, Client-Side Rendering)
방식으로 동작합니다.✅
클라이언트 사이드 렌더링(CSR) 🔗
브라우저(클라이언트)가 서버로부터 뼈대만 있는 텅 빈 HTML 파일과 커다란 자바스크립트 파일을 내려받습니다.
그 후, 브라우저가 직접 자바스크립트를 실행하여 화면에 보여줄 내용을 동적으로 그려나가는 방식입니다.
마치 레고 조립 세트를 받은 뒤, 사용자가 직접 설명서를 보고 조립을 완성하는 것과 같습니다.
초기 로딩 속도가 느리고, 검색 엔진이 내용을 파악하기 어렵다는 단점이 있습니다.
👍
이 단점을 극복하기 위해 등장한 것이 바로 서버 사이드 렌더링(SSR, Server-Side Rendering)입니다.✅
서버 사이드 렌더링(SSR) 🔗
사용자가 특정 페이지를 요청하면, 서버에서 미리 해당 페이지의 HTML을
완성된 상태
로 만들어 브라우저에 보내줍니다.
브라우저는 즉시 완성된 페이지를 사용자에게 보여주고, 그동안 백그라운드에서 자바스크립트 파일을 내려받아 페이지에 생명을 불어넣어(interactive 하게 만들어) 줍니다.
마치 완전히 조립된 멋진 레고 완성품을 배송받는 것과 같습니다.
초기 로딩 속도가 매우 빠르고, 검색 엔진 최적화(SEO)에 절대적으로 유리합니다.
CSR vs SSR
🚀
Nuxt 3 🔗
SSR을 직접 구현하는 것은 매우 복잡하고 어려운 일입니다.
다행히도, Vue 생태계에는 이 모든 복잡한 과정을 해결해주는 공식 프레임워크가 있습니다.
바로
Nuxt 3
입니다.Nuxt는 단순히 SSR 기능만 제공하는 도구가 아닙니다.
Vue를 기반으로 더욱 강력하고 생산성 높은 웹 애플리케이션을 만들 수 있도록 수많은 편의 기능을 제공하는
프레임워크의 프레임워크
입니다.- 파일 기반 라우팅
router/index.ts파일을 직접 만들 필요 없이,pages폴더에 파일을 만드는 것만으로 자동으로 라우팅이 설정됩니다. - 자동 임포트
ref,computed같은 Vue API나components폴더 안의 컴포넌트들을import구문 없이 바로 사용할 수 있습니다. - 다양한 렌더링 모드SSR뿐만 아니라 CSR, 정적 사이트 생성(SSG) 등 프로젝트의 성격에 맞게 렌더링 방식을 쉽게 변경할 수 있습니다.
- 강력한 데이터 페칭서버와 클라이언트 양쪽에서 데이터를 효율적으로 불러오는 내장 함수들을 제공합니다.
🚀
Nuxt 3 프로젝트 시작하기 🔗
Nuxt 3 프로젝트를 시작하는 것은 매우 간단합니다.
터미널에 다음 명령어를 입력해 주세요.
npx nuxi@latest init nuxt-appnuxt-app이라는 이름의 프로젝트가 생성됩니다.
폴더로 이동하여 의존성을 설치하고 개발 서버를 실행해 봅시다.cd nuxt-app
npm install
npm run dev프로젝트 폴더를 열어보면, 기존의 Vue 프로젝트와는 조금 다른 구조를 볼 수 있습니다.
app.vue가장 최상위 컴포넌트로, Vue 프로젝트의App.vue와 비슷한 역할을 합니다. 모든 페이지가 이곳을 통해 렌더링됩니다.pages/이 폴더 안에 Vue 파일을 만들면, 파일 이름이 곧 URL 경로가 됩니다.nuxt.config.tsNuxt 프로젝트의 모든 설정을 담당하는 파일입니다.
✅
파일 기반 라우팅 🔗
Nuxt의 가장 큰 매력 중 하나인 파일 기반 라우팅을 직접 경험해 보겠습니다.
먼저,
app.vue 파일을 열어 아래와 같이 수정합니다.
<NuxtPage />는 Vue Router의 <RouterView />와 같은 역할을 합니다.<template>
<div>
<header>
<nav>
<NuxtLink to="/">홈</NuxtLink> |
<NuxtLink to="/about">소개</NuxtLink>
</nav>
</header>
<main>
<!-- 페이지 컴포넌트가 이 자리에 렌더링됩니다. -->
<NuxtPage />
</main>
</div>
</template>이제
pages 폴더를 만들고, 그 안에 index.vue와 about.vue 파일을 생성합니다.<template>
<h1>홈 페이지</h1>
<p>Nuxt의 세계에 오신 것을 환영합니다!</p>
</template><template>
<h1>소개 페이지</h1>
<p>이 페이지는 파일 기반 라우팅으로 만들어졌습니다.</p>
</template>우리는 라우터 설정을 전혀 건드리지 않았지만, 브라우저에서
/와 /about 경로로 이동하면 각 페이지가 완벽하게 동작하는 것을 볼 수 있습니다.🚀
결론 🔗
이것으로 3편에 걸친 'Vue 심화 외전' 시리즈를 모두 마칩니다.
오늘은 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 차이점을 배우고, SSR을 쉽고 강력하게 구현할 수 있게 해주는 Nuxt 3의 기초를 맛보았습니다.
- SSR은 빠른 초기 로딩 속도와 SEO를 위해 완성된 HTML을 서버에서 만들어 보내주는 방식입니다.
- Nuxt 3는 SSR을 포함하여 파일 기반 라우팅, 자동 임포트 등 Vue 개발을 극적으로 편하게 만들어주는 공식 프레임워크입니다.
이제 여러분은 Vue의 기본기를 넘어, 코드의 재사용성을 높이고, 컴포넌트를 유연하게 다루며, 성능까지 고려하는 개발자로 성장하셨습니다.
지금까지 배운 모든 지식을 바탕으로 여러분만의 멋진 프로젝트를 자신 있게 시작해 보시길 바랍니다.
✅