Next.jsでtitleやmeta tagがSSRされない原因

環境

• next@8.1.0
• redux@4.0.1
• redux-persist@5.1.0
• styled-components@4.1.3
• firebase@5.8.0
• typescript@3.2.1

titleやogpをSSRする方法

Headタグ内へ任意のタグを入れることでSSRできる
参考

今回の場合はこの方法でもSSRされなかった

原因

redux-persistはブラウザのstorageへアクセスするのでinternal serverでstorageへのアクセス待ちになり下層のpagePropsのcomponentはSSRされない
また、authenticatedでredirectや表示分けをする場合もclientで処理が終わらなければ下層componentへアクセスできないのでmeta tagはSSRされない

今回の読み込み順番としては...

1. _app.tsx内のPersistGateの前までSSR
2. SSR終了後、clientでtitle,ogpレンダリング

なのでnetwork panelからtitleやogpを確認してもレンダリングされていないことになる

redux-persistのssr error issue

解決策

PersistGateの使用をやめclient読み込み時にstorageへアクセスするようにする
https://github.com/rt2zz/redux-persist/issues/457#issuecomment-362490893