【Next.js】dynamic-pathでindex.tsxのComponentが一瞬表示される

何がおきたか

• pages/index.tsxの内容が、pages/[hoge].tsxに一瞬表示される

なぜか

• SPA は WEB サーバーからindex.html受け取る
  • これがデフォルトの表示に関係している？？？

どうしたか

/**
 * dynamic-pathなどの場合、`pages/index.tsx`がSSRのデフォルトとして読み込まれるため、
 * SSRではそのまま、CSRではリダイレクトする.
 *
 *  SSR: Rootがレンダリング -> Contentがレンダリング
 *  CSR: Contentがレンダリング
 *
 * このコンポーネントはローディング画面とすることで、一覧のUIの一貫性を保つ.
 */
const Root = () => {
  const router = useRouter();
  React.useEffect(() => {
    if (location.pathname === "/") {
      router.push("top");
    }
  }, [location.pathname]);

  return (
    <Box display="flex" width={"100vw"} height={"80vh"}>
      <Box m="auto">
        <CircularProgress />
      </Box>
    </Box>
  );
};

• デフォルトの表示を Loading 表示にする
  • SSR のときは path が/のときに top へリダイレクト
• useEffect で、CSR のときにパスを確認、/でなければそのまま
  • CSR（SPA）のとき、この Compoent がレンダリングされた直後、routing の Component がレンダリングされる

---

地味に時間がかかりました・・・。ややこしい・・・。
力技っぽいので、最適なソリューションをお持ちの方はコメントお待ちしています！