客户端渲染项目中如何做SEO的优化

前序：
最进刚基本完成了一个服务端渲染轮子的搭建，整个流程真的是让人头疼，就目前单纯的前端直接做服务端渲染其实真的是很吃力的，它要求我们不仅需要对前端的东西了解，同时对于服务端的知识也得有一定的接触，哪怕现在我们有了node. 除此之外，进行服务端渲染需要考虑的问题也是很多的，毕竟服务端执行的东西和浏览器执行还是有挺多的差别，并且服务端渲染对于服务器的压榨也很厉害的了，虽然我们需要我们的网站访问速度更快，SEO更友好, 但是如果我们本身的网站的访问速度已经挺快的了，SEO也足够的友好，确实就不是很推荐使用服务端渲染了。
|——————————————————————————————————|
步入正题，今天主要想说的就是，当我们没法使用ssr的时候，我们又需要我们的网站对SEO 足够的友好，那我们应该怎么解决的问题.
…
首先我们来说一下我们的SEO,它也叫做搜索引擎优化，对于我们的搜索引擎而言，当我们的用户进行网站搜索的时候，搜索结果越是靠前的网站，用户去点击的几率也就会越高，我们的网站的浏览量也就会越多。但是怎么让我们的网站的排名更加的靠前，就是我们需要做的事(这里排除花钱使得网站排名靠前的网站). 我们通过一些技术上的优化，使得我们的网站能够在搜索引擎爬取的时候能够更多的获取到我们网站的信息，使得搜索引擎认为我们的网站符合搜索的要求。但是为什么我们纯前端写的一些网站表示对SEO 不够友好呢，其实主要是因为我们的搜索引擎爬取网站数据的时候是只能够识别我们网站的html的，而我们的纯前端的网站很多的是将数据渲染交托给js ,让浏览器运行我们的js 去渲染页面，这就使得搜索引擎实际爬取到的网站上的数是很少的，它不能获取到我们网站的更多的信息，也就不能够对我们的网站有一个更好的判定。

---

那么现在我们怎么解决客户端渲染网站对SEO不友好的问题呢，毕竟服务端渲染毕竟太麻烦，消耗也太大。我们先来看一下下面这张图::

如图上所示，我们考虑是否能够根据不同的访问源进行不同的处理来进行SEO的优化呢。就是当我们的客户端浏览器访问我们页面的时候，我们就直接将我们的网页返回给客户端让它去渲染，而当搜索引擎爬取我们的网站时，我们就将渲染好的html返回给它，这样就解决了SEO优化的问题了。

---

这里我们就提到的prerender这么个东西，它是做什么用的呢： prerender的作用其实说简单还是挺简单的，它就是在我们的搜索引擎爬取的时候，通过prerender代理去请求我们的页面在prerender中渲染好后在返回给蜘蛛。它其实就是做了一个浏览器的功能，将客户端渲染的网站资源请求过来先执行一遍渲染后在返回给我们的蜘蛛，那么就使得蜘蛛爬取到的html上是已经渲染好数据的了，这也就做到了SEO的优化了。可能大家会认为这样我们走prerender 这么个流程会很费时间，但是我们这么去想，我们给用户直接看的是直接去拿到的，用户体验没问题就好，蜘蛛爬取的速度的快慢并不会影响到用户的体验就是没问题的。

---

那么我们的prerender需要怎么去实现呢？ 其实这是很简单的，我们只需要npm安装上prerender这个包，然后再代码中创建一个简单的server.js进行简单的配置就好了:

const prerender = require('prerender')
const server = prerender({
    port: 8000
})
server.start()

就这么几行代码，就实例好了一个prerender服务器了，然后当我们的访问这个端口的时候，我们需要这么去访问:

http://localhost:8000/render?url=实际我们的网站地址

它的意思是，当我们访问到我们的这个端口时，我们就根据后面带的url地址去请求到实际的网站进行渲染后再返回回去，这就解决了蜘蛛爬取的网站信息问题，也就做了基本的SEO优化，但是我们怎么区分什么时候是客户端浏览器，什么时候是蜘蛛爬虫，就需要用到Nginx 代理了，这里由于对于Nginx 不是很熟，就不做阐述了，只是提供这么一个思路，希望Nginx厉害的大佬能帮助解决这个问题————_