前言
本文章重點在于代碼實踐，從零開始完整的展示如何構建項目。
下午看了很多相關資料，但是講解的著重于理論，或者直接給出github倉庫鏈接，也有的只列出幾條重點，看完還是不知道如何實踐。
前后端項目結構區別
-
front-end
平時大家編寫vue項目，一般都是使用
vue-cli初始化項目，生成的項目配置齊全，大家只要在src目錄進行開發即可，開發完成后執行npm run build完成生產環境的打包，丟到服務器上即可，簡直不要太省心。我估計以上的開發模式在當前是占據相當一部分比重的，vue-cli方便大家的同時，也造成很多開發者(一般是初入門者)對內部原理缺乏認知，對webpack配置不甚了解。在此建議大家對vue-cli生成的項目結構進行分析，網上也有很多分析文章，然后試著自己搭建腳手架，加深理解。
-
back-end
提到服務器端渲染，涉及node服務，可能有一部分前端會覺得偏離了自己的方向，然而，作為一名程序員，真的建議大家不要把自己局限在一個方向。js現在異常活躍，pc端、移動端、桌面端、后端、硬件端(嵌入式)都可以看到它的身影，前端也逐漸發展為大前端。
在此以node項目為例子，做簡單說明。(node水平不高，若有錯誤，歡迎指正)
node項目的初始化和自己搭建一個前端腳手架并沒有太多區別，區分點主要有以下幾點： node項目的入口文件是js，前端項目是html
node項目中可以引用node的相關依賴，而前端項目不可以
原形畢露，后續補充...
搭建一個最簡單的服務器項目
在此使用express框架。
## 以desktop為根目錄
## 創建項目文件夾
mkdir simple-demo
## 進入項目根目錄
cd simple-demo
## 項目初始化
npm init
## 根據命令提示完成相關配置即可
## 安裝express依賴
npm install express -save
## 或者使用yarn安裝(兩種方式任選其一)
yarn add express
## 創建server.js
touch server.js
server.js
const express = require('express');
const server = express();
server.get('/', (req, res) => {
res.send('<h1>hello world</h1>')
})
server.listen(8080);
結果
## 執行以下命令
node server.js
瀏覽器輸入localhost:8080
服務器端渲染基本用法
/**************************************************************************
以下所有源碼戳我。
**************************************************************************/
以上述simple-demo為基礎
## 安裝依賴(NPM、Yarn)
npm install vue vue-server-renderer --save
增加app.js文件
// 第 1 步：創建一個 Vue 實例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：創建一個 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：將 Vue 實例渲染為 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
在項目根目錄執行node app.js
render原理
在node項目中，使用vue-server-renderer插件將vue實例渲染為HTML。
與服務器集成
將上述項目simple-demo中的server.js內容清空，并更改為以下內容。
const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: '<div>訪問的url是{{url}}</div>'
});
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.setHeader('Content-Type','text/html;charset=UTF-8'); // 避免亂碼
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
${html}
</body>
</html>
`);
});
})
server.listen(8080);
執行命令node server.js
注: /index是我隨意輸入的url，從/開始之后都是req.url的值。
到此為止，已經使用node服務器將vue實例渲染為HTML，并在瀏覽器中展示出來了。
使用頁面模板
上一個環節，我們在res.end中將vue渲染成的HTML標記和HTML頁面包裹容器拼接在了一起。為了簡化這些操作，我們可以直接創建一個頁面模板。
index.template.html
注： ``注釋是必須的，否則在終端啟動服務器的時候，會提示Content placeholder not found in template。
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
新建server-2.js
通過fs模塊讀取并應用模板文件。詳細源碼請參考dev_1分支的server-2.js文件
const renderer = require('vue-server-renderer').createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
});
執行node server-2.js，得到以下結果(和上一步相同):
模板插值
上一個環節，模板是固定的，在這一步我們將通過模板插值，來配置模板。
增加模板文件mustache.template.html
<!DOCTYPE html>
<html>
<head>
<!-- 使用雙花括號(double-mustache)進行 HTML 轉義插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
<!-- 使用三花括號(triple-mustache)進行 HTML 不轉義插值(non-HTML-escaped interpolation) -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
新建server-3.js，詳細源碼請參考dev_1分支的server-3.js文件
const context = {
title: 'hello',
meta: `
<meta charset='utf-8'>
`
}
renderer.renderToString(app, context, (err, html) => {
// page title will be "Hello"
// with meta tags injected
})
執行node server-3.js，得到以下結果，插值已生效:
服務端渲染和瀏覽器端渲染
仔細觀察網頁源碼，可以看到服務端渲染的頁面，body中是有html標記的。
而通過vue-cli編寫的項目，在瀏覽器端渲染后，body中是空的，html標記是通過js插入的。
搜索引擎爬蟲抓取工具是通過抓取頁面內容來進行信息收集的，而在瀏覽器端渲染的SPA項目，頁面內容是空的，這就是為什么SPA項目SEO很糟糕的原因。
