vue.js 서버 측 렌더링이란 무엇입니까?

vue.js 서버 측 렌더링은 DOM을 생성하고 작동하기 위해 브라우저에서 Vue 구성 요소를 출력합니다. 그러나 동일한 구성 요소를 서버 측 HTML 문자열로 렌더링하여 브라우저에 직접 보낼 수도 있으며, 마지막으로 이러한 정적 태그는 "활성화됩니다. " 클라이언트의 완전한 대화형 애플리케이션입니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【관련 추천 글: vue.js】

서버사이드 렌더링(SSR)이란 무엇인가요?

Vue.js는 클라이언트 측 애플리케이션을 구축하기 위한 프레임워크입니다. 기본적으로 Vue 구성 요소는 브라우저에서 출력되어 DOM을 생성하고 DOM을 조작할 수 있습니다. 그러나 서버 측에서 동일한 구성 요소를 HTML 문자열로 렌더링하고 이를 브라우저로 직접 보낸 다음 마지막으로 이러한 정적 태그를 클라이언트의 완전한 대화형 애플리케이션으로 "활성화"하는 것도 가능합니다.

서버 렌더링 Vue.js 애플리케이션은 대부분의 애플리케이션 코드가 서버와 클라이언트 모두에서 실행될 수 있다는 점에서 "동형" 또는 "범용"으로 간주될 수도 있습니다.

서버 측 렌더링(SSR)을 사용하는 이유는 무엇입니까?

기존 SPA(단일 페이지 애플리케이션)와 비교할 때 서버 측 렌더링(SSR)의 장점은 주로 다음과 같습니다.

• 검색 엔진 크롤러 크롤러가 완전히 렌더링된 페이지를 직접 볼 수 있으므로 SEO가 더 좋습니다.

• 현재 Google 및 Bing 색인 동기 JavaScript 애플리케이션에는 문제가 없습니다. 여기서는 동기화가 핵심입니다. 애플리케이션이 처음에 로딩 국화를 표시한 다음 Ajax를 통해 콘텐츠를 가져오는 경우 크롤러는 페이지 콘텐츠를 크롤링하기 전에 비동기 완료를 기다리지 않습니다. 즉, SEO가 사이트에 중요하고 페이지가 콘텐츠를 비동기적으로 가져오는 경우 이 문제를 해결하려면 서버 측 렌더링(SSR)이 필요할 수 있습니다.

• 특히 느린 네트워크 상태나 느리게 실행되는 장치의 경우 콘텐츠 출시 시간이 더 빨라집니다. 서버 렌더링 마크업을 표시하기 전에 모든 JavaScript의 다운로드 및 실행이 완료될 때까지 기다릴 필요가 없으므로 사용자는 완전히 렌더링된 페이지를 더 빠르게 볼 수 있습니다. 이는 일반적으로 더 나은 사용자 경험을 제공하며 콘텐츠 도달 시간이 전환율과 직접적인 관련이 있는 애플리케이션에 중요합니다.

서버 측 렌더링(SSR)을 사용할 때 다음과 같은 몇 가지 장단점이 있습니다.

• 제한된 개발 조건. 브라우저별 코드는 특정 수명 주기 후크에서만 사용할 수 있습니다. 일부 외부 라이브러리는 서버 렌더링 애플리케이션에서 실행하려면 특별한 처리가 필요할 수 있습니다.

• 빌드 설정 및 배포와 관련된 추가 요구 사항입니다. 모든 정적 파일 서버에 배포할 수 있는 완전 정적 단일 페이지 애플리케이션(SPA)과 달리 서버 렌더링 애플리케이션에는 Node.js 서버 런타임 환경이 필요합니다.

• 서버측 로드가 늘어납니다. Node.js에서 완전한 애플리케이션을 렌더링하는 것은 정적 파일만 제공하는 서버보다 분명히 더 많은 CPU 리소스(CPU 집약적)를 차지하므로 트래픽이 많은 환경(하이 트래픽)에서 사용할 것으로 예상된다면 서버 로드를 준비하세요. 그에 따라 캐싱 전략을 현명하게 사용하십시오.

애플리케이션에 서버 측 렌더링(SSR)을 사용하기 전에 가장 먼저 물어봐야 할 질문은 SSR이 정말 필요한지 여부입니다. 이는 주로 콘텐츠 출시 시간이 애플리케이션에 얼마나 중요한지에 따라 달라집니다. 예를 들어 내부 대시보드를 구축하는 경우 초기 로드 시 추가로 수백 밀리초가 걸리는 것은 중요하지 않으며 서버 측 렌더링(SSR)을 사용하는 것은 당연한 일입니다. 그러나 콘텐츠 출시 시간 요구 사항은 절대적으로 중요한 지표이며, 이 경우 서버 측 렌더링(SSR)은 최적의 초기 로드 성능을 달성하는 데 도움이 될 수 있습니다.

서버 측 렌더링 vs 사전 렌더링(SSR vs 사전 렌더링)

몇 가지 마케팅 페이지(예: /, /about, /contact 등)의 SEO를 개선하기 위해 서버 측 렌더링(SSR)만 조사한다면, 그러면 사전 렌더링이 필요할 수 있습니다. HTML을 실시간으로 동적으로 컴파일하기 위해 웹 서버를 사용하는 대신, 사전 렌더링은 빌드 시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 사전 렌더링 설정이 더 간단하고 프런트엔드를 완전히 정적인 사이트로 처리할 수 있다는 것입니다.

관련 무료 학습 권장 사항: JavaScript(동영상)

위 내용은 vue.js 서버 측 렌더링이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!