翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# スキュー保護の仕組み
<a name="skew-protection-headers"></a>

ほとんどの場合、\$1dpl Cookie のデフォルトの動作は、スキュー保護のニーズに対応します。ただし、次のような高度なシナリオでは、`X-Amplify-Dpl` ヘッダーと `dpl` クエリパラメータを使用してスキュー保護を有効にするほうが適しています。
+ 複数のブラウザタブにウェブサイトを同時にロードする
+ サービスワーカーを使用する

Amplify は、クライアントに提供するコンテンツを決定するときに、受信リクエストを次の順序で評価します。

1. **`X-Amplify-Dpl` ヘッダー** – アプリケーションはこのヘッダーを使用して、特定の Amplify デプロイにリクエストを送信できます。このリクエストヘッダーは、`process.env.AWS_AMPLIFY_DEPLOYMENT_ID` の値を使用して設定できます。

1. **`dpl` クエリパラメータ** – Next.js アプリケーションは、フィンガープリントされたアセット (.js ファイルと .css ファイル) へのリクエストに対して、\$1dpl クエリパラメータを自動的に設定します。

1. **\$1dpl Cookie** – これは、スキュー保護されたすべてのアプリケーションのデフォルトです。特定のブラウザの場合、ドメインとやり取りするブラウザタブまたはインスタンスごとに同じ Cookie が送信されます。

   異なるブラウザタブに異なるバージョンのウェブサイトがロードされている場合、\$1dpl Cookie はすべてのタブで共有されることに注意してください。このシナリオでは、\$1dpl Cookie で完全なスキュー保護を達成することはできません。スキュー保護に `X-Amplify-Dpl` ヘッダーを使用することを検討する必要があります。

## X-Amplify-Dpl ヘッダーの例
<a name="skew-protection-header-example"></a>

次の例は、`X-Amplify-Dpl` ヘッダーを介してスキュー保護にアクセスする Next.js SSR ページのコードを示しています。このページは、その API ルートの 1 つに基づいてコンテンツをレンダリングします。API ルートに提供するデプロイは、`process.env.AWS_AMPLIFY_DEPLOYMENT_ID` の値に設定されている `X-Amplify-Dpl` ヘッダーを使用して指定します。

```
import { useEffect, useState } from 'react';

export default function MyPage({deploymentId}) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/hello', {
            headers: {
                'X-Amplify-Dpl': process.env.AWS_AMPLIFY_DEPLOYMENT_ID
            },
        })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(error => console.error("error", error)) 
    }, []);

    return <div>
        {data ? JSON.stringify(data) : "Loading ... " }
    </div>
}
```