前后端分离-----SEO优化

首先说下SEO什么意思?

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。

其次为啥前后端分离？

一、

整个项目的开发权重往前移，实现真正的前后端解耦，动态资源和静态资源分离，提高了性能和扩展性。

二、前端静态化

        *前端有且仅有静态内容，再明确些，只有HTML/CSS/JS

        *其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。

        *前端内容的运行环境和引擎完全基于浏览器本身。

三、后端数据化

        *后端可以用任何语言，技术和平台实现。

        *遵循一个原则：只提供数据，不提供任何和界面表现有关的内容。

        *统一API接口，接口完全可以共用。

        *提供的数据可以用于任何其他客户端（如IOS,安卓，pc,微信小程序等）

        *通过一些代码重构，就可以大量复用接口，提升效率

四、平台无关化

        *前端三大技术（HTML/CSS/JS）本身就是平台无关的。

        *后台链接部分的本质是实现合适的RESTful接口和交互JSON数据，就这两者而言，任何技术和平台都可以实现。

        *前后端交给不同的人来编写，明确划分职责，发现bug的时候可以快速定位。

        *vue.js等框架编写前端的时候，会比之前写Jquery更简单快捷。

五、架构分离化

        *前端架构完全基于HTML/CSS/JS的发展和js框架的演变，由于前台是纯静态内容，大型架构方面可以考虑向CDN方向发展。

        *后端架构几乎可以基于任何语言和平台的任何解决方案，大型架构方面，RESTful Api可以考虑负载均衡，而数据，业务实现等可以考虑数据库优化和分布式。

        *在大并发情况下，可以同时水平扩展前后端服务器。

        *即使后端服务器暂时超时或者宕机，前端页面也会正常访问，只是数据刷新不出来而已，当然现在一般是服务器集群，少有出现这种现象。

*前后端流量大幅减少

        *减少后端服务器的兵法压力，除了接口以外的其他所有http请求全部转移到前端服务器上

        *页面不再是全部刷新，而是异步加载，局部刷新，减轻压力。

*表现性能的提高

        *页面性能，第一次获取的确会有所损失

        *后续使用这个页面，性能优势就完全体现了，页面的绝大部分内容都是本地缓存直接加载，远程获取的仅仅是1-2个10k的内容，其加载时间百毫秒内，这和本地页面几无区别，其前端加载和相应速度得到非常大的提高。

*安全性方面的集中优化

        *前端静态以后，一些注入式攻击在分离模式下被很好的规避。

        *而后端安全问题集中化了，主要考虑处理RESTful接口安全

        *安全架设和集中优化变得更明确和便利

六、实现的一些表现

*前后端人员双方约定好接口的数格式

*比如：前端需要调用一个用户信息的接口，数据格式为{name:'tielemao'}.name，后端人员只需要告诉他一个接口url（如http://www.tielemao.com/api/userInfo），并且将这个接口返回前端想要的数据即可，至于后端人员怎么实现这个接口，前端人员并不关心！

*前端页面用ajax解析URL，获取数据进行页面端的处理，然后再按照上述地址返回给后端。

*前端人员要用这个接口来做什么，后端人员同样不需要关心，双方都只专注于自己需要实现的业务逻辑。

七、RESTful风格的API是前后端分离的最佳实践

        *RESTful推荐每个url能操作具体的资源

        *能准确描述服务器对资源的处理动作。

        *通常服务器对资源支持get/post/put/delete等，用来实现资源的增删改查。

        *前后端分离的话，这些api-url是对接的桥梁，采用restful接口地址，含义更清晰，见名知意。

再说下怎么再前后端分离的基础上对seo的优化？ 

一、前端渲染SEO

方法一：vue（SSR）

首先vue2.x直接提供了一份完整的构建Vue服务端渲染。Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

 

 方法二：vue（Nuxt.js）

*Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

*Nuxt.js 支持以generate命令将程序直接构建为静态 html ，就像上面说的，可以作为静态资源直接输出。 打包

npm run generate。

*Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。

*Nuxt.js是创建Universal Vue.js应用程序的框架。

*它的主要范围是UI渲染，同时抽象出客户端/服务器分布。

*Nuxt.js预先设置了使Vue.js应用服务器的开发更加愉快的所有配置。

*另外，我们还提供另一个名为nuxt generate的部署选项。它将构建一个静态生成的 Vue.js应用程序。我们相信这个选择可能是微软服务开发Web应用程序的下一个重要步骤。

*作为一个框架，Nuxt.js提供了很多功能，可以帮助您在客户端和服务器端之间进行开发，如异步数据，中间件，布局等。

*Nuxt.js是一个基于Vue的框架，大部分都是vue的东西。总体来说是个不错的框架，不需要去配置webpack那些繁琐的东西。

*由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。
 Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲   染，合成完整的html文件再输出到浏览器。 

方法三：预渲染（prerender +metaInfo）

*预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。

*预渲染的本质就是在打包的时候通过插件将js提前执行一遍，然后再将有内容的html放到服务器上，这样爬虫自然可以抓到，首屏的问题也可以得到解决。

*如果您调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么您可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。
如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

*预渲染，我们可以解决很多方面的SEO的问题，但是有时候我们也会需要Meta信息的变化，比如 title 比如 Meta keyWords 或者是 link...

---vue-meta-info   一个可以动态设置meta 信息的vue插件如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合。是一个基于 vue 2.0 的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的 title、meta 等信息，那么用此 插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的 SEO 问题，那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

*弊端：

• 不能很好地处理用户独特性路由: 比如有个路由是 /my-profile, 预渲染可能不会很好用, 因为这个内容页是根据用户信息变化的，所以页面内容也不是唯一确定的. 你可能会使用类似于这样的路由路径 /users/:username/profile,但是这样也是不合适的.
• 经常变动的文件
• 需要预渲染成千上万的路由文件: 这个可能会导致你编译时间.....额，可能你会编译很长时间