Next.js – React 完美的服務器端渲染框架
今天如果要做到前後端徹底分離，Server-side Render (SSR) 是不可或缺的，我們需要一個 Server-side 框架可以支持 React and Redux，傳統為了 Isomorphic 與 SSR 我們得要自幹，難以接受的我們必須妥善考慮許多事情：
- 同時可以 client 與 server 都能運作的 library 與 config (通常很難，所以難免會有兩套作法)
- 透過 webpack 實現熱加載功能 (webpack-hot-middleware/client，寫在 node.js start.js 裡)
- js 代碼需搭配不同頁面作分割 (common.js、page.js … etc.)
- Server-side 渲染 React 組件轉成 HTML
- 資料脫水和注水
- Server-side 管理 Redux Store
- 支持 Server-side 與 Client-side 獲取相同資料來源
這讓人難以輕易上手，我只是一個前端呀！我只想寫 React 而已呀！為什麼要我做這些？
那麼，Next.js 就是來解決你困擾的，以上的煩雜設置，它都幫你處理好了，它透過約定優於配置的方式，讓你專注在商業邏輯快速開發與迭代，而且有廣大的社群支持，你想問的問題社群都有，且 Github Stars 數已經達到 21,xxx 量，雖然你會覺得弄起來很魔幻，怎麼可以這樣的零配置就輕易達到 SSR？但在魔幻的背後，是不是就難以維護呢？才不會，它的易於擴充性會讓你滿意的。
你總不想要用 React 寫出來的網頁無法作 SEO 吧！況且，一套程式可以在前後端上跑是一件多麽快樂的事情呀！
現在就一起來學習 Next.js 吧！而且，就是現在！
為什麼我要關注 Next.js？
- 我已經掌握如何運用 Node.js 創建 React 應用的技巧
當 jQuery 問世時，它的易用成為了一場革命 – 為什麼要關注 jQuery？只要繼續使用 Vanilla JS 就可以了。但是我們不得不承認它改善了幾乎所有代碼庫和使我們生活變得更簡單了一點。
創新終將是贏家，為什麼不做第一個吃螃蟹的人呢？
Next.js 如何改善你的生活？
- 使用簡單。webpack、react routing、react 和 react-dom 設置都可以丟了，因為所有設置都已經含在裡面，邁向零配置境地。
- 代碼分離，開箱即用。
- 初始只加載首頁，提升性能
- 改善 SEO
- 一切皆 Javascript 與 Meteor 相比，Next 擁有許多正確的編程思想 (最重要的，它足夠簡單)
Client-side Render 和 Server-side Render 有什麼區別？
- Client-side Render：通常我們使用 React，你的瀏覽器會下載一個最小化的 HTML 頁面，然後用 JavaScript 生成、填充內容。
- Server-side Render：在 Server-side 已經生成好初始內容，所以你的瀏覽器下載的是一個完整的頁面，它的內容早已在裡面。但內容的更新仍然需要瀏覽器來處理。
Server-side Render 的不足
- 多數情況下，Server-side Render 可以提升性能，但一些情況下卻會適得其反
- SSR 會增加 Server 壓力，所以你的 HTTP 響應返回會花費更長一點的時間。如果你的 Server 負載很重的話，花的時間將會更加長
- 你的 HTML 頁面大小將增加和花費更多下載時間。對大多數的應用而言可忽略不計，但如果你的 React 組件包含很長的陣列或表格，那就不能忽視了。SSR 通常會為你的應用提升性能，但也不是絕對的。
- 使用 SSR 會增加你應用程序的複雜度，這意味著 Server 應用在其他特性和改進上的時間將會更少
什麼時候該使用 Server-side Render？
- 你需要做 SEO
- 你已經有一個運行中的 React 應用，需要更佳的性能和願意為增加的 Server 資源去付費
什麼時候不該使用 Server-side Render？
- 你的 React 應用還沒完成：首先得讓它可以工作，這時不應該使用 Next。(但如果是從頭寫一個應用是完全沒問題的)
- 你只需要在 Google 上作 SEO (確保 Google 能抓取到你的內容)
- Server 資源短缺
有什麼可以替代 Server-side Render？
- 像平常一樣在 Client-side Render。依靠 Googlebot 的 JavaScript 抓取功能做 SEO，把你應用程序的關注點放在其他性能方面的提升。
- prerender 是一個存儲你頁面緩存的服務。這將有助於 SEO 和 性能提升，它能保持你代碼的整潔。
讓我們開始 Next 之旅
mkdir next-react-ssr && cd next-react-ssr && npm init -y && npm install --save react react-dom next && mkdir pages
安裝 react、react-dom 和 next，用你的 IDE 打開項目。添加運行 next 的腳本：
"script": {
"dev": "next"
}
見證奇蹟，運行 dev 腳本！在瀏覽器輸入 http://localhost:3000。
是的，我們已經成功安裝了 Next。是不是不可思議的簡單？
我們已經將令人痛苦的項目配置都封裝好，開箱即用，包含 React、webpack、熱加載、路由、SSR、prerender 和許多非常棒的東西！
可為什麼 Next 給我們一個 404 頁面？
這…因為我們還沒創建任何頁面！
讓我們在 pages/index.js 創建我們第一個組件：
const Index = () => (
<div>
<h1>Hello Next!</h1>
I'm already in love with you!
</div>
);
export default Index;
重運行 npm run dev，並查看 http://localhost:3000 結果吧！
注意我們為什麼不需導入 React ？Next 是如何設置路由的？試試添加其他段落，我們同樣支持熱加載！
完美。
如果你查看我們生成的 HTML 頁面，將會看到以下內容：
這就是 Next 神奇之處，我們的 React 應用已經在 Server-side Render 了。
接下來談及到的是 github 官網上的內容，讓我們更靠近 Next.js 吧！
參考資料：