react揚帆起航之同構（一）

本文信息

• 本文建立於2018/03/07

服務端渲染

在依靠客戶端渲染時，當用戶打開頁面時，多數狀況下是這樣的（不考慮緩存）: 向靜態資源服務器獲取html/css => 向靜態資源服務器獲取js => 向api服務器獲取數據 => 開始渲染內容。而在依靠服務端渲染時，發送http請求後，服務端計算出用戶須要的數據，而後返回帶有內容的html。所以，通常狀況下，對於首次打開的頁面，服務端渲染的速度是優於客戶端渲染的。

服務端渲染的另外一個用處就是SEO，這個是顯而易見的，查看頁面源代碼便可理解。

因此，服務端渲染主要就是爲了兩部分：首屏性能、SEO。

然而，相對於客戶端渲染，服務端渲染更爲複雜，對開發人員技術要求度更高。同時，因爲須要在服務端進行計算，服務端渲染也會加大服務器壓力，雖然服務端確定也會作緩存。

同構

爲了最大限度結合服務端渲染與客戶端渲染的優點，引入了同構的概念。react組件可以同時在客戶端與服務端渲染的方式，稱之爲同構。在具體應用中，首次訪問會採用服務端渲染，後續的渲染由客戶端負責。

nextjs

如上所述，構建react同構應用並不簡單，對技術要求更高。一直以來，也沒有一個方便的react同構框架，直到nextjs的出現。nextjs能夠方便的用來構建react同構應用，大大下降了構建同構應用的門檻。

本系列文章主要介紹的是基於create-react-app-typescript生成的應用構建同構應用，對於nextjs再也不做更多的介紹，有興趣的請自行了解。