官方網站簡單的事情也可以這麼做 - 從 SPA 到 SSR 簡單回顧

整篇我想說的是,

如果我不說,大家應該以為網站裡只有壽司。

Picklete ,是許多架構的基礎和本體,架構上基本採用 Sails.js & jQuery (I love jQuery) ,至今可以說是改到連自己的爸爸媽媽都不認識它了。

https://github.com/miiixr/picklete

官方網站建置案子,應該是採用 Picklete 4th 的基礎匡底,以及延續當時 react SPA 架構。

在開始建置之前,為了解決 react SPA 的 SEO 問題,針對爬蟲另外架設 (Prerender - AngularJS SEO, ReactJS SEO, or VueJS SEO) 。

在當時的條件和狀況下,已經是一個折衷但可接受的解法,但是稱不上完美。

執行討論

官方網站的案子,是跟 Zet 一起進行開發。

在每次開發網站之前,都會先稍微小小討論架構和處理方向原則,以製作產品的方式先規劃出大方向,輪廓,再來切分細節和執行內容。

官方網站的案子開始進行時, Zet 就提議採用 Next.js 所建立的架構,加上原本的 react general module 來進行開發。

的確這樣可以最根本解決掉 SEO issue,以及頁面在原本 Page initial 的時候直接從伺服器取得資料,大幅降低等待時間。

我們就這麼做吧!

版本改版及模組修改

這段時間遇到了 webpack 的重大更版,裡面的確解結了歷史問題,但也換來了架構更新的問題,以及設定無法沿用的問題,更不用說其他 webpack module 無法直接使用的問題。

再加上對於 Next.js 其實自己並沒有這麼熟悉,基本上 route 的包裝和處理都是交由 Zet 來進行處理。

其實你說把握很大嗎?基本上心裡是有些盤算,如果無法如期完工,可以用什麼方式來進行,當然專案也在最後幾週的時間把人抓過來一起 hackthon 個兩天左右,讓交期如期完成。

畢竟,這就是一種投資,不試就什麼都不知道。

技術投資有賺有賠

對於官方網站開發這件小事情來說,對於大部分開發者來說,就是一件 打字換錢 的事情,本身沒有任何技術含量,也沒有太複雜的事情要處理。

在執行前就已經大致上準備好救火方案,不過我們很慶幸地用不到這個方案就是了。

整體上,大致上做了以下這些事情

  • webpack update
  • react.js version update
  • next.js integration
  • route 整合(front end route & SSR route)
  • react & next page Dynamic title 處理
  • general module refactoring
  • Page / container / module rewrite

詳細的前台程式架構說明,其實都可以在這份簡報裡面找到, Ultra Simple Isomorphic with Next.js by Zet

整體來說,這是一件有趣的事情,當然成本也的確墊高很多,原本預期 2 週完成的事情,卻提高到 5 週左右,其他人也有項目正在進行所以,也是遠水救不了近火(嘆氣)。

執行一年後

時間過去一段時間,回頭看看,

技術投資與風險,值得嗎?

對我來說答案很肯定,值得

如果不這樣做,我們永遠都在做簡單頁面,我們都在用自己認為『最快的方式』進行開發,並不會有任何進步。

對於 react.js 的認識也就只會止步於此,不會再有更多進一步的處理,SEO 問題也不會有如此漂亮的解法。

打字換工,並不是我們要的,我們要做出讓人覺得沒什麼,細看之下又可以 『wow』 的工藝品。

簡單的事情困難做

一件事情,永遠有千千萬萬總方式可以解決,對於技術團隊來說,如果做這件事情不有趣,那就不是技術團隊了。

簡單的事情,複雜做,
複雜的事情,簡單做。

SSR 在現在可以說是通式,React 有 Next.js, Vue 也有 Nuxt.js ,Angular 也自己有 Universal 。

對於開發來說,有許多好玩有趣的事情正在進行著,工程師不會因為事情的停滯而停止學習,雖然開源專案已經有許多商業方向的轉變,以及企業策略的介入,這些都只是過程。

更重要的是,這看似平凡無奇的官方網站,經過程式設計師的巧手,永遠都會有意想不到的樂趣,就像是個工藝品般值得好好欣賞。

藏壽司 台灣官方網站|くら寿司 Kura Sushi

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn