1. 水分補(bǔ)給エラーは、サーバーレンダリングHTMLがReactの水和プロセス中にクライアント側(cè)の期待と一致しない場(chǎng)合に発生し、警告またはUIの問題につながります。コア修正は、サーバーとクライアントのレンダリング間の一貫性を確保することです。 2。クライアント固有のコンテンツを表示する前に、クライアントに取り付けられたフラグを設(shè)定するためにEffectを使用してEffectを設(shè)定するために、このようなレンダリングを延期することにより、ウィンドウやLocalStorageなどのクライアントのみのデータに基づいた條件付きレンダリングを回避します。 3.サーバー側(cè)のデータを使用して、GetServerSidePropsなどのメソッドを取得することにより、非同期データからの不一致を防ぎ、サーバーとクライアントの両方が同じ初期データを受け取るようにします。 4.タイムスタンプなどの動(dòng)的値をサーバー上のプレースホルダーに初期化し、クライアント側(cè)のマウント後にのみ更新することにより、時(shí)間ベースまたはランダムベースの差を排除します。 5.環(huán)境間で真実性が異なるためにDOMの違いを回避するために、SSR中に條件付きレンダリングが利用可能なデータに依存するようにすることにより、同一のHTML構(gòu)造を確保します。 6.使用Effectを使用して、クライアント側(cè)にサードパーティのスクリプトまたはウィジェットを延期して、油水後の予期しないDOM変異を防止します。 7.ベストプラクティスに従ってください：データサーバー側(cè)を取得し、初期UIロジックの使用効果を回避し、初期狀態(tài)を調(diào)整し、応答性のためにJavaScriptよりもCSSを好み、避けられない不一致に抑圧的に使用します。サーバーとクライアントが同じ出力をレンダリングするか、水分補(bǔ)給後までクライアントのみのコンテンツを延期することにより、ほとんどの水分補(bǔ)給の問題を解決できます。

サーバー側(cè)のレンダリング（SSR）アプリケーション（next.js、nuxt.js、またはSSRとの反応）で構(gòu)築されたアプリケーションなど、初期負(fù)荷が高くなり、SEOが優(yōu)れています。しかし、それらには一般的なゴッチャが付屬しています：水分補(bǔ)給エラー。これらは、サーバーレンダリングされたHTMLが、クライアントがReact（またはVueなど）の水和段階で期待するものと一致しない場(chǎng)合に発生します。結(jié)果？開発者、潛在的なUIグリッチ、または完全なコンポーネントの障害での警告。

水分補(bǔ)給の不一致の原因とそれらを修正する方法を分解しましょう。

水分補(bǔ)給とは何ですか、そしてなぜそれが失敗するのですか？

水分補(bǔ)給とは、クライアント側(cè)のJavaScriptフレームワークが、サーバーで生成された靜的HTMLにインタラクティブ性を「添付する」プロセスです。 Reactは、サーバーレンダリングされたDOM構(gòu)造を、クライアントにレンダリングすると予想されるものと比較します。ミスマッチがある場(chǎng)合、Reactはそれを調(diào)整しようとします。多くの場(chǎng)合、次のような警告があります。

警告：テキストコンテンツは一致しませんでした。サーバー：「ロード...」クライアント：「こんにちは、ユーザー」

この不一致は、SSRが依存している仮定を破り、バグやパフォーマンスの問題につながる可能性があります。

一般的な原因とそれらを修正する方法

1。クライアントのみのデータに基づく條件付きレンダリング

最も頻繁な犯人の1つは、ブラウザー固有のAPI（ window 、 localStorage 、 navigatorなど）のために、サーバーとクライアントの異なるコンテンツをレンダリングすることです。

関數(shù)mycomponent（）{
  const [ismobile、setismobile] = uesestate（false）;

  effect（（）=> {
    Setismobile（window.innerwidth <768）;
  }、[]）;

  return <div> {ismobile？ 「モバイルビュー」：「デスクトップビュー」} </div>;
}

問題：サーバーでは、 windowが定義されていないため、 isMobile falseとして起動(dòng)します。しかし、クライアントでは、 useEffect実行された後→Hydrationの不一致後にtrueかもしれません。

解決策：マウント後までレンダリングを遅らせるか、2パスレンダリングを使用します。

関數(shù)mycomponent（）{
  const [isclient、setisclient] = uesestate（false）;

  effect（（）=> {
    setisclient（true）;
  }、[]）;

  if（！isclient）{
    return <div> loading ... </div>; //またはnull、または靜的プレースホルダー
  }

  return <div> {window.innerwidth <768？ 「モバイル」：「デスクトップ」} </div>;
}

または、JSベースのレンダリングの決定を避けるために、 useEffectベースの検出またはレスポンシブ設(shè)計(jì)システム（CSSメディアクエリ）などのヘルパーを使用します。

2。遅すぎる解決策の非同期データ

