#火柴盒 Nuxt SSR實作與效能調校紀錄

歷經漫長的兩個月，終於大致完成了 Matchbox火柴盒 – 網頁版。花最多時間的地方是SEO的部分，因為火柴盒有會員機制，所以訪客與會員看到的內容會有差異，所以在實現SSR時可說各種碰壁，例如：

1. 要怎麼在Server-Side存會員Token
2. 當網頁重新整理時，要如何保持Vuex的資料: nuxt-vuex-localstorage
3. 已登入會員的情況下，如何在Server-Side帶入Token呼叫API: cookie-universal
4. 在SSR的情況下出現DOM的異常

另外，網站套了不少Vuetify的Components，在跑Lighthouse時效能成績很差，爬了文發現，Vuetify本身好像有效能的問題待修正。但也有可能是Server的問題，隨著資料請求的頻率越來越高，但目前仍然使用最低規格的主機。

效能調校的部分，大概有以下方向：

1. 降低build後Vendor的Size
2. 打包時進行Content-Encoding: nuxt-compress
3. 在不必要的情況下，讓Components先不要載入畫面（例如：有些元件需要Scroll到很下面才會出現）: vue-lazy-hydration
4. 自動壓縮圖片: nuxt-optimized-images

【同場加映】