Server Side Rendering
Redux Wrapper for Next.js
A HOC that brings Next.js and Redux together
https://github.com/kirill-konshin/next-redux-wrapper
ReactDOM.hydrate
ReactDOM.hydrate 的話，就是把 pure HTML DOM 接上 React，變成受到 React 控制的 DOM。
常用在 Server Side Render，server 先給出 render 好的 HTML 給瀏覽器顯示，讓使用者先看到網頁內容，然後在載入 React 和 FE code 之後，再把 React 接上使用者一開始看到的 HTML，變成可以互動的 UI。
Ref:
- https://nextjs.org/docs/basic-features/pages#pre-rendering "Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)"
- https://reactjs.org/docs/react-dom.html#hydrate "...is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup."
- https://www.gatsbyjs.com/docs/react-hydration/
不過 (re/de)hydrate 這個詞其實有更通用的意思 (e.g. 把 state 打平打成字串 / 把打平成字串的東西還原成 state)，詳見 https://stackoverflow.com/questions/29824908/what-does-dehydrate-and-rehydrate-stand-for-in-fluxible 的各種回答
資料 fetch 情況
Server 不會判斷螢幕大小，而自動以 mobile 的模式去 render
(或 desktop 看你怎麼設定)
- 如果你的 layout 有根據 device width 不同，而有 render 不同內容 (components)，可能會造成 re-render、讓使用者看到閃一下（形變）的狀況，這有兩個解法：
- 使用 CSS 的 RWD (media query) 的方式來適應不同的裝置寬度，而不是 render 不同的 HTML。
如果一定要 render 不同的 HTML，以 mobile (大多數使用者) 的 view 為預設。這樣至少比較少 users 會閃 - 使用 Client-side render，就是 useEffect (componentDidMount) 再 render，實作上可以多一個 didMount 的 state 來管理。但是，SSR 跟前端的內容就不一樣了，不適合需要 SEO 的內容
Server-side rendering 的情況 (Next.js + React, Redux + immutable.js)
所有的 state 在吐到前端之前都會先 to js > to string，然後前端再做 to js > to immutable，在做 immutable 的時候把所有階層的 state 都轉成 immutable 了，所以即使在 state 裡面存 object，到了前端還是會變成 Map()
結論：所有 state 都應該要是 immutable
redux/configureStore.js
const store = createStore(createReducer(), fromJS(initialState), composeEnhancers(...enhancers));
(延伸閱讀：可以考慮 immer.js)
Next.js 設定 HTML Lang 屬性
<Html lang="en">
https://nextjs.org/docs/advanced-features/custom-document