🙃

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

1 min read

何がおきたか

  • 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がレンダリングされる

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

Discussion

ログインするとコメントできます