概要
next.jsで作った一部のページで、遷移後にCSSが一瞬効いてなくてチラつく FOUC(Flash of Unstyled Content) が起きたり、JavaScriptの処理が動いていない問題が起きた
条件
よく調べると、起きる条件は
JS処理が動いていない場合、動いていない処理は別リポジトリにあるHTMLをraw-loaderで引っ張ってきて dangerouslySetInnerHTML で埋め込んでいた中にあるscriptタグのものだった
CSSがFOUCする場合は
<Head>
<link rel='stylesheet' href='/hoge.css' />
</Head>
のようにアセットをnext/headタグ内で読んでいた
そして、それらのページへnext/linkで遷移していることだった
原因
next/linkを使った遷移はSPA的なクライアントサイド遷移であり、ページを0からロードせず、マークアップの差分だけ変更される
JSが動かないことに関しては、React.jsはdangerouslySetInnerHTMLで挿入されたscriptタグが実行されないことが原因
CSSがFOUCすることに関しては、next/linkでの差分変更時にCSSの取得と適用よりもbodyが変更されることが圧倒的に速いからと思われる
（ちなみにnext/linkはprefetchがありdefault:trueだが、これのtrue/falseはFOUCには関係なかった）
解決策
そのような構成になっているページへの遷移にnext/linkを使うのをやめ、aタグを使い、0からロードさせる
学び
そのような構成のページはSPA（向き）ではないので、クライアントサイド遷移でSPAとして作るためのnext/linkを使うのは間違っていた
しかしなんでnext.jsでそんなことを…？
他者が作り、ほぼ出来上がってるHTML+CSS+JSを使って若干機能を追加したページを表示する必要があったので