angular2 學習筆記 ( server-side rendering, angular universal, 服務端渲染 )

更新 : 2018-01-10 

大半年過去了依然沒有作 server side render 的衝動，可是一直有關注這方便的作法. 

今天領悟了一些道理, 這裏作個記入. 

server side render 其實也不僅是爲了 SEO, 並且自從 Google 能渲染 js 以後更加不重要了. 

其它使用的地方好比 fb, whatsap, wechat 的爬蟲都是能夠用到 server side render 的 

ssr 有一個規則就是遠離 dom, 其實應該說 "render" 的時候 "不依賴" browser. 

若是你寫事後端渲染就應該頗有這個 feel, 咱們會用 html + css 實現全部的設計, 用 responsive 的 css 寫法去作響應式. 

因此在 render 的時候, 是徹底不須要以來任何 browser 元素的. 

 

 

 

更新 : 2017-05-03 

angular 4.0 把 universal 歸入本身的陣營, 有許多的改變, 目前已經有 githud starter 了 

https://github.com/angular/universal 

nodejs, asp.net core 都有. 

不過呢，我依然沒有去使用它，等到 cli 支持了才用. 

目前接受一個臨時方案給你們. 

https://prerender.io

它的作法是使用 js 引擎渲染你的頁面而後收入起來，當發現蜘蛛訪問時，返回這個 cache 頁面.

頁面被保存在另外一臺服務器上，你有 2 個選擇，1是用 prerender.io 的服務器, 首 250 page 免費，以後的就要收費了. 

第 2 選擇是本身建一個服務器來收藏, prerender 是開源項目有提供所有代碼.

asp.net 網站服務器基本設置

https://github.com/greengerong/Prerender_asp_mvc 

angular 方面惟一要留意的是 import polyfills, 由於 prerender.io 的 js 引擎是 es5 的. 

若是有使用 ajax 或 lazyload module 記得使用 

參考 : https://prerender.io/documentation/best-practices

ngAfterViewInit() {
  window['prerenderReady'] = true;
}

像這樣. 

若是運行不起來, prerender.io 還有一個很好的 support. 

support@prerender.io

即便你沒有付費, 他依然用心的幫你調試找出問題，很是專業 ! 

 

 

 

2017-02-10

服務端渲染主要是爲了 SEO 搜素引擎.

angular universal 爲咱們處理好這一切. 

從前須要特意寫一個版本給 SEO 作兩份工 /.\ 

 

refer : 

https://medium.com/google-developer-experts/angular-universal-for-the-rest-of-us-922ca8bac84#.mvfr78yoq

https://github.com/angular/universal#universal-gotchas

 

服務端沒有任何 browser 的功能, 只有 javascript , 因此要很好的支持 server-side render 咱們必須限制咱們的代碼.

好比 : 不能夠直接調用 Dom/Bom api 

包括 Window, FileReader, xmlhttprequest, Navigator, document.queryselector 等等

 

 

第一次聽起來以爲難以想象, 不過只要你依據下面我說的方式就能夠了.

首先要明白, 服務端渲染, 只是爲了 SEO，SEO 只是一個 reader, 它不會和你的界面有任何互動, 因此能夠說整個過程當中, 代碼只會運行 ngOnInit 的部分.

其它的 onClick event 那些都是不會被運行的哦.

 

是否是以爲範圍小了不少呢.. 呵呵

 

步驟 : 

1. 判斷你的代碼是否會被 server-side 運行.

2. 判斷你的代碼是否涉及了 Dom/Bom ( encodeURIComponent 是 javascript 哦 )

3. 若是涉及了, 那麼看看 angular 有沒有替代的方法, 好比 Renderer, Http, 都是用來替代 Dom/Bom 的，讓你不直接接觸, 在不一樣的場景下 , universal 會改變它們的執行. 
4. 若是 angular 沒有替代方案, 那麼判斷你的代碼是否真的須要在 server-side 運行, 若是不須要你可使用 if(isBrowser) *ngIf="isBrowser" 來禁止它們運行. 

經過上面的步驟基本上可讓你安心的使用 universal 了 

 

 

好比這樣寫是 ok 的, 只要它不跑就不會有 error 

  <input type="text" #input (blur)="$event.target.className = 'haha';blur($event.target)" >
  {{ input.value }}
  <div (click)="click($event)" >click</div>