(未解決)styled-componentsをSSGで使うとstyleが崩れることがある
>#WIP
styled-components
v5.3.3
nextjs
12.0.9
Chrome DevToolsでJavaScriptを無効にすると、初期表示では正しい
つまり、SSRした時点では正しい
clientでhydrationしたタイミングでズレている
リロードしたら崩れる
ページ遷移でそのページに来た時は崩れない
何故かclassNameがずれることがある
html<div class="hoge1"> ←ok
<div class="hoge1"> ←ng 本来はhoge2
<div class="hoge2"> ←ng 本来はhoge3
<div class="hoge3"> ←ng 本来はhoge4同じ場所では再現する
「たまに起こる」とかではなく毎回起こる
原因がわからないので再現するモノを複製できない
関連issue
対処法？
classNameが複製されているComponentにwithConfigを付ける
なおらん
そこだけCSRする
ts{typeof window !== 'undefined' && <Hoge />}こういうComponentを用意しておく
tsexport const ClientOnlyRendering: React.FC<Props> = ({ children }) => {
if (isClient) {
return children;
}
return null;
};しかしこれはError: Hydration failed because the initial UI does not match what was rendered on the server.を起こしてしまう
↑このエラーに従ってDOM構造をちゃんとしたら直った(?)
わかるけどできればやりたくない
応急処置感がありすぎる
Component名が重複しているから起きるの？
違う気がする
適当に名前を変えても再現し続ける
もしそうならモジュールにしている意味ねえ
babel-plugin-styled-componentsの
ssr: true もしている原因
対処法
対処法
divが連続になっているのが原因っぽかったので
とりあえず、span & display:block を使ったら回避できた
本質的な修正方法ではないのであまりやりたくないが仕方ない
なぜssr trueにするとスタイルが崩れたのか
これどうやって判断するんだ？
ページ遷移では崩れないが、reloadすると崩れる理由など
locaalhostでは再現しない理由
再現する