前端單頁面應用實現服務端渲染

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

服務端渲染方式

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://** ;