Jan 07 2021
Next.js 的Layout最佳配置
前情提要
新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正， 在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題， Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的， 再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。
Next.js Layout最佳配置
在Next.js的Layout最佳配置應該是把Layout的component放在_app.tsx中，在轉換頁面時就不會再出現前情提要的相關問題了。
在得到結論前的一些排查點
在一開始我們的_app.tsx與index.tsx或其他page都是這樣的設計，在Layout中有Header與Footer兩個component以及負責所有頁面上的版面配置， 其中Header這個component中去取得GQL資料，但因為他是屬於React FunctionComponent的範疇，故無法使用getInitialProps這類的function
- 在方案一的我是透過React Memo的方式Cache Layout起來下次使用Layout 這個component時就不會再重新渲染，但結果是仍然每次重新渲染Layout
- 在_app.tsx中取得相關的Layout配置所需要的圖檔與文字，透過props的方式傳入給Layout中並讓Header在Server side 渲染， 但因為progress image的使用所以Logo仍然會有閃一下的情況
然後在官網上看到了這麼一段.... 最後我把Layout放置到_app.tsx中，就可以如我們預期的一開始出現了progress image的Logo再出現真正的Logo，在每次轉頁時也沒有重新渲染相關的Layout component
我想主要的幾個原因是，_app.tsx的執行時間以及在轉頁渲染的最小單位是整個Next page不是採用差異的方式重新渲染。
Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like: