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

序言

现在各种名词泛滥，写下这篇文章补补相关的基础知识吧，当然说的都是 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 和首屏渲染的活儿了。除此之外还有同构渲染的方式也在快速的发展，至于同构渲染我研究的并不多，所以就不多说了。