コンポーネントがデータを待っている間に異なるコンテンツをレンダリングする場(chǎng)合（例えば、ロード狀態(tài)）、サーバーがその狀態(tài)を正しくシミュレートしない場(chǎng)合、不一致が発生します。

 function userprofile（{userId}）{
  const [user、setuser] = uesestate（null）;

  effect（（）=> {
    fetchuser（userid）.then（setuser）;
  }、 [ユーザーID]）;

  ユーザーを返しますか？ <h1> {user.name} </h1>：<p>ロード... </p>;
}

問題：サーバーは「読み込み...」をレンダリングする可能性がありますが、クライアントの狀態(tài)がnullとして起動(dòng)すると、Reactが「ロード...」を予想するため、一致する可能性があります。ただし、クライアント側(cè)のフェッチがキャッシュから即座に解決すると、名前→ミスマッチにジャンプする可能性があります。

より良いアプローチ：Frameworksの組み込みデータフェッチ（ getServerSideProps 、 loadなど）を使用して、サーバー上のデータを取得し、小道具として渡します。

 // next.jsの例
async関數(shù)getserversideprops（）{
  const user = await fetchuser（）;
  return {props：{user}};
}

function userprofile（{user}）{
  return <h1> {user.name} </h1>;
}

これで、サーバーとクライアントの両方が同じものをレンダリングします。不一致はありません。

3。時(shí)間またはランダム性に基づく動(dòng)的コンテンツ

functionClock（）{
  const time = new date（）。tolocaletimestring（）;
  return <div> {time} </div>;
}

問題：サーバーは時(shí)間をレンダリングし、クライアントはわずかに異なるものをレンダリングします→ミスマッチ。

解決策：サーバー上のプレースホルダーをレンダリングし、正しい値で水分補(bǔ)給します。

 functionClock（）{
  const [time、settime] = uesestate（new date（）。tolocaletimestring（））;

  effect（（）=> {
    const interval = setInterval（（）=> {
      Settime（new Date（）。tolocaletimestring（））;
    }、1000）;
    return（）=> clearInterval（interval）;
  }、[]）;

  return <div> {time} </div>;
}

ただし、初期狀態(tài)はまだサーバーとクライアントの両方で実行されるnew Date()を使用しています。タイミングが非常に近い場(chǎng)合は、一致する可能性があります。厳密な一貫性については、狀態(tài)をプレースホルダーに初期化し、マウントのみを更新することを検討してください。

 const [time、settime] = uesestate（ '...'）;

4.不一致のHTML構(gòu)造

マークアップのわずかな違いでさえ警告をトリガーする可能性があります：

 {user && <p>ようこそ、{user.name} </p>}

userサーバーでnullであるが、クライアントの真実（またはその逆）の場(chǎng)合、DOM構(gòu)造は異なります。

修正：條件付きレンダリングで使用されるデータがSSRで利用できることを確認(rèn)してください。データフェッチングを使用して、サーバー上のそのような小道具を解決します。

また、必要でない限り、環(huán)境に基づいてさまざまなコンポーネントをレンダリングしないでください。

5。サードパーティのスクリプトまたはウィジェット

コンテンツ（ADS、チャットボット、分析）を注入するライブラリは、水分補(bǔ)給後にDOMを変更することが多く、反応は予想されません。

解決策：そのようなスクリプトをクライアントと水分補(bǔ)給後にのみロードします。

 effect（（）=> {
  const script = document.createelement（ 'script'）;
  script.src = 'https://example.com/widget.js';
  document.body.AppendChild（スクリプト）;
}、[]）;

SSRのレンダリングを防ぐために、コンポーネントをuseClientまたはisClient Guardでラップします。

水分補(bǔ)給エラーを避けるためのベストプラクティス

• server可能な場(chǎng)合は、サーバーにデータを取得します（SSRフレンドリーデータの読み込み）。
• visible Visible UIを変更する初期レンダリングロジックのuseEffect回避します。
• useEffect使用して、「取り付けられた」フラグを設(shè)定し、クライアントのみのコンテンツを條件付きでレンダリングします。
• serverサーバーとクライアントの初期狀態(tài)を一致させる -レンダリング中にブラウザAPIに依存しないでください。
• jsベースのレンダリングの代わりに、応答性のある動(dòng)作にCSSを活用します。
• suppressHydrationWarning={true}控えめに使用します（直接ミスマッチでのみ修正できません）。

 <Div SuppressHydrationWarning>
  {math.random（）}
</div>

これにより、警告は抑制されますが、根本的な問題は慎重に使用しません。

水分補(bǔ)給エラーは、多くの場(chǎng)合、仮定におけるサーバーと閉鎖の発散の癥狀です。両側(cè)にレンダリングされたものを調(diào)整することにより、またはクライアント固有のレンダリングを優(yōu)雅に延期することにより、ほとんどの問題を排除できます。

基本的に：サーバーで実行できない場(chǎng)合は、初期レンダリングに影響を與えないでください。

以上がサーバー側(cè)のレンダリングされたアプリケーションでの水分補(bǔ)給エラーの解決の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。