React是目前前端社區最流行的UI庫之一，它的基于組件化的開發方式極大地提升了前端開發體驗，React通過拆分一個大的應用至一個個小的組件，來使得我們的代碼更加的可被重用，以及獲得更好的可維護性，等等還有其他很多的優點...

通過React, 我們通常會開發一個單頁應用（SPA），單頁應用在瀏覽器端會比傳統的網頁有更好的用戶體驗，瀏覽器一般會拿到一個body為空的html，然后加載script指定的js, 當所有js加載完畢后，開始執行js, 最后再渲染到dom中, 在這個過程中，一般用戶只能等待，什么都做不了，如果用戶在一個高速的網絡中，高配置的設備中，以上先要加載所有的js然后再執行的過程可能不是什么大問題，但是有很多情況是我們的網速一般，設備也可能不是最好的，在這種情況下的單頁應用可能對用戶來說是個很差的用戶體驗，用戶可能還沒體驗到瀏覽器端SPA的好處時，就已經離開網站了，這樣的話你的網站做的再好也不會有太多的瀏覽量。

但是我們總不能回到以前的一個頁面一個頁面的傳統開發吧，現代化的UI庫都提供了服務端渲染(SSR)的功能，使得我們開發的SPA應用也能完美的運行在服務端，大大加快了首屏渲染的時間，這樣的話用戶既能更快的看到網頁的內容，與此同時，瀏覽器同時加載需要的js，加載完后把所有的dom事件，及各種交互添加到頁面中，最后還是以一個SPA的形式運行，這樣的話我們既提升了首屏渲染的時間，又能獲得SPA的客戶端用戶體驗，對于SEO也是個必須的功能。

OK，我們大致了解了SSR的必要性，下面我們就可以在一個React App中來實現服務端渲染的功能，BTW, 既然我們已經處在一個到處是async/await的環境中，這里的服務端我們使用koa2來實現我們的服務端渲染。

初始化一個普通的單頁應用SPA

首先我們先不管服務端渲染的東西，我們先創建一個基于React和React-Router的SPA，等我們把一個完整的SPA創建好后，再加入SSR的功能來最大化提升app的性能。

首先進入app入口 App.js:

import ReactDOM from 'react-dom';import { BrowserRouter as Router, Route } from 'react-router-dom';const Home = () => <div>Home</div>;const Hello = () => <div>Hello</div>;const App = () => { return (  <Router>   <Route exact path="/" component={Home} />   <Route exact path="/hello" component={Hello} />  </Router> )}ReactDOM.render(<App/>, document.getElementById('app'))

上面我們為路由/ 和 /hello創建了2個只是渲染一些文字到頁面的組件。但當我們的項目變得越來越大，組件越來越多，最終我們打包出來的js可能會變得很大，甚至變得不可控，所以呢我們第一步需要優化的是代碼拆分（code-splitting），幸運的是通過webpack dynamic import 和 react-loadable，我們可以很容易做到這一點。

用React-Loadable來時間代碼拆分

使用之前，先安裝 react-loadable:

npm install react-loadable# oryarn add react-loadable

然后在你的 javascript中:

//...import Loadable from 'react-loadable';//...const AsyncHello = Loadable({ loading: <div>loading...</div>, //把你的Hello組件寫到單獨的文件中 //然后使用webpack的 dynamic import loader: () => import('./Hello'), })//然后在你的路由中使用loadable包裝過的組件:<Route exact path="/hello" component={AsyncHello} />

很簡單吧，我們只需要import react-loadable， 然后傳一些option進去就行了，其中的loading選項是當動態加載Hello組件所需的js時，渲染loading組件，給用戶一種加載中的感覺，體驗也會比什么都不加好。

好了，現在如果我們訪問首頁的話，只有Home組件依賴的js才會被加載，然后點擊某個鏈接進入hello頁面的話，會先渲染loading組件，并同時異步加載hello組件依賴的js，加載完后，替換掉loading來渲染hello組件。通過基于路由拆分代碼到不同的代碼塊，我們的SPA已經有了很大的優化，cheers
注：相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。