「サーバーでレンダリングされた HTML がクライアントと一致しないため、ハイドレーションに失敗しました....」

Next.js を使用してアプリケーションを構築している場合は、上記のエラーまたは同様のエラーが発生したことがあるはずです。 それはハイドレーションエラーと呼ばれます。

Next.js を初めて使い始めたときによくこのエラーが発生しましたが、何をすればよいのかわからず、当時はコードに大きな影響を与えていなかったので調べる気もありませんでした。 面接官から、Next.js のハイドレーション エラーを解決するにはどうすればよいか尋ねられるまでは知りませんでした。 私は唖然としました。なぜなら、それは面接官が私を失墜させようとしたのではなく、無頓着でまったくの無知だったからです。 次の面接では私と同じになってほしくない。 それでは、水分補給について話し合いましょう。

ハイドレーションは、静的な HTML に Javascript を追加することでインタラクティブになるプロセスです。 したがって、通常、Web ページがサーバー上でレンダリングされると、クライアントに到達する前に対話性とイベント ハンドラーが失われます。 React はクライアント上でコンポーネント ツリーを構築する役割を果たします。 これは、HTML がサーバー側でレンダリングされたときに失われた対話性とイベント ハンドラーを追加するため、ハイドレーションと呼ばれます。 React は、それを実際のサーバー側でレンダリングされた DOM と比較します。 React がそれを採用できるように、それらは同じである必要があります。

私たちが持っているページと、クライアント側が私たちが持っているべきだと考えているものとの間に不一致がある場合、「ハイドレーションエラー」が発生します。 一般的なハイドレーション エラーの原因には、不正な HTML 要素のネスト、レンダリングに使用される異なるデータ、ブラウザ専用 API の使用、副作用などが含まれます。

原因が何であれ、表示されるエラー メッセージを読んで原因を特定する必要があります。 考えられる解決策は次のとおりです。

1. useEffect を使用してクライアントのみで実行します。
ハイドレーションの不一致を防ぐために、コンポーネントが最初のクライアント側でレンダリングしたときと同じコンテンツをサーバー側でレンダリングするようにしてください。 useEffect フックを使用すると、クライアント上でコンテンツを意図的にレンダリングできます。 以下の例を参照してください:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2.特定のコンポーネントでのサーバー側のレンダリングを無効にします。
Next.js の特定のコンポーネントでプリレンダリングを無効にする機能を使用できます。 これにより、水分補給の不一致を防ぐことができます。 以下の例を参照してください:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
  )
}

3. 水分補給警告の抑制を使用する
タイムスタンプなど、コンテンツがサーバーとクライアントで必然的に異なる場合があります。 できることは、suppressHydrationWarning={true} 要素を要素に追加することで、水和不一致の警告を非表示にすることです。

これら 3 つの方法を使用すると、次回 Next.js でビルドするときにハイドレーション エラーが表示されたときに、そのエラーを解決できるはずです。

プログラミングに関するさらに目を見張るようなコンテンツを入手するには、私のページに登録することを忘れないでください。