Next.js のハイドレーションエラーを解決する方法-jsチュートリアル-php.cn

Next.js のハイドレーションエラーを解決する方法

WBOY

リリース： 2024-09-06 21:00:18

オリジナル

871 人が閲覧しました

How to Solve Hydration Errors in Next.js

「サーバーでレンダリングされた 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 <h1>{isClient ? 'This is never prerendered' : 'Prerendered'}</h1>
}

ログイン後にコピー

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

import dynamic from 'next/dynamic'

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

export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

ログイン後にコピー

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