客戶端渲染
載入乙個空的html頁面，然後請求乙個打包的js檔案，然後再客戶端執行這個js檔案
動態生成html內容然後插入到dom元素上,在源**查詢中也只能看到空的html文件
沒有任何其他內容
服務端渲染
載入出來的就帶有完整的html文件內容(同時帶有資料)
流程： 瀏覽器傳送請求 --> 伺服器端執行react**生成頁面 --> 伺服器端返回渲染的頁
客戶端渲染：react**在瀏覽器上執行，消耗的是使用者瀏覽器的效能
服務端渲染：react**在伺服器上執行，消耗的是伺服器端的效能
伺服器端渲染好處：seo(只識別 html 而不識別js裡面的內容 )可以得到優化，首屏速度加快
虛擬dom是真實dom的乙個js物件對映
虛擬dom可以通過reactdom的render方法，轉化為真實dom掛載到頁面的dom節點上
也可以通過rendertostring ,轉化為乙個字串
js預設遵守commonjs規範
此時是沒有辦法執行的，因為不識別 jsx 的語法
yarn add webpack babel-core babel-loader webpack-cli
webpack可以幫助我們打包客戶端**和服務端**，但是需要加上 target: 「node」引數
表示打包的是服務端**
2者的區別 let path = require('path')
在服務端不需要將其一起打包進 編譯的檔案中
但是在客戶端需要一起打包，因為伺服器端(node端) 已經有執行依賴的庫
yarn add babel-preset-react babel能夠解析 jsx 語法
yarn add babel-preset-stage-0 babel-preset-env
注意在：babel8中 有些包是已經廢棄了的，比如：babel-preset-react需要換成 @babel/preset-react
由於使用了webpack和stage-0 伺服器端**完全可以使用es6的模組引入方式，最終編譯後還是 require這種
**引入方式
打包命令： webpack --config webpack.server.js (不寫檔名稱，預設為webpack.config.js)
webpack-node-externals 雖然自帶的模組不會打包進最後生成的檔案中，但是 node_modules第三方模組會被打包
所以需要這個外掛程式，來過濾掉這個包裡面的檔案
rendertostring 將組建渲染成字串
webpack 服務端基本配置
-w (或者 --watch) 表示一直處於監聽狀態 監聽的是配置檔案中的入口檔案(及其依賴檔案) 只要檔案發生改變就會重新編譯該檔案
發現乙個問題
1. 編譯可以監聽了，但是需要每次 重新啟動伺服器
--watch後面的引數表示只要 build 目錄中的檔案改變了就會重新啟動伺服器
2.但是還是需要啟動2個視窗
可以使用 npm-run-all 來提公升開發效率，乙個視窗可以執行多條命令
--parallel 表示並行執行
同構：一套react**，在伺服器端執行一次，在瀏覽器端也執行一次
問題：rendertostring 只會渲染元件的基本內容，像點選事件等是不會起作用的
在客戶端執行一段**
靜態檔案必須放在 public中才能被訪問到，訪問靜態檔案的配置
伺服器端**
使用render方法也可以，但是會有警告
同構的時候使用這個 hydrate 涉及到資料的注水和脫水
這樣按鈕的點選就可以使用了，因為元件在客戶端重新渲染了一遍
執行流程
1. 伺服器端執行react**渲染出html
2.傳送html給瀏覽器
3.瀏覽器收到內容展示
4.瀏覽器載入js靜態檔案
5.js中的react**在瀏覽器端重新執行一遍，此後js中的react**接管頁面的操作
伺服器端使用路由
使用staticrouter 代替 browerrouter
客戶端路由也會重新執行一遍，伺服器和客戶端路由要統一
否則會出現警告
多個頁面的跳轉
加上header
只有第一次訪問才是服務端渲染
伺服器端路由必須先獲取路徑，才能找到對應的元件 context裡面是資料的傳遞
nodejs作為乙個中間層，只負責後端介面的呼叫和頁面的展示
服務端中使用redux ：服務端和客戶端都需要建立store
當服務端沒有用provider包裹的時候會提示 store 找不到
直接匯出store會使得整個應用只有乙個store ，這樣所有使用者共享乙個store，顯然是不對的
需要返回乙個函式
傳送非同步請求定義在生命週期函式中，最好是componentdidmount中
componentwillmount 可能在使用react native中有些小問題
componentdidmount在服務端渲染的時候並不會執行
服務端資料渲染
非同步資料伺服器渲染：loaddata方法及路由重構
給元件增加loaddata靜態方法，負責在服務端渲染頁面之前將這個路由的資料準備好
這種路由是不能定義 loaddata 方法的
store裡面應該填充什麼資料，需要結合當前使用者輸入的位址
import from 'react-router-dom'
但是不能匹配多級路由
但是 matchpath 只能找到一層路由
如果要用在多層路由 就需要安裝 react-router-config
得到匹配到的所有元件 並且讓 匹配到的所有元件都執行 loaddata 方法
react服務端渲染next
mkdir nextdemo cd nextdemo npm init y 配置package.json scripts 啟動命令 npm run dev 或者yarn dev 啟動命令 yarn dev 或者npm run dev next缺省會自動給我們生成好路由，路由生成規則是在專案的根目錄下...
react服務端渲染（同構）
學習react也有一段時間了，使用react後首頁渲染的速度與seo一直不理想。打算研究一下react神奇服務端渲染。react服務端渲染只能使用nodejs做服務端語言實現前後端同構，在後台對react元件進行解析並生成html字串後返回檢視頁面。後台為什麼可以解析react元件？因為node j...
React 服務端渲染的流程簡述
做 react ssr 有一段時間了,在正好在這裡分享一下.使用者第一次請求 重新整理頁面時,由服務端響應.伺服器響應的是乙個已經插入了元件文字的模板 template with pre populated component 由於響應的頁面已經有元件的 html 文字,可以省去瀏覽器端首次渲染的工...