Skip to content

Latest commit

 

History

History
 
 

ko

README.md

Vue.js 서버 사이드 렌더링 가이드

참고사항: 이 가이드는 아래에 표기된 라이브러리들의 최소 요구사항을 필요로 합니다.

  • vue & vue-server-renderer >= 2.3.0
  • vue-router >= 2.5.0
  • vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0

Vue 2.2 버전과 함께 SSR을 사용하고 있다면 권장하는 코드 구조가 약간 다릅니다. (runInNewContext이 false로 설정됨) 기존 앱을 사용해야 하는 것이 맞지만 새로운 권장 방식으로 마이그레이션 하는 것이 좋습니다.

서버사이드 렌더링(SSR)이란 무엇입니까?

Vue.js는 클라이언트 측 애플리케이션을 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 DOM을 생성 및 조작 후 출력합니다. 그러나 동일한 컴포넌트를 서버의 HTML 문자열로 렌더링한 후 직접 브라우저로 보내고 마지막으로 정적 마크업을 클라이언트의 상호작용하는 애플리케이션으로 "hydrate" 하는 것도 가능합니다.

서버에서 렌더링된 Vue.js 앱은 코드 대부분이 서버와 클라이언트 모두에서 실행하는 점에서 "같은 형태" 이며 "범용적"으로 여겨질 수 있습니다.

왜 SSR을 사용하나요?

전통적인 SPA(싱글 페이지 애플리케이션)에 비해 SSR의 장점은 주로 아래에 있는 내용과 같습니다.

  • 검색 엔진 크롤러는 완전히 렌더링 된 페이지를 직접 볼 수 있으므로 검색 엔진 최적화가 개선됩니다.

    현재 Google과 Bing은 동기식 자바스크립트 애플리케이션의 인덱싱을 할 수 있습니다. 여기서 동기식이 핵심 단어입니다. 앱이 로딩 스피너로 시작한 다음 Ajax를 이용해 컨텐츠를 가져오는 경우 크롤러가 완료될 때까지 기다리지 않습니다. 즉, SEO가 중요한 페이지에서 비동기적으로 콘텐츠를 가져오는 경우 SSR이 필요합니다.

  • 컨텐츠 도달 시간 단축, 특히 느린 인터넷 또는 느린 장치의 경우에 서버 렌더링 마크업은 모든 자바 스크립트가 다운로드되어 실행될 때까지 기다릴 필요가 없으므로 사용자는 완전히 렌더링 된 페이지를 더 빨리 볼 수 있습니다. 일반적으로 사용자 경험이 향상되고 전환율과 직접적인 관련성이있는 애플리케이션의 경우 중요해질 수 있습니다.

하지만 SSR을 사용할 때 고려해야할 몇가지 단점이 있습니다.

  • 개발 제약 사항이 있습니다. 브라우저의 특정 코드는 특정한 라이프사이클에서만 사용할 수 있습니다. 일부 외부 라이브러리는 서버에서 렌더링 된 애플리케이션에서 실행할 수 있도록 추가적인 처리가 필요할 수 있습니다.
  • 설치 및 배포 요구사항을 보다 복잡하게 만들 수 있습니다. 정적 파일 서버에 배포할 수 있는 완전히 정적인 SPA와 달리 서버 사이드 렌더링 애플리케이션에서는 Node.js 서버를 실행할 수 있는 환경이 필요합니다.
  • 더 많은 서버측 부하가 생깁니다. Node.js의 전체 애플리케이션 렌더링은 정적 파일을 제공하는 것 보다 CPU를 많이 사용하므로 트래픽이 많을 것으로 예상되면 서버 부하에 대비하고 캐싱 전략을 잘 짜야합니다.

앱에 SSR을 사용하기 전에 먼저 실제 필요한지 고민해야합니다. 보통 앱의 컨텐츠가 얼마나 빨리 도달해야 하는지에 달려 있습니다. 예를 들어, 초기 로드 시 추가적인 수백 밀리 초가 그다지 중요하지 않은 내부 대시 보드를 구축하는 경우 SSR은 불필요합니다. 그러나 시간에 따른 컨텐츠가 절대적으로 중요한 경우 SSR을 사용하면 최상의 초기 로드 성능을 얻을 수 있습니다.

서버 사이드 렌더링 vs 사전 렌더링

몇 가지 마케팅 페이지 (예 : /, /about, /contact 등)의 검색 엔진 최적화를 개선하기 위해 SSR을 고려하는 중이라면 사전 렌더링이 더 좋습니다. HTML을 즉석에서 컴파일하기 위해 웹 서버를 사용하는 대신 사전 렌더링은 빌드시 특정 경로에 대한 정적 HTML 파일을 생성합니다. 장점은 미리 렌더링을 설정하는 것이 훨씬 간단하며 프론트 엔드를 완전히 정적인 사이트로 유지할 수 있다는 것입니다.

webpack을 사용하는 경우 prerender-spa-plugin을 사용하여 사전 렌더링을 쉽게 추가 할 수 있습니다. Vue 앱으로 광범위하게 테스트되었습니다. 실제로 제작자는 Vue 핵심 팀의 멤버입니다.

이 가이드에 관하여

이 안내서는 Node.js를 서버로 사용하는 서버 렌더링 싱글 페이지 애플리케이션에 중점을 둡니다. Vue SSR과 다른 백엔드 설정을 혼용하는 것은 다른 주제이므로 이 가이드에서는 다루지 않습니다.

이 가이드는 매우 깊이 있고 Vue.js 자체에 이미 익숙하고 Node.js와 webpack에 대한 실제 지식이 있다고 가정합니다. 즉시 원활하게 사용할 수있는 더 높은 수준의 솔루션을 원한다면 Nuxt.js를 사용해보십시오. 동일한 Vue 스택을 기반으로하지만 많은 상용구를 추상화하고 정적 사이트 생성과 같은 몇 가지 추가 기능을 제공합니다. 그러나 앱 구조를 직접 제어해야하는 경우 사용방식이 맞지 않을 수 있습니다. 그럼에도 불구하고 상황이 어떻게 작동하는지 더 잘 이해하기 위해 이 안내서를 읽는 것이 여전히 유용할 것입니다.

이 가이드를 읽으면서 가이드가 다루는 대부분의 기술을 사용하는 HackerNews Demo를 참조하는 것이 도움이 될 것입니다.

마지막으로, 이 가이드는 완벽하지 않습니다. 잘 작동하고 있는 것을 알고 있지만 개선할 여지가 있습니다. 이 가이드는 앞으로 개정 될 수 있습니다. 풀 리퀘스트를 해주세요