Next.js 開發心得全記錄
複雜的 React 開發環境
開發 react app 的環境設定對新手來說其實真的蠻複雜的，儘管目前已經有 create-react-app 幫助開發，但一開始就要搞懂 webpack, babel, react-router 就開始讓人害怕了。
尤其 react based 專案的 dependency 都是多到嚇死人， 隨便抓一個 boilerplate 來看看就會嚇死。
source from here
落落長的一堆 dependency ，剛入門的開發者鐵定是無所適從，如果你對你的專案的 dependency 不理解，就是一個風險，這代表未來的 maintain 都需要去追蹤各個 dependency 所遇到的問題，尤其是升級 package 的版本時，每個版本是否會產生問題，都是一種不確定因素，造成許多升級上的困擾。
更不用說若一開始沒有考慮 Server Side Rendering 時，而之後要導入的話，其實是非常痛苦的一件事，因為 SSR 會增加開發的複雜度，所以除了 application 的實作之外，你需要花更多時間在解決 package 之間的 bug， server side 與 client side 執行環境的差異性，效能的調教等等勞心勞力的問題上，這意味著我們反而一直在花時間處理環境與各種設定上的問題，而無法專注於應用程式的開發。
而 Next.js 解決了大部分的問題，他把大部分的開發，打包，部署等程式都抽出來，讓開發者可以專注在產品的開發，而不需要花時間心力在各種 webpack 的 config 上，而且 next.js 把 performance 視為最高指導原則，因此你不用做太多複雜的設定，就可以開始一個 production ready 的專案。
為何需要 Server Side Rendering?
- SEO：需要能被 search engine 或 social platform 抓到正確的內容。
- 第一屏的顯示速度：Client Side Render 需要等待所有的資源都準備完成才能開始執行，因此如果你的網站需要更快速的回應第一屏結果，就會需要 SSR。
Server Side Rendering 的困難點
雖然 SSR 有很多好處，但在執行前還是需要考慮他的困難點。
- 增加 Application 的複雜度：需要考慮 Client Side 與 Server Side 不同的執行條件，例如 cache，例如 cookie 等等都會讓應用程式的開發更為複雜。
- 增加 response 的回應時間：因為需要依照不同的 request 來回應相對的結果，就會增加 server side 執行運算的時間。
- 增加 response 的大小：同理，也會增加回應的內容大小。
SSR 的替代方案？
因此若您的 Application 是已經正在運行的 Client Side only 的專案，要加上 Server Side Rendering，需要考慮的因素其實蠻多的。但除此之外，也可以考慮 prerender 之類的 service，協助回傳給你執行完的結果。
Next.js
但總之，如果我們要開始一個新專案而且有需要 SSR，我很推薦 Next.js，Next.js readme 寫得很好，照著做就可以馬上上手，另外 awesome-nextjs 也有收集許多相關的資源。這裡就不贅述。
以下就列出一些我們在開發時遇到的一些問題以及解決方式。
- Next.js src folder
依照 next project 預設的方式他並沒有區分 src folder，開發到一半我們就發現這樣目錄結構實在是很亂… - error Handling
Next.js 預設有處理 route error，但若遇到 api error 則需要考慮 server side 以及 client side 的 error handle… - universal configuration
application 可能會有各種 config，例如 ga id，在不同 deploy 的環境會不一樣，例如 secret key，只會在 server side，不能 export 到 client side，因此就需要有一個一致的 config rule… - Cache strategy
主要是分享我們如何針對 Next.js project 優化 cache 的 strategy，降低 server loading。
總結
就算用了 next.js，還是無可避免依然還是有許多複雜的環境問題需要克服，但至少在更新時，我們可以直接
歡迎一起討論 next.js
