SPA客户端渲染和SSR服务器渲染

SPA客户端渲染和SSR服务器渲染

image.png

一、SPA

所谓SPA（single page application）就是我们常说的客户端浏览器渲染。

区别于传统的网站，它没有直接从服务器加载一整个新的页面，而是通过动态地重写页面中的某个部分来与用户交互，这样一来，避免了过多的数据交换，响应速度自然相对更高。

三大框架Angular Vue React都属性SPA.

• SPA的优点

1. 页面响应速度快。
2. 接口明确，并行开发，前后端分离。在后端接口没有实现好之前，前端完全可以通过Node.js、Express、Koa等Web框架模拟接口，提供测试数据，一定程度上减少了前后端的撕逼沟通成本。
3. 减轻了服务器的压力。

• SPA的缺点

1. 不利于SEO（Search Engine Optimization）搜索引擎的优化。
2. 首页的渲染速度很慢。因为需要加载SPA框架和应用程序的代码。

二、SSR

服务端渲染其实就是由浏览器做的一些事情，放到了服务器去做。

• SSR的优点

1. 更快的响应时间，不必等到所有的js加载完。
2. 有利于SEO优化，关键信息在后台就渲染成HTML，保证搜索引擎能爬取到关键数据。

• SSR的缺点

1. 渲染程序占用更多的CPU和内存资源。
2. 不利于前后端分离，服务端性能耗费较大。
3. 可能由于某些因素导致服务端渲染的结果与浏览器的结果不一致。

• 如何在页面中快速的判断出来？

服务端渲染：在页面中看到的内容在源代码中也可以查看到。
客户端渲染：页面中看到的内容在源代码中不可以查看到。

三、SEO

搜索引擎优化，又称为SEO。它的技术分为黑帽和白帽两种。

通过作弊手法欺骗搜索引擎和访问者，最终将遭到搜索引擎惩罚的手段被称为黑帽，比如隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式，且被搜索引擎所接受的SEO技术，称为白帽。优化的方式有很多：

1. 设置首选域。
2. 采用服务端渲染。
3. 每个页面使用一个短、独特和相关的标题。meta标签设置content属性关键字。
4. 代码、标签的语义化。
5. 竞价排名。
6. ……

四、总结

1. 前后端分离降低了前端和后端的耦合度，提高了开发效率。
2. SPA是前后端分离中，前端的一种解决方案。
3. SEO对很多网站很重要，而普通的SPA又不利于SEO。
4. SSR的出现一定程度上解决了，SPA中首页加载慢的问题，又极大减少了普通SPA对于SEO的不利影响。