如題；本文所講架構(gòu)主要用到技術(shù)棧有： Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs,  log4js, scss，echarts，ant desige

創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

SSR的概念

Server Slide Rendering，縮寫為 ssr，即服務(wù)器端渲染，因為是后端出身，所以其實早就明白是怎么回事，只是沒這個具體名詞的概念罷了，這個詞被頻繁提起也是拜近年來前端飛速發(fā)展所賜，主要針對 SPA應(yīng)用，目的大概有以下幾個：

解決單頁面應(yīng)用的 SEO

單頁應(yīng)用頁面大部分主要的 HTML并不是服務(wù)器返回，服務(wù)器只是返回一大串的 腳本，頁面上看到的大部分內(nèi)容都是由腳本生成，對于一般網(wǎng)站影響不大，但是對于一些依賴搜索引擎帶來流量的網(wǎng)站來說則是致命的，搜索引擎無法抓取頁面相關(guān)內(nèi)容，也就是用戶搜不到此網(wǎng)站的相關(guān)信息，自然也就無流量可言。

解決渲染白屏

因為頁面 HTML由服務(wù)器端返回的腳本生成，一般來說這種腳本的體積都不會太小，客戶端下載需要時間，瀏覽器解析以生成頁面元素也需要時間，這必然會導(dǎo)致頁面的顯示速度比傳統(tǒng)服務(wù)器端渲染得要慢，很容易出現(xiàn)首頁白屏的情況，甚至如果瀏覽器禁用了 JS，那么將直接導(dǎo)致頁面連基本的元素都看不到。使用Express初始化Node服務(wù)

開始本項目首先你的電腦要安裝有node，npm這個沒什么好說的。其次本次Node服務(wù)用的框架是express；所以要安裝： express-generator

然后使用express your-project初始化你的express項目

npm install express-generator -g
//執(zhí)行這條命令全局安裝express-generator，如果你不想全局安裝把-g去掉即可

初始化express項目之后我們開始把react，webpack整合到這個node服務(wù)上。

初始化React項目并整合webpack

這里整合webpack使用的是webpack4的版本，如果你熟悉vue-cli(vue-cli3之前的版本)的話你應(yīng)該會知道webpack配置有多少個文件，這里參考了vue-cli生成的webpack配置。

添加src文件夾

src文件夾下的內(nèi)容都是整個react的一些核心配置，如請求處理，css樣式，公共組件，路由，頁面，stores全局狀態(tài)數(shù)據(jù)。

配置.babelrc

因為用到ES6，ES7語法所以要配置.babelrc文件。這個文件東西不多下面直接貼出代碼

{
 "presets": [["es2015", { "modules": false }], "react", "stage-0"],
 "plugins": [
 "transform-decorators-legacy",
 ["import", { "libraryName": "antd", "style": "css" }],
 "transform-runtime"
 ]
}

修改Node服務(wù)app.js

其實主要是加上這句：app.use('/', reactSSR); 其就是為了項目啟動的時候開啟熱更新并渲染views中reactSSR.ejs這個模板引擎文件從而達(dá)到服務(wù)端渲染的目的。

項目結(jié)構(gòu)

這里把項目主要的文件夾結(jié)構(gòu)放到最后。

項目GitHub地址： https://github.com/Uwah/node-react

后期部署上服務(wù)器之后會找個時間更新博客，主要是用到pm2

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。