更新 : 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>