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

  <input type="text" #input (blur)="$event.target.className = 'haha';blur($event.target)" >

  {{ input.value }}

  <div (click)="click($event)" >click</div>