什么是服务端渲染、客户端渲染、SPA、预渲染,看完这一篇就够了
服务端渲染(SSR)
简述:
又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML。
鼠标右击点击查看源码时,页面代码可以在源代码中看到。
性能消耗在服务器端,用户达到一定程度的时候,后端会考虑缓存
部分数据,避免消耗过多的资源重复渲染。
优点:
前端耗时少,首次渲染快,更快的内容到达时间
利于SEO
缺点:
网络传输数据量大,占用部分服务器运算资源
用户体验差
不容易维护,前端修改部分html/css后端也要改
客户端渲染
简述:
又称为前端渲染,起源于js的兴起,ajax让前端渲染更加成熟
前端专注于ui,后端专注于逻辑,真正意义上实现了前后端的分离
通过约定好的API来交互,后端提供数据,前端根据数据生成DOM插入HTML页面。
初次渲染大都是将原html中的数据标记{{}}替换
鼠标右击查看源码,页面代码不可以在源代码中看到
性能消耗在客户端
优点:
减少服务器压力
可以实现局部刷新,无需每次都请求完整的页面,体验更好
缺点:
前端耗时较多,首屏渲染慢,渲染前要下载一堆js和css文件
不利于SEO,爬虫看不到完整的代码
难点:
数据变更后,页面响应式变更如何节省资源?直接DOM的读写是很慢的
SPA
简述:
single page application单页面应用,只有一张Web页面的应用
加载单个html页面并在用户与应用程序交互时动态更新该页面的Web应用程序
页面初始化时加载必须的htm,js,css,所有操作都在此页面完成,通过js控制
MVVM:经典的MVVM开发模式,前后端各负其责
ajax:重前端,业务逻辑在本地操作,数据通过ajax同步提交
优点:
只需要处理#后面的字符,页面并不会重载,实现局部刷新
缺点:
不容易管理,也不够安全
不利于SEO,SEO需花费额外的功夫
预渲染
简述:
核心:prerender-spa-plugin
无需服务器实时动态编译,采用预渲染,在构建时针对特定路由简单的生成静态HTML文件
优点:
几乎可以获得服务端渲染的所有优点,没有缺点
加载应用程序的路由,将结果保存在一个静态的HTML文件中
无需更改代码或添加服务器端
缺点:
若网站有成百上千条路线,预编译会非常的慢
虽每次更新只需要一次但会需要更长的时间
适用场景:
只需改善少数页面的SEO,可以采用预渲染
// webpack配置
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: [ '/', '/home', '/infomation', '/ticket', '/scenery', '/about' ],
renderer: new Renderer({
headless: false,
renderAfterDocumentEvent: 'render-event'
})
}),
如何选择?
1.注重SEO的新闻网站,非强交互的页面,建议采用服务器端渲染
2.对于强交互的页面,不注重SEO,采用客户端渲染
3.只需改善少数页面的SEO,采用预渲染
什么是服务端渲染、客户端渲染、SPA、预渲染,看完这一篇就够了的更多相关文章
- IOS开发系列之阿堂教程:玩转IPhone客户端和Web服务端交互(客户端)实践
说到ios的应用开发,我们不能不提到web server服务端,如果没有服务端的支持,ios应用开发就没有多大意义了,因为从事过手机开发的朋友都知道(Android也一样),大量复杂业务的处理和数据库 ...
- umi框架应用服务端SSR,实现数据预渲染
当我们的应用使用服务端渲染的方式时,可能需要把初始化加载的数据例如推荐等不需要用户输入的内容直接渲染获取,也有利于SEO. 上一篇已经实现服务端渲染,本次实现服务端获取数据后在做渲染. 利用getIn ...
- asp.net获取服务端和客户端信息
asp.net获取服务端和客户端信息 获取服务器名:Page.Server.ManchineName获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHostNam ...
- python thrift 服务端与客户端使用
一.简介 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, ...
- IE8下服务端获取客户端文件的路径为C:/fakePath问题的解决方案
上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...
- 如何排查APP服务端和客户端是否支持ATS
服务端排查 取得客户端直接连接的服务端域名及端口,例如mob.com.cn,端口443,即HTTPS默认端口.针对公网可访问的生产环境地址,建议使用的在线监测工具.https://wosign.ssl ...
- (转)SVN 服务端、客户端安装及配置、导入导出项目
SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...
- linux(centos 6.4)下安装php memcache服务端及其客户端(详细教程)
前言 在搭建个人博客时,由于没有使用任何框架,纯手工code前台和后台,导致遇到许多问题,其中一个问题就是mysql连接导致的页面相应速度异常低.在查询各种途径后,只能考虑使用memcache缓存.在 ...
- [C语言]一个很实用的服务端和客户端进行TCP通信的实例
本文给出一个很实用的服务端和客户端进行TCP通信的小例子.具体实现上非常简单,只是平时编写类似程序,具体步骤经常忘记,还要总是查,暂且将其记下来,方便以后参考. (1)客户端程序,编写一个文件clie ...
随机推荐
- ASP.NET Web API使用示例
原文地址:https://blog.csdn.net/chinacsharper/article/details/21333311 上篇博客讲解rest服务开发时,曾经提到过asp.net mvc中的 ...
- .NET操作XML文件之泛型集合的序列化与反序列化
程序集:System.Xml.Serialization(在 System.Xml.Serialization.dll 中) 命名空间:System.Xml.Serialization 公共函数代码: ...
- oc Delegate
把内部的状态通知给外界,我们可以制定一个变量,然后这个变量从外界来指定,之后我们可以通过变量去通知给外界有什么发生了. 按照上文讲的到新建一个protocol,名字为IPeople #import & ...
- Go 语言官方包函数中文翻译
Go官方包函数中文翻译 *** import "strings" func Join(a []string, sep string) string Join concatenate ...
- C# - 关于过期Token的解决方案
使用static来定义变量和过期时间 //===================== 初始化静态数据 ========================== #region ); //Access_To ...
- Oracle学习笔记之四sp1,Oracle 11g的常用函数
从Oracle学习笔记之四,SQL语言入门中摘出来的,独立成一章节 3.1 字符类函数 ASCII(c)和CHR(i) 分别用于返回一个字符的ASCII码和返回给定ASCII值所对应的字符. C ...
- CSDN日报20170312——《成功人士的七个习惯》
[程序人生]成功人士的七个习惯 作者:liumiaocn 所谓温故而知新.重读往往会带来新的收获,即使没有新的收获,可以带来新的思考也是非常不错.在个人成长的历程中.习惯所扮演的角色不言而喻,Step ...
- [na]PKI公钥处理思路
前提申明: 在使用任何基于RSA服务之前,一个实体要真实可靠的获取其他实体的公钥. 1,一个可以确认公钥身份的方案:[离线确认] 主:B做同样的事情得到A的公钥. 但是这种方法扩展性差,不可行. 2, ...
- linux 调试利器gdb, strace, pstack, pstree, lsof
1) 如何使用strace+pstack利器分析程序性能? http://www.cnblogs.com/bangerlee/archive/2012/04/30/2476190.html 此文有详细 ...
- android studio - 暂停AndroidStudio中的Git
解决办法 AndroidStudio 打开 Setting>Plugins 找到Git Integer 取消插件(将右边钩钩去掉) restart AndroidStudio done