이전 장에서는 Vue 애플리케이션의 전체 CI/CD 파이프라인을 설정하는 방법을 배웠습니다. 또한 프로덕션용 Netlify를 사용하여 애플리케이션을 배포하는 방법도 배웠습니다. 이제 사용자가 웹을 통해 애플리케이션에 액세스할 수 있는 준비가 되었습니다. 이것으로 Vue 학습 여정을 거의 마쳤습니다. 이 장에서는 Vue 사용의 또 다른 측면인 서버 측 렌더링 및 Nuxt.js를 사용한 정적 사이트 생성 을 살펴보겠습니다.
Vue의 클라이언트 측 렌더링
기본적으로 Vue 애플리케이션은 클라이언트 측 렌더링용이며, 플레이스홀더 index.html 파일, JavaScript 파일(일반적으로 성능 최적화를 위해 Vite에서 청크로 컴파일) 및 완전한 UI 환경을 위한 CSS, 아이콘, 이미지 등과 같은 기타 파일을 포함합니다. 초기 로드 시 브라우저는 index.html 파일에 대한 요청을 서버로 보냅니다. 그 대가로 서버는 원본 플레이스홀더 파일(대개 Vue 엔진이 앱 인스턴스를 마운트하기 위한 고유 ID 선택기 app 및 메인 코드가 포함된 필수 JavaScript 파일을 가리키는 script 태그가 있는 단일 요소가 포함된 파일)을 전달합니다. 브라우저가 HTML 파일을 수신하면 파싱을 시작하고 원하는 main.js 파일과 같은 추가 리소스를 요청한 다음 이를 실행하여 나머지 콘텐츠를 적절히 렌더링합니다(그림 13-1).
그림 13-1. 클라이언트 측 Vue 애플리케이션 렌더링의 흐름
이 시점부터 애플리케이션이 초기화를 완료하고 사용자는 애플리케이션과 상호 작용을 시작할 수 있습니다. Vue는 내장된 라우팅 시스템을 통해 사용자의 보기 변경 요청을 동적으로 처리합니다. 그러나 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지 소스 보기를 선택하면 원본 루트 index.html 파일의 코드만 표시되고 현재 UI 보기는 표시되지 않습니다. 이 동작은 특히 검색 엔진 최적화(SEO)가 필요한 웹사이트나 앱을 구축할 때 문제가 될 수 있습니다.1 (SEO)가 필요한 웹사이트나 앱을 구축할 때 특히 문제가 될 수 있습니다.
또한 사용자에게 콘텐츠를 표시하기 전에 JavaScript 코드를 로드하고 실행하는 과정에서 다운로드해야 하는 대용량 JavaScript 파일, 느린 네트워크, 브라우저가 콘텐츠를 그리는 데 걸리는 시간(퍼스트 페인트) 등의 요인으로 인해 사용자에게 긴 대기 시간이 발생할 수 있습니다. 그 결과 전체 프로세스가 느린 인터랙티브 시간(Time To Interactive2 (TTI)와 느린 퍼스트 콘텐츠 페인트3 (FCP)가 느려질 수 있습니다. 이러한 모든 요소는 전반적인 앱 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month, and much more.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
