前言

前段時間尋思做個個人網站，然后就立馬行動了。  個人網站如何實現選擇什么技術方案，自己可以自由決定。  剛好之前有大致想過服務端渲染，加載速度快，還有seo挺適合個人網站的。  所以就自己造了個輪子用koa+react來實現ssr服務端渲染。

什么是ssr

最初聽說有單頁面的服務端渲染的時候，就理解為類似傳統的服務端路由+模板渲染，只是需要用單頁面應用的框架寫。后面尋思這樣好像有點傻，再一了解，原來只是在首次加載的時候，后端進行當前路徑頁面的組件渲染和數據請求，組裝成html返回給前端，用戶就能很快看到看到頁面，當html中的js資源加載完成后，剩下執行和運行的就是一般的單頁面應用。  所以ssr是后端模板渲染和單頁面的組合。  ssr有兩種模式，單頁面和非單頁面模式，第一種是后端首次渲染的單頁面應用，第二種是完全使用后端路由的后端模版渲染模式。他們區別在于使用后端路由的程度。

優勢

ssr的兩個明顯的優勢：首次加載快和seo。  為什么說首次加載快呢。  一個普通的單頁面應用，首次加載的時候需要把所有相關的靜態資源加載完畢，然后核心js才會開始執行，這個過程就會消耗一定的時間，接著還會請求網絡接口，最終才能完全渲染完成。

ssr模式下，后端攔截到路由，找到對應組件，準備渲染組件，所有的js資源在本地，排除了js資源的網絡加載時間，接著只需要對當前路由的組件進行渲染，而頁面的ajax請求，可能在同一臺服務器上，如果是的話速度也會快很多。最后后端把渲染好的頁面反回給前端。  注意：頁面能很快的展示出來，但是由于當前返回的只是單純展示的dom、css，其中的js相關的事件等在客戶端其實并沒有綁定，所以最終還是需要js加載完以后，對當前的頁面再進行一次渲染，稱為同構。  所以ssr就是更快的先展示出頁面的內容，先讓用戶能夠看到。  為什么seo友好呢，因為搜索引擎爬蟲在爬取頁面信息的時候，會發送HTTP請求來獲取網頁內容，而我們服務端渲染首次的數據是后端返回的，返回的時候已經是渲染好了title，內容等信息，便于爬蟲抓取內容。

如何實現

大致對ssr有了一個了解，我們現在需要對實現整理一下大致實現思路和流程。

1.選擇一個單頁面框架（我目前選擇的是react）

2.選擇node服務端框架（我目前選擇的是koa2）

3.實現核心邏輯，讓node服務端能夠路由和渲染單頁面組件（這一點分為很多小實現點，后面說）

4.優化開發和發布環境自動化構建工具（webpack）

開始實現之前創建一個react-ssr項目，項目下創建client和server目錄用于寫客戶端和服務端代碼，webpack目錄用于weppack文件配置。