Next.jsでComponentをClientでだけレンダリングさせたいときのメモ

Next.jsがゴリ押してきたReact Server Componentが広まってきて使われてはじめている.
↓
ServerとClientでレンダリングされているHTMLが異なる場合にでるHydrationErrorによく遭遇するようになった.
↓
とはいえ,LocalStorageとかをliteに使用してアプリを開発したいよね.
↓

"use client";

import dynamic from "next/dynamic";

const CheckPlayerName = dynamic(
  () => import("@/features/CheckPlayerName").then((mod) => mod.CheckPlayerName),
  {
    ssr: false,
  },
); // CheckPlayerNameはLocalStorageを見ているのでClientでのみRenderingさせたい

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <div>{children}</div>
      <CheckPlayerName />
    </>
  );
}