Angular 服务端渲染(SSR) 学习笔记
文章目录
- 1 服务器端渲染 （SSR）
- 2 SSR的利弊
- 2.1 SSR的优势
- 2.2 SSR的局限
- 3 Angular Universal
- 3.1 Node.js Express web server
- 3.2 限制
- 4 总结
1 服务器端渲染 （SSR）
SSR是Server Side Render简称，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
2 SSR的利弊
2.1 SSR的优势
更利于SEO: 不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
更利于首屏渲染: 首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。
移动设备等性能不高的设备 针对这些设备，在服务器端渲染，可以大大提高用户体验。
2.2 SSR的局限
- 服务端压力较大: 本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
- 学习成本相对较高: 有更多内容（e.g. node.js）需要学习。
3 Angular Universal
Angular Universal 是Angular的SSR的技术实现 – 服务器端渲染，直接传给客户端静态页面。
3.1 Node.js Express web server
可以使用node.js 的Express.js 框架，实现Angular的服务器端渲染。
- 引入 express-engine
ng add @nguniversal/express-engine
Angular CLI 将自动添加服务器端文件，
- main.server.ts - bootstrapper for server app
- server.ts - express web server
- app/app.server.module.ts - server-side application module
- 本地启动Web Server，渲染（生成）静态页面
npm run dev:ssr
- 本地浏览器访问
http://localhost:4200/
3.2 限制
由于js代码在server端执行，那么自然的某些浏览器特有的全局对象是不能使用的，比如window, document, navigator, 和location。如果使用，需要使用Angular特有的替换实现，如Location，DOCUMENT。
4 总结
经历了web1.0 时代，再到前后端分离，限制的服务器端渲染（SSR）不是历史的退步，而是Web技术螺旋式的发展。是为了在特定场合、特定需求下的解决方案。没有最好的技术，只有最合适的技术。
引用
- https://angular.io/guide/universal
Angular 服务端渲染(SSR) 学习笔记相关推荐
- 服务端渲染(SSR) 通用技术解决方案
项目背景 服务端渲染(SSR) 通用技术解决方案的诞生来源于对 360搜索百科移动端项目的一次重构实践.而当时决定重构该项目的主要原因有以下几点: 1. 技术栈陈旧,熟悉.开发以及维护成本都较高 项 ...
- 服务端渲染SSR与客户端渲染
文章目录 一.服务端渲染和客户端渲染的区别 服务端渲染(SSR -- server side render) 客户端渲染 二.使用服务端渲染(SSR)的利弊 优势 局限 三.实际应用 应用原则 举例 ...
- React + Koa 实现服务端渲染(SSR)
⚛️React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性 ...
- 服务端渲染SSR的理解
服务端渲染SSR的理解 SSR服务端渲染Server Side Render就是当进行请求时,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的HTML即可. 客户端渲染CSR 通常在构建 ...
- vue服务端渲染ssr
vue服务端渲染ssr 一.SSR概念 传统web渲染技术 SPA SSR 二.webpack+vue2的实现方式 1.创建工程 2.安装依赖 3.编写一个简单的SSR 4.完整的ssr 5.代码链接 ...
- node+ejs实现服务端渲染SSR
一.服务端渲染SSR 1.什么是客户端渲染和服务端渲染? 客户端渲染:客户端向服务端请求HTML页面,后端不返回完整的 HTML页面,浏览器解析HTML页面过程中如果遇到ajax数据请求,会向服务端请 ...
- 服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR) 客户端渲染和传统服务端渲染的问题 SPA应用有两个非常明显的问题: 首屏渲染慢 不利于 SEO 传统的服务端渲染又存在: 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有 ...
- 浅谈服务端渲染(SSR) 与使用场景
什么是SSR(服务端渲染)MUA? SSR是Server Side Render的缩写,简单来讲:服务端渲染 就是网页上面呈现的内容在服务器端就已经生成好了,当用户浏览网页时,服务器把这个在服务端生成 ...
- 搭建自己的 服务端渲染 SSR
一.VUE SSR是什么 官方文档:https://ssr.vuejs.org/ Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染 ...
最新文章
- 前端校招准备--HTTP相关面试题总结
- 昇腾 OSError: [Errno 22] Invalid argument: ‘protocol‘
- Kinect学习（一）：开发环境搭建
- vs工程移植报错：缺少MSVCP140D.dll ,CONCRT140D.dll ucrtbased.dll vcruntime140d.dll错误。
- 爱摸鱼的Dillonh
- 如何实现Windows宿主系统和虚拟机ubuntu系统文件互相访问
- 保存点云数据_PCL入门系列三——PCL进行数据读写
- C# 连接SQL 连接字符串
- webview加载页面有2秒白屏_iOS WKWebview 白屏检测实现
- [MySQL FAQ]系列 -- 如何利用触发器实现账户权限审计
- 蒙特卡洛模拟Ising模型
- 如何导出mysql数据库
- Python数据分析之时间处理技巧1,2,3
- 智能音箱音效哪个好_智能音箱这么多，哪个智能音箱，才是现在最好的
- 唐巧访谈： iOS大V的技术进阶之路
- anaconda利用pip安装module
- latex 精准调整控制表格每一行之间的行距
- 多应用多平台支付模块设计-基础模块开篇
- java调用默认打印机，打印小票(80mm)
- FatFS文件系统的使用（STM32）