SPA客户端渲染和SSR服务器渲染
image.png
一、SPA
所谓SPA（single page application）就是我们常说的客户端浏览器渲染。
区别于传统的网站，它没有直接从服务器加载一整个新的页面，而是通过动态地重写页面中的某个部分来与用户交互，这样一来，避免了过多的数据交换，响应速度自然相对更高。
三大框架Angular Vue React都属性SPA.
- SPA的优点
- 页面响应速度快。
- 接口明确，并行开发，前后端分离。在后端接口没有实现好之前，前端完全可以通过Node.js、Express、Koa等Web框架模拟接口，提供测试数据，一定程度上减少了前后端的
撕逼沟通成本。- 减轻了服务器的压力。
- SPA的缺点
- 不利于SEO（Search Engine Optimization）搜索引擎的优化。
- 首页的渲染速度很慢。因为需要加载SPA框架和应用程序的代码。
二、SSR
服务端渲染其实就是由浏览器做的一些事情，放到了服务器去做。
- SSR的优点
- 更快的响应时间，不必等到所有的js加载完。
- 有利于SEO优化，关键信息在后台就渲染成HTML，保证搜索引擎能爬取到关键数据。
- SSR的缺点
- 渲染程序占用更多的CPU和内存资源。
- 不利于前后端分离，服务端性能耗费较大。
- 可能由于某些因素导致服务端渲染的结果与浏览器的结果不一致。
- 如何在页面中快速的判断出来？
服务端渲染：在页面中看到的内容在源代码中也可以查看到。
客户端渲染：页面中看到的内容在源代码中不可以查看到。
三、SEO
搜索引擎优化，又称为SEO。它的技术分为黑帽和白帽两种。
通过作弊手法欺骗搜索引擎和访问者，最终将遭到搜索引擎惩罚的手段被称为黑帽，比如隐藏关键字、制造大量的meta字、alt标签等。而通过正规技术和方式，且被搜索引擎所接受的SEO技术，称为白帽。优化的方式有很多：
- 设置首选域。
- 采用服务端渲染。
- 每个页面使用一个短、独特和相关的标题。meta标签设置content属性关键字。
- 代码、标签的语义化。
- 竞价排名。
- ……
四、总结
- 前后端分离降低了前端和后端的耦合度，提高了开发效率。
- SPA是前后端分离中，前端的一种解决方案。
- SEO对很多网站很重要，而普通的SPA又不利于SEO。
- SSR的出现一定程度上解决了，SPA中首页加载慢的问题，又极大减少了普通SPA对于SEO的不利影响。
网友评论