摘要：動(dòng)態(tài)網(wǎng)站解決方案匯總先擼擼幾個(gè)概念單頁(yè)面應(yīng)用，基于框架開(kāi)發(fā)的項(xiàng)目很多都屬于單頁(yè)面應(yīng)用。搜索引擎優(yōu)化，指通過(guò)對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化修復(fù)和站外優(yōu)化，從而提高網(wǎng)站的網(wǎng)站關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。為了防止進(jìn)程掛掉，可以使用來(lái)啟動(dòng)，。

先擼擼幾個(gè)概念：

SPA：?jiǎn)雾?yè)面應(yīng)用，基于vue框架開(kāi)發(fā)的項(xiàng)目很多都屬于單頁(yè)面應(yīng)用。

SSR ：server side rendering, 服務(wù)端渲染。

SEO：搜索引擎優(yōu)化，指通過(guò)對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化、修復(fù)和站外優(yōu)化，從而提高網(wǎng)站的網(wǎng)站關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。

Prerender：預(yù)渲染，Prerender.io是基于Node.js的程序，它可以讓你的JavaScript網(wǎng)站支持搜索引擎，社交媒體，并且它兼容所有的JavaScript框架和庫(kù)。它采用PhantomJS渲染JavaScript的網(wǎng)頁(yè)然后呈現(xiàn)為HTML。此外，我們可以實(shí)現(xiàn)的prerender服務(wù)層來(lái)緩存訪問(wèn)過(guò)的頁(yè)面，這將大大提高性能。（省事兒）

Nuxt：是一個(gè)基于 Vue.js 的通用應(yīng)用框架，預(yù)設(shè)了利用Vue.js開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，可以為基于 Vue.js 的應(yīng)用提供生成對(duì)應(yīng)的靜態(tài)站點(diǎn)的功能。

Next:對(duì)標(biāo)的是 React的通用應(yīng)用框架，預(yù)設(shè)了React.js 開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。

結(jié)合現(xiàn)有項(xiàng)目框架選用，時(shí)間成本，學(xué)習(xí)成本進(jìn)行合適的評(píng)估

從自身能力出發(fā) 如果涉及太多的服務(wù)端處理的東西 可以考慮運(yùn)維層進(jìn)行處理采用prerender

業(yè)務(wù)應(yīng)用場(chǎng)景，業(yè)務(wù)線比較復(fù)雜工期較短的時(shí)候 建議自己進(jìn)行PrerenderIo 的部署，使用自己的服務(wù)器進(jìn)行對(duì)爬蟲(chóng)頁(yè)面進(jìn)行緩存。

Next => React 文檔大部分是英文的 配置項(xiàng)簡(jiǎn)單易上手，部署方便，大型的官網(wǎng)項(xiàng)目比較適合，用戶交互復(fù)雜的時(shí)候采用Next 進(jìn)行項(xiàng)目開(kāi)發(fā)。

Nuxt => Vue 基本是Next的翻版，語(yǔ)法也是Next語(yǔ)法，大坑的地方是在 大多數(shù)穩(wěn)定的項(xiàng)目是1.4.2的版本 現(xiàn)有2.X的版本 基本完全不兼容老版本。

渲染效率比較低，業(yè)務(wù)復(fù)雜的時(shí)候 編譯速度十分慢。十分慢

版本跨度大的適合兼容性低。

PhantomJS 原理就是通過(guò)Nginx配置，將搜索引擎的爬蟲(chóng)請(qǐng)求轉(zhuǎn)發(fā)到一個(gè)node server，再通過(guò)PhantomJS來(lái)解析完整的HTML。

可以做為一整套通用服務(wù)，所有的SPA頁(yè)面基本不需要二次重構(gòu)。

缺點(diǎn)是受網(wǎng)絡(luò)波動(dòng)制約性比較強(qiáng)，

適合復(fù)雜項(xiàng)目短時(shí)間進(jìn)行收錄處理

需要網(wǎng)絡(luò)層的權(quán)限 需要和運(yùn)維進(jìn)行溝通。

整體還是結(jié)合當(dāng)前需求的場(chǎng)景 和自身的條件來(lái)進(jìn)行選擇,短時(shí)間高效完成需求。

相關(guān)收錄文章：

Nuxt
Next
Prerender + vuejs SEO最佳實(shí)踐 百度爬蟲(chóng) + 谷歌收錄 親測(cè)成功Prerender.io
前端渲染與 SEO 優(yōu)化踩坑 小記
用PhantomJS來(lái)給AJAX站點(diǎn)做SEO優(yōu)化

首先，我們需要一個(gè)叫spider.js的文件，用于phantomjs 解析網(wǎng)站。

"use strict";

