AngularJS-서버 측 렌더링
아시다시피 AirBnb 오픈 소스 Rendr ( http://nerds.airbnb.com/weve-open-sourced-rendr ) 는 Backbone 앱 의 서버 측 렌더링 을 가능하게 합니다 . 서버에서 템플릿 렌더링의 첫 번째 "반복"을 실행할 수 있고 클라이언트는 완전히 렌더링 된 HTML 문서와 전체 JS 앱을 가져 오기 때문에 이것은 멋지다. 표시 시간을 크게 줄이고 다른 서버 측 템플릿 시스템을 제거 할 수 있습니다.
그래서 누군가 jsdom 또는 ZombieJS로 AngularJS를 렌더링 할 수 있었 습니까? Node.js의 이러한 dom / browser 에뮬레이션은 이론적으로 간단한 서버 측 Angular 템플릿에 충분해야하지만 검색 결과는 그다지 결정적이지 않았습니다.
또 다른 해결책이 있습니다 : https://github.com/ithkuil/angular-on-server
자세한 내용은 위키
해당 저장소 작성자의 업데이트 : 약 6 년 전 (이 편집 당시)입니다. 이 시점에서, 사람들은 아마 사용해야 https://angular.io/guide/universal 하거나 https://prerender.io/
이 새로운 패키지 https://github.com/a-lucas/angular.js-server를 사용하면 Angular 애플리케이션을 사전 렌더링하고 클라이언트에 HTML을 전송 한 다음 jS 코드를 실행할 수 있습니다.
URL 별 캐싱을 지원하며 URL 사전 렌더링을 활성화하는 규칙을 정의 할 수 있습니다.
추신 :이 패키지의 주요 기여자입니다.
AngularJS는 트릭없이 jsdom 컨텍스트와 함께 작동합니다. angular.js를 js src 목록에 추가하고 angular 앱의 메인 페이지를 jsdom에 추가하면됩니다.
따라서 렌더링은 매우 간단합니다. jsdom에서 angular를 사용하면 작동합니다. 브라우저에 넣는 것은 다소 어렵습니다.
한 가지 방법은 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"쇼 # 109- http ://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ (플레이어에서 32:30 ). 새로운 AngularJS의 의존성 주입 모듈 ( https://github.com/angular/di.js )에 대한 링크가 있습니다 .
@ dai-shi가 connect-prerenderer를 만들었습니다 . 여기를 참조 하십시오 . 여전히 몇 가지 문제가 있지만 좋은 시작이 되길 바랍니다.
한 가지 접근 방식은 HTML 요청을 phantomjs를 실행하는 nodejs 서버로 라우팅하는 것입니다. 나는 phantomjs를 기반으로 한 접근 방식을 사용했습니다. 해결되는지 확인하십시오.
http://himangshu.io/blog/optimizing-single-page-application-using-prerender/
나는 이것이 약간 늦은 대답이라는 것을 알고 있으며, angular.js-server ( https://github.com/a-lucas/angular.js-server )는 수정 된 angular 버전을 사용하여 모든 상황을 감지하는 데 필요한 유휴 상태를 트리거합니다. ajax 요청 및 $ compile 이벤트가 처리됩니다.
거의 수정하지 않고 mean.js 스택을 미리 렌더링했습니다.
이것은 성능이 좋지 않지만 모든 클라이언트 JS를 구문 분석하는 Heorku 용 간단한 PhantomJS 서버 에서 작업하고 있습니다. 특히 Angular 및 Rails와 함께 사용하여 봇 요청에 HTML을 제공합니다.
나는 그것이 여전히 누군가를 도울 수 있기를 바라지 만, 여기에 내가 만든 npm 패키지가 있습니다.
https://www.npmjs.com/package/ng-node-compile
참고 URL : https://stackoverflow.com/questions/16232631/angularjs-server-side-rendering
'development' 카테고리의 다른 글
| YAML 배열을 병합하는 방법은 무엇입니까? (0) | 2020.10.22 |
|---|---|
| 봄 : 경로와 관련하여 / ** 및 / *의 차이 (0) | 2020.10.22 |
| Node.js 요청 객체 문서? (0) | 2020.10.22 |
| 2011 년 iOS / Android 용 HTML5 오프라인 스토리지 솔루션 개발 (0) | 2020.10.22 |
| System.IO.IOException : System.IO.Path.GetTempFileName ()을 사용할 때 "파일이 있습니다"-해결 방법? (0) | 2020.10.22 |