.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 を使用する場合のみサポートされています。クラシックRemixコンパイラ は .client ファイルのみサポートしています。

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