单页应用 / 多页应用客户端渲染 / 服务器渲染

Posted Node Python Go全栈开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单页应用 / 多页应用客户端渲染 / 服务器渲染相关的知识,希望对你有一定的参考价值。


序言



现在各种名词泛滥,写下这篇文章补补相关的基础知识吧,当然说的都是 web 应用相关。



单页应用 / 多页应用



单页应用:


1、单页应用并不是说用户最终看到的就只有一个页面,而是指在开发层面上只有一个  html 文件,至于用户看到的多个页面均是在这一个 html 文件中对应生成。


2、由于单页应用中“多页”的生成是在同一个 html 中部分渲染完成的,所以不需要浏览器重新下载、解析、渲染另外的 html 文件,响应速度更快,用户的体验更好,这应该是最大的优势。


3、由于单页应用中的“多页”是通过 js 生成的,而传统的爬虫是需要分析完整的  html 文件,所以不利于 SEO (搜索引擎优化),至于 SEO 就是为了让你输入某个关键词后能够更好更靠前的搜索到你的应用。 


4、单页应用在首屏渲染的时候需要加载的东西过多,往往会导致首屏速度很慢。


多页应用:


1、与单页应用相反,多页应用指的是每个页面独立对应一个自己的 html 文件。


2、每个页面的跳转都需要重新下载、解析、渲染 html 文件,响应速度较慢。最大的劣势吧。


3、每个页面都是完整的 html ,便于 SEO 。


4、每个页面相互独立,可以分别升级维护,但涉及到不同页面之间的数据交互就比较麻烦。


小结:简单的展示型的应用,多页应用一般更适合,SEO 也有天然的优势。但对于用户交互要求更高的应用,往往使用单页应用,至于单页应用的 SEO 已经有了很多好的实践和解决方案,而首屏的问题也可以交给服务器渲染来解决。



客户端渲染 / 服务器渲染



服务器渲染:


1、服务器渲染,也叫后端渲染,就是指在后台生成 html 并在相应的地方插入好数据然后传递给前端(浏览器)。


2、后台输出的是完整的 html ,利于 SEO ,但也很死板。


3、服务器一般计算速度更快,但会占用了相应的服务器资源。


4、传递给前端的数据量更大,更加占用网络传输资源。


客户端渲染:


1、客户端渲染,也叫前端渲染,兴起于前后端分离,前端通过 API 接口从后台获取数据然后自行处理。


2、相比于服务器渲染更灵活,但也不便于 SEO 。


3、减轻了服务器的压力,网络传输数据量小,前端专注于用户界面和交互,后台专注于业务逻辑和数据持久化,分工更明确。


小结:服务器渲染其实是一种很古老的方式, php、jsp 这种玩意儿就是服务器渲染,重展示、弱交互、重 SEO 的业务场景更适合用服务器渲染,当然还有首屏渲染。前端渲染适合交互性更强的应用。



总结



单页应用、多页应用、服务器渲染、客户端渲染,这四者其实是紧密联系并且相互关联的,在如今移动互联网的时代下,更注重用户交互的单页应用和客户端渲染正在占据更多的份额,而服务器渲染也就配合干干 SEO 和首屏渲染的活儿了。除此之外还有同构渲染的方式也在快速的发展,至于同构渲染我研究的并不多,所以就不多说了。

以上是关于单页应用 / 多页应用客户端渲染 / 服务器渲染的主要内容,如果未能解决你的问题,请参考以下文章

30.多页应用VS单页应用

单页应用及多页应用

使用服务器端和客户端渲染的单页 ReactJS 应用程序?

优化向:单页应用多路由预渲染指南

服务器端渲染如何与单页应用程序兼容?

angularJS之项目知识