基本概念

SEO

SEO中文翻译过来就是搜索引擎优化，直白的说就是搜索关键词的词的时候，展示你自己网站的数量以及位置。如果你的位置在第一位，那毫无疑问会有更多的点击量，为我们带来更多的利益。

SSR

SSR全称是 Server Side Rendering，代表的是服务端渲染。与客户端渲染不同的是，SSR输出的是一个渲染完成的html，整个渲染过程是在服务器端进行的。例如传统的JSP，PHP都是服务端渲染

CSR

CSR全称是 Client Side Rendering ，代表的是客户端渲染。顾名思义，就是在渲染工作在客户端（浏览器）进行，而不是在服务器端进行。举个例子，我们平时用vue spa，都是先加载js，js来执行渲染出页面结果。

SSR 为什么可以更好的SEO

搜索引擎往往使用爬虫技术去搜集网页信息，包括但不限于标题、关键词，网页dom结构，正文等等，实际上就相当于一次GET请求。

那么对于SSR而言，一次GET请求我们返回了一个渲染完成的html。

对于CSR而言，我们只请求回来了渲染前的html，甚至js文件都没有请求回来，那么搜索引擎自然不能正确的解析你的网站，在它眼中，这个网站就是一个空网站，何谈seo.

SSR的缺点

SSR确实有很多优秀的地方，但是我认为它的缺点同样十分突出。

成本问题：编码成本，服务器成本，流量成本等等
运维问题：如何保障可用性，降低故障率，对于运维童鞋是一个挑战

我的解决办法，PreRender

之前看了一篇文章，是讲PreRender.io，好像也是一个服务运行在服务器上，但是我觉得十分没有必要，我之前很早曾经跑通过一次PreRender，我大概讲一下

首先安装prerender-spa-plugin

npm i prerender-spa-plugin -D

这个插件很久没更新了，也不知道还能不能用，如果不能用我还有替代方案，后面再说。

配置webpack


const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.reslove(__dirname, './dist','./prerender'),
      // Required - Routes to render.
      routes: [ '/'],
    })
  ]
}

然后你打包完之后在dist/prerender/文件夹下就会生成一个html，这里面会有你首页基本的结构

配置nginx 我们在nginx中通过userAgent,判断如果是搜索引擎的爬虫，就把它导向prerender即可.

location / {
      root /opt/gpower/wwwroot/xxx/xxxx/;
      index index.html;
      try_files $uri $uri/ /index.html;
      if ($http_user_agent ~* "(qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms)") {
         root /opt/gpower/wwwroot/xxx/xxxx/prerender;
      }
	}

通过puppeteer

你也可以通过puppeteer去抓取首页，生成html文件。 PS：这段代码要执行在node环境下.source code

谁说 SEO 并非 SSR 不可

基本概念

SEO

SSR

CSR

SSR 为什么可以更好的SEO

SSR的缺点

我的解决办法，PreRender

通过puppeteer