大前端時代最好的框架-Nuxt

這樣下標題不知道會不會太誇張,但至少我現在是這麼認為的啦!

那到底是為什麼?先從我學習這個框架的經驗開始說好了,在現在前端框架盛行的情形下,我選擇了使用Vue,原因很單純,因為我比較喜歡看原始的html標籤,而react將html拆得太散了,利用太多function call back來組成整個頁面,而Vue將一個組件分成樣版塊、程式塊、樣式塊,我覺得這樣看很清楚容易懂,在樣板利用一些語法糖來呈現迴圈重複的標籤或判斷句,在程式區,就只要專注在操作資料上就可以了,而整個組件又可以再往下延伸許多子組件,我覺得這樣的架構和設計還不錯就是了,這是我用Vue到現在的感想。

那Vue用一用,如果要考慮到SSR的話,很自然而然的就一定會找到這個框架-Nuxt,當然Vue官方有提供一個SSR的生態系統,官方網址,但複雜的程度很容易讓人卻步,因為SSR本身就不是一件很容易的事情,要將前端的組件,放到伺服器端上渲染,其實還是有很多東西要考慮的,像是目前執行的程式是要在伺服端執行或是在客戶端執行,要組織這些做成一個稍有規模的網站,也是不容易的,所以使用Nuxt這個框架就是很好的解決方案。

那我在學習使用Nuxt,也碰過很多困難,也不是一直都很順利,甚至有時候也覺得,這似乎不是一個非常好的框架,但一直到現在我了解了其他的框架技術,和目前整個開發網站的架構、技術的趨勢,還有對Nuxt這個框架的更多的了解之後,我認為這個框架還是目前開發現代網站最好的框架。

再來說說目前開發網站技術的趨勢,現在大多走向前端化,而前端化大概就有這些優點

  • 減少伺服器負擔
  • 增加使用者操作流暢感
  • 前後端分離後,容易個別開發手機app

但是完整的網站前端化,又接著出現了一些缺點

  • 對SEO不友善
  • 初始頁面載入空白

當然要解決這兩個問題,也有很多解決方法,但那些方法都比較像是解決表面的問題而已,如果要徹底解決,SSR仍然還是一條一定要走的路,也就是後端伺服器裝Node是一個必須要面對的事情了,我一開始其實蠻不想裝的,因為裝Node很容易裝了一堆模組讓伺服器看起來太肥大,但…我想從一開始決定接觸前端框架的開發,就必須使用npm之類的工具開始,這就是一個只能這樣的態度面對了。

綜合以上,再回到Nuxt,Nuxt提供了三種的佈署模式,

第一種,Generate,產生靜態檔,並預先注入異步數據,這種模式在開發一般公司形象網站非常有用,除了預先注入了資料,能讓SEO優化更好,在前端使用者操作上,也能享受到前端化帶來操作流暢的好處,因為形象網站的資料通常不多而且固定的,所以在這個模式下非常適用。

第二種,SPA模式,也就是單純產生一個SPA網站,如同一般前端開發一樣,所有資源透過webpack都會打包到dist資料夾裡面,只需將資料夾裡面的東西,丟到一般網頁伺服器上,就能跑了。

第三種,SSR模式,要使用這個模式必須在伺服器上裝Node來執行,達到伺服端渲染的效果,那要在背景永久執行node的程式,建議使用PM2

於是有了這三種模式,幾乎完全適用於各種類型網站的狀況,而當你使用了SSR,也就是Nuxt本身也是在後端執行Node,所以Nuxt本身也能提供後端的API,這是官方文件,雖然我自己是還沒用過,但理論上看起來就是能這樣做就是了,所以這個框架本身就能通吃前後端了,所以我個人覺得這大概是目前最好的框架了。

另外當然還有各種Node的全端框架,比較有名的像是Meteor,我有玩過一點,但我對他還不甚了解,或者也能使用最簡單也最早出現的Node web 框架,Express,這個框架非常單純,就是基本幫你處理各種網頁request,其他你自己處理這樣,所以可以很彈性的運用加入其他各種Node模組做搭配,像是可以Express+Vue+Mongodb,或者也可以搭配Nuxt,但我覺得意義好像不大就是了,樣板引擎也都可以自由選擇,算是非常簡單彈性的框架,但就是什麼東西都要自己去組合就是了。

以上就是到目前我個人的感想,也許以後也會對某些事情的看法改觀,畢竟在這瞬息萬變的程式世界裡面,也沒人知道接著又會有什麼新奇有趣的事情會發生,只有不斷的接收新訊息,思考它們,改變思維,才能找到屬於自己適合的東西吧。

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *