
## 前情提要

新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正，
在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題，
Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的，
再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

## Next.js Layout最佳配置

在Next.js的Layout最佳配置應該是把Layout的component放在`_app.tsx`中，在轉換頁面時就不會再出現前情提要的相關問題了。

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
		    <Layout>
			    <Component {...pageProps} />
			</Layout>
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <>
            {/*index content*/}
		</>
};
```


### 在得到結論前的一些排查點

在一開始我們的`_app.tsx`與`index.tsx`或其他page都是這樣的設計，在Layout中有`Header`與`Footer`兩個component以及負責所有頁面上的版面配置，
其中Header這個component中去取得GQL資料，但因為他是屬於React FunctionComponent的範疇，故無法使用getInitialProps這類的function

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
			<Component {...pageProps} />
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <Layout>
            {/*index content*/}
		</Layout>
};
```

1. 在方案一的我是透過React Memo的方式Cache Layout起來下次使用Layout 這個component時就不會再重新渲染，但結果是仍然每次重新渲染Layout
1. 在_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:
>
> - Persisting layout between page changes
> - Keeping state when navigating pages
> - Custom error handling using componentDidCatch
> - Inject additional data into pages
> - Add global CSS
>
> [Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)

### 相關連結

[Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)


新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正， 在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題， Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的， 再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

Next.js 的Layout最佳配置