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. 

[e-mail]

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

 

 

 

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>