「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
一、关于vue项目的seo问题
在实际项目中，特别是像一下交互网站，我们不可避免会考虑到的是seo问题。但是vue作为前后端分离框架，确实不利于SEO。主要有以下原因：
-
搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。而用了vue等js的数据绑定机制来展示页面数据后，爬虫获取到的html是你的模型页面而不是最终数据的渲染页面，所以说用js来渲染数据对seo并不友好。
-
seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。一般来说搜索引擎是不回去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 所以服务端渲染就是尽量在服务器发送到浏览器前 页面上就是有数据的。
-
一般的数据逻辑操作是放在后端的。排序这个如果仅仅是几条数据，前后端排序开起来是一样的，如果是有1000条数据，前端要排序就要都请求过来。这样显然是不合理的。
那这种交互网站就不使用vue开发了吗？No。我们可以通过其他技术解决seo问题。其中服务端渲染就是一种解决方案。
二、服务端渲染介绍
网页的渲染方式：
- 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。
- 服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会将完整的html给浏览器，浏览器直接渲染出首屏，用不着浏览器端多一个AJAX请求去获取数据再渲染。
服务器端渲染优点
-
更好的 SEO（搜索引擎优化），因为传统的搜索引擎只会从 HTML 中抓取数据，这会导致前端渲染的页面无法被抓取。
-
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备 。页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。传统的Ajax请求是先请求js再由js发起数据请求，两项时间再加上浏览器渲染时间才是首屏时间。而SSR能将两个请求合并为一个。
服务器端渲染缺陷
- 更多的服务器端负载。
- 服务器端和浏览器环境差异带来的问题，例如document等对象找不到的问题。
如何选择？
建议：如果注重SEO的新闻站点，非强交互的页面，建议用SSR；像后台管理页面这类强交互的应用，建议使用前端渲染。
