AngularJS - 서버측 렌더링

AngularJS - 서버측 렌더링

아시다시피 AirBnb는 Backbone 앱의 서버 측 렌더링을 가능하게 하는 소스 Rendr(http://nerds.airbnb.com/weve-open-sourced-rendr)을 엽니다.서버에서 템플릿 렌더링의 첫 번째 "반복"을 실행할 수 있고 클라이언트는 HTML 문서와 전체 JS 앱을 모두 렌더링할 수 있기 때문에 이 방법은 좋습니다.표시 시간을 대폭 단축하고 다른 서버측 템플릿 시스템을 제거할 수 있습니다.

그래서 누군가 앵글을 어떻게 해서든jsdom이 있는 JS 또는 ZombieJS?Node.js에서의 이러한 dom/browser 에뮬레이션은 이론적으로는 서버측 Angular 템플릿 작성에 충분하지만, 검색 결과는 그다지 결정적이지 않았습니다.

여기 또 다른 솔루션이 있습니다.https://github.com/ithkuil/angular-on-server

자세한 내용은 Wiki를 참조하십시오.

그 레포의 저자로부터의 갱신: 그것은 약 6년 전(이 편집 시점)입니다.현시점에서는, https://angular.io/guide/universal 또는 https://prerender.io/ 를 사용해 주세요.

이 새로운 패키지 https://github.com/a-lucas/angular.js-server에서는 Angular 어플리케이션을 사전 다운로드하여 클라이언트에 HTML을 전송하면 jS 코드가 실행됩니다.

URL 단위의 캐시를 지원하며 URL 사전 렌더링을 활성화하기 위한 규칙을 정의할 수 있습니다.

PS: 저는 이 패키지의 주요 공헌자입니다.

AngularJS는 트릭 없이 jsdom 컨텍스트에서 작동합니다.초기화 시 js src 목록에 angular.js와 angular app의 메인 페이지를 jsdom에 추가합니다.

렌더링은 매우 간단합니다.jsdom에서 angular를 사용하면 효과가 있습니다.브라우저에 넣기가 좀 어려워요.

1가지 방법은 DOM 변경을 일괄 동기화하는 것입니다.

서버 간 동적 업데이트를 얻으려면 MutationEvents를 사용할 수 있습니다(유감스럽게도 jsdom은 MutationObservers를 지원하지 않지만 MutationEvents는 매우 빠르게 작동합니다).이를 사용하여 누적기 어레이에 DOM 변경 내용을 누적하고 이를 클라이언트 브라우저에 정기적으로 푸시합니다(25ms당).

또한 사용자 이벤트를 활성화하려면 브라우저에서 문서별로 이벤트를 추적하고 유사 항목이 누적되어 서버에 푸시해야 합니다.

이러한 접근방식의 구현 중 하나는 jsdom-sync(https://www.npmjs.org/package/jsdom-sync)입니다.

서버측 렌더링의 단점은 DOM 박스 모델사이즈가 없다는 것입니다.요소의 너비/높이를 얻으려면 실제로 렌더링해야 하기 때문입니다.즉, 이 솔루션은 svg 등에 거의 적합하지 않습니다.

또한 스코프 모델을 보고 브라우저 측 스코프와 동기화하는 것도 고려할 수 있지만 전혀 다른 이야기입니다.

저도 해결책을 찾고 있어요.그러나 브라우저를 사용하여 서버에서 html을 렌더링하고 프런트엔드로 전송하는 것은 선택사항이 아닙니다.Airbnb가 먼저 시도했지만 느리고 자원이 부족하다는 이유로 거절당했습니다.생산 솔루션이 아닙니다.

업데이트: 이는 Object.observe의 도입으로 곧 실현될 수 있습니다.)

AngularJS 2.0은 서버에서도 사용할 수 있습니다.Vojta Jina는 "JavaScript Jabber" 쇼 #http://http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (플레이어 32:30)에서 이에 대해 이야기합니다.새 Angular에 대한 링크가 있습니다.JS의 의존성 주입 모듈 - https://github.com/angular/di.js.

@creating-shi created connect-prenderer.여기를 참조해 주세요.아직 몇 가지 문제가 있지만 시작이 좋기를 바랍니다.

한 가지 방법은 HTML 요청을 pantomjs를 실행하는 nodejs 서버로 라우팅하는 것입니다.pantomjs에 기반한 접근 방식을 사용했습니다.해결되는지 확인

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

이것은 다소 늦은 응답인 것을 알고 있습니다.angular.delect-server(https://github.com/a-lucas/angular.js-server)는 angular의 수정된 버전을 사용하여 모든 Ajax 요청 및 $delect 이벤트가 처리되는 시기를 감지하는 데 필요한 유휴 상태를 트리거합니다.

mean.js 스택을 거의 변경하지 않고 프리렌더 할 수 있었습니다.

이건 퍼포먼스는 아니지만 간단한 팬텀을 만들고 있어요클라이언트 JS를 해석하는 Heorku용 JS 서버.저는 특히 Angular와 Rails에서 HTML을 봇 요청에 제공하기 위해 사용합니다.

그래도 도움이 되었으면 합니다만, 제가 작성한 npm 패키지는 다음과 같습니다.

https://www.npmjs.com/package/ng-node-compile

언급URL : https://stackoverflow.com/questions/16232631/angularjs-server-side-rendering