Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

Server Side Rendering

Server 不會判斷螢幕大小,而自動以 mobile 的模式去 render

(或 desktop 看你怎麼設定)

  • 如果你的 layout 有根據 device width 不同,而有 render 不同內容 (components),可能會造成 re-render、讓使用者看到閃一下(形變)的狀況,這有兩個解法:
  1. 使用 CSS 的 RWD (media query) 的方式來適應不同的裝置寬度,而不是 render 不同的 HTML
  2. 使用 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)