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 :

4. 如果 angular 没有替代方案, 那么判断你的代码是否真的需要在 server-side 运行, 如果不需要你可以使用 if(isBrowser) *ngIf="isBrowser" 来禁止它们运行.
<input type="text" #input (blur)="$event.target.className = 'haha';blur($event.target)" >
{{ input.value }}
<div (click)="click($event)" >click</div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析