// 單個(gè)資源等待時(shí)間，避免資源加載后還需要加載其他資源
var resourceWait = 500;
var resourceWaitTimer;
// 最大等待時(shí)間
var maxWait = 5000;
var maxWaitTimer;
// 資源計(jì)數(shù)
var resourceCount = 0;
// PhantomJS WebPage模塊
var page = require("webpage").create();
// NodeJS 系統(tǒng)模塊
var system = require("system");
// 從CLI中獲取第二個(gè)參數(shù)為目標(biāo)URL
var url = system.args[1];
// 設(shè)置PhantomJS視窗大小
page.viewportSize = {
    width: 1280,
    height: 1014
};
// 獲取鏡像
var capture = function(errCode){
    // 外部通過(guò)stdout獲取頁(yè)面內(nèi)容
    console.log(page.content);
    // 清除計(jì)時(shí)器
    clearTimeout(maxWaitTimer);
    // 任務(wù)完成，正常退出
    phantom.exit(errCode);
};
// 資源請(qǐng)求并計(jì)數(shù)
page.onResourceRequested = function(req){
    resourceCount++;
    clearTimeout(resourceWaitTimer);
};
// 資源加載完畢
page.onResourceReceived = function (res) {
    // chunk模式的HTTP回包，會(huì)多次觸發(fā)resourceReceived事件，需要判斷資源是否已經(jīng)end
    if (res.stage !== "end"){
        return;
    }
    resourceCount--;
    if (resourceCount === 0){
        // 當(dāng)頁(yè)面中全部資源都加載完畢后，截取當(dāng)前渲染出來(lái)的html
        // 由于onResourceReceived在資源加載完畢就立即被調(diào)用了，我們需要給一些時(shí)間讓JS跑解析任務(wù)
        // 這里默認(rèn)預(yù)留500毫秒
        resourceWaitTimer = setTimeout(capture, resourceWait);
    }
};
// 資源加載超時(shí)
page.onResourceTimeout = function(req){
    resouceCount--;
};
// 資源加載失敗
page.onResourceError = function(err){
    resourceCount--;
};
// 打開(kāi)頁(yè)面
page.open(url, function (status) {
    if (status !== "success") {
        phantom.exit(1);
    } else {
        // 當(dāng)改頁(yè)面的初始html返回成功后，開(kāi)啟定時(shí)器
        // 當(dāng)?shù)竭_(dá)最大時(shí)間（默認(rèn)5秒）的時(shí)候，截取那一時(shí)刻渲染出來(lái)的html
        maxWaitTimer = setTimeout(function(){
            capture(2);
        }, maxWait);
    }
});

進(jìn)行測(cè)試=> phantomjs spider.js "https://www.baidu.com/"

響應(yīng)搜索引擎爬蟲(chóng)的請(qǐng)求，我們需要將此命令服務(wù)化，通過(guò)node起個(gè)簡(jiǎn)單的web服務(wù)

var express = require("express");
var app = express();
// 引入NodeJS的子進(jìn)程模塊
var child_process = require("child_process");
app.get("/", function(req, res){
    // 完整URL
    var url = req.protocol + "://"+ req.hostname + req.originalUrl;
    console.log(req,req.hostname)
    // 預(yù)渲染后的頁(yè)面字符串容器
    var content = "";
    // 開(kāi)啟一個(gè)phantomjs子進(jìn)程
    var phantom = child_process.spawn("phantomjs", ["spider.js", url]);
    
    // 設(shè)置stdout字符編碼
    phantom.stdout.setEncoding("utf8");
    // 監(jiān)聽(tīng)phantomjs的stdout，并拼接起來(lái)
    phantom.stdout.on("data", function(data){
        content += data.toString();
    });
    // 監(jiān)聽(tīng)子進(jìn)程退出事件
    phantom.on("exit", function(code){
        switch (code){
            case 1:
                console.log("加載失敗");
                res.send("加載失敗");
                break;
            case 2:
                console.log("加載超時(shí): "+ url);
                res.send(content);
                break;
            default:
                res.send(content);
                break;
        }
    });
    
});
app.listen(3002)

運(yùn)行node server.js，此時(shí)我們已經(jīng)有了一個(gè)預(yù)渲染的web服務(wù)啦，接下來(lái)的工作便是將搜索引擎爬蟲(chóng)的請(qǐng)求轉(zhuǎn)發(fā)到這個(gè)web服務(wù)，最終將渲染結(jié)果返回給爬蟲(chóng)。
為了防止node進(jìn)程掛掉，可以使用nohup來(lái)啟動(dòng)，nohup node server.js &。
通過(guò)Nginx配置，我們可以輕松的解決這個(gè)問(wèn)題。

# 定義一個(gè)Nginx的upstream為spider_server
upstream spider_server {
  server localhost:3000;
}
# 指定一個(gè)范圍，默認(rèn) / 表示全部請(qǐng)求
location / {
  proxy_set_header  Host            $host:$proxy_port;
  proxy_set_header  X-Real-IP       $remote_addr;
  proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  # 當(dāng)UA里面含有Baiduspider的時(shí)候，同時(shí)可以加其他的頭信息進(jìn)行轉(zhuǎn)發(fā) 流量Nginx以反向代理的形式，將流量傳遞給spider_server
  if ($http_user_agent ~* "Baiduspider") {
    proxy_pass  http://spider_server;
  }
}

參考鏈接：
https://www.mxgw.info/t/phant...
http://imweb.io/topic/560b402...
https://icewing.cc/linux-inst...
https://www.jianshu.com/p/2bb...