.client モジュール

一般的ではありませんが、ブラウザでモジュールの副作用を使用するファイルや依存関係がある場合があります。ファイル名に *.client.ts を使用するか、.client ディレクトリ内にファイルをネストすることで、それらをサーバーバンドルから強制的に除外できます。

// これはサーバーを壊すでしょう
export const supportsVibrationAPI =
  "vibrate" in window.navigator;

このモジュールからエクスポートされた値はすべてサーバー上では undefined になることに注意してください。したがって、それらを使用できる場所は useEffect やクリックハンドラーなどのユーザーイベントのみです。

import { supportsVibrationAPI } from "./feature-check.client.ts";
 
console.log(supportsVibrationAPI);
// サーバー: undefined
// クライアント: true | false

.client ディレクトリは、Remix Vite を使用している場合にのみサポートされます。Classic Remix Compiler は .client ファイルのみをサポートします。

詳細については、サイドバーのルートモジュールのセクションを参照してください。