Open1
【Next.js/React】Hydration Error が起きる理由と解決方法について
まさぴょんHydration Error：CSRとSSRのRenderデータなどが一致していないことによるError
詳しい説明は、こちらの記事などをご参照ください🙏
根本対応 (プロジェクト全体で、SSRを無効化する)
NoSSRWrapper Componentを作成する
app/src/components/no-ssr/NoSSRWrapper.tsx
import { Fragment, ReactNode } from "react";
export const NoSSRWrapper = ({ children }: { children: ReactNode }) => {
return <Fragment>{children}</Fragment>;
};
_app.tsxを SSR 無効化Componentでラップする
app/src/pages/_app.tsx
import "@/styles/globals.css"; // Tailwind CSS を適用する
import type { AppProps } from "next/app";
import dynamic from "next/dynamic";
const NoSSRWrapper = dynamic(
() =>
import("@/components/no-ssr/NoSSRWrapper").then((mod) => mod.NoSSRWrapper),
{
ssr: false,
}
);
const App = ({ Component, pageProps }: AppProps) => {
return (
// SSR 無効化するコンポーネントでラップする
<NoSSRWrapper>
<Component {...pageProps} />
</NoSSRWrapper>
);
};
export default App;
単一ページ対応
dynamicを使用する
- 単一ページのComponentをDynamic importとする。
const SampleComponent = dynamic(
() =>
import("@/components/no-ssr/NoSSRWrapper").then((mod) => mod.SampleComponent),
{
ssr: false,
}
);
use client
// ファイルの先頭に記載する
"use client";
window Objectの状態でSSR Errorを回避する
// SSR Error 回避
if (typeof window === "undefined") {
return null;
}
参考・引用