在此就不過多介紹什麼是單頁面應用 什麼是服務端渲染 服務端渲染的作用了

服務端渲染方式

1. 後端模板渲染 如: ejs jinjia等
2. 藉助第三方框架 nuxt next

• vue相關的 Nuxt
• react 相關的 Next

3. rendertron(主要介紹)

後端模板渲染

算是傳統解決方案, 由服務端渲染成html返回給瀏覽器

第三方框架 nuxt next

• 有學習成本, 需要熟悉對應框架api
• 服務端要node環境編譯
• 當訪問量大的時候頁面載入會變慢

Rendertron

主要介紹的就是該方法

誕生就是為了做SEO的。先說說原理，聽完你就知道是個好東西了。

Rendertron是nodejs框架下的產物，是google-chrome旗下的的配套產品。

首先，伺服器上裝有個google-chrome，rendertron把他開啟，然後在伺服器（官方推薦express）中增加中介軟體

先判斷UA（user-agent）裡面有沒有帶有類似Baiduspider（百度爬蟲）等字樣，

如果沒有，就像正常的單頁面伺服器那樣，把原始html推送出去，由客戶端瀏覽器完成js、css渲染的工作；

如果帶有指定UA頭字樣，就先把網頁推送給本地伺服器那個google-chrome，等他渲染好對應頁面後，把渲染好的html結果推送出去。

貼上地址

github地址: https://github.com/GoogleChrome/rendertron

部署方法

• docker映象地址:

https://hub.docker.com/r/yamitzky/rendertron

• 安裝無頭瀏覽器

在ubuntu伺服器上使用Chrome Headless - 簡書

linux 安裝 Headless Chrome - bambooleaf - CSDN部落格

Chromeheadless安裝與使用 - 探索技術世界 - CSDN部落格

• 貼入某些搜尋引擎的UA

baidu：Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)
Google：Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Sogou：Sogou web spider/4.0(+http://www.sogou.com/docs/help/webmasters.htm#07)
Yahoo：Mozilla/5.0 (compatible; Yahoo! Slurp/3.0; http://help.yahoo.com/help/us/ysearch/slurp)
百度網頁搜尋 User-agent
Baiduspider 
谷歌User-agent
Googlebot
MSN User-agent
MSNBot
有道User-agent
YoudaoBot
搜狗User-agent
Sogou inst spider
Sogou spider2
Sogou blog
Sogou News Spider
Sogou Orion spider
即刻User-agent
JikeSpider
搜搜User-agent
Sosospider
360User-agent
360Spider
 

當然還有其他的搜尋引擎的

const botUserAgents = [
  'Baiduspider',
  'bingbot',
  'Embedly',
  'facebookexternalhit',
  'LinkedInBot',
  'outbrain',
  'pinterest',
  'quora link preview',
  'rogerbot',
  'showyoubot',
  'Slackbot',
  'TelegramBot',
  'Twitterbot',
  'vkShare',
  'W3C_Validator',
  'WhatsApp',
];


 if ($http_user_agent ~ "(botUserAgents1)|(botUserAgents2))"){
    rewrite ^/(.*)$ http://***/rendertron/http://** ;