前言

這篇文章是我自己在搭建個人網(wǎng)站的過程中，用到了服務(wù)端渲染，看了一些教程，踩了一些坑。想把這個過程分享出來。
我會盡力把每個步驟講明白，將我理解的全部講出來。

文中的示例代碼來自于這個倉庫，也是我正在搭建的個人網(wǎng)站，大家可以一起交流一下。示例代碼因?yàn)楹喕c倉庫代碼有些許出入

本文中用到的技術(shù)
React V16 | React-Router v4 | Redux | Redux-thunk | express

React 服務(wù)端渲染

服務(wù)端渲染的基本套路就是用戶請求過來的時候，在服務(wù)端生成一個我們希望看到的網(wǎng)頁內(nèi)容的HTML字符串，返回給瀏覽器去展示。

瀏覽器拿到了這個HTML之后，渲染出頁面，但是并沒有事件交互，這時候?yàn)g覽器發(fā)現(xiàn)HTML中加載了一些js文件（也就是瀏覽器端渲染的js），就直接去加載。

加載好并執(zhí)行完以后，事件就會被綁定上了。這時候頁面被瀏覽器端接管了。也就是到了我們熟悉的js渲染頁面的過程。

需要實(shí)現(xiàn)的目標(biāo)：

一般的渲染方式

優(yōu)點(diǎn)與缺點(diǎn)

服務(wù)端渲染解決了首屏加載速度慢以及seo不友好的缺點(diǎn)（Google已經(jīng)可以檢索到瀏覽器渲染的網(wǎng)頁，但不是所有搜索引擎都可以）

但增加了項(xiàng)目的復(fù)雜程度，提高維護(hù)成本。

如果非必須，盡量不要用服務(wù)端渲染

整體思路

需要兩個端：服務(wù)端、瀏覽器端（瀏覽器渲染的部分）

第一： 打包瀏覽器端代碼

第二： 打包服務(wù)端代碼并啟動服務(wù)

第三： 用戶訪問，服務(wù)端讀取瀏覽器端打包好的index.html文件為字符串，將渲染好的組件、樣式、數(shù)據(jù)塞入html字符串，返回給瀏覽器

第四： 瀏覽器直接渲染接收到的html內(nèi)容，并且加載打包好的瀏覽器端js文件，進(jìn)行事件綁定，初始化狀態(tài)數(shù)據(jù)，完成同構(gòu)

React組件的服務(wù)端渲染

讓我們來看一個最簡單的React服務(wù)端渲染的過程。

要進(jìn)行服務(wù)端渲染的話那必然得需要一個根組件，來負(fù)責(zé)生成HTML結(jié)構(gòu)

import React from 'react';import ReactDOM from 'react-dom';ReactDOM.hydrate(<Container />, document.getElementById('root'));

當(dāng)然這里用ReactDOM.render也是可以的，只不過hydrate會盡量復(fù)用接收到的服務(wù)端返回的內(nèi)容，

來補(bǔ)充事件綁定和瀏覽器端其他特有的過程