概要

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を使って若干機能を追加したページを表示する必要があったので