`<LiveReload />`

このコンポーネントは、アプリを Remix アセットサーバーに接続し、開発中にファイルが変更されると自動的にページをリロードします。本番環境では null をレンダリングするため、ルートルートで常に安全にレンダリングできます。

app/root.tsx

import { LiveReload } from "@remix-run/react";
 
export default function Root() {
  return (
    <html>
      <head />
      <body>
        <LiveReload />
      </body>
    </html>
  );
}

プロパティ

`origin`

Live Reload プロトコル用のカスタムオリジンを指定します。提供されるURLはhttpプロトコルを使用する必要があります。これは内部的にwsプロトコルにアップグレードされます。これは、Remix開発サーバーの前にリバースプロキシを使用する場合に役立ちます。デフォルト値はREMIX_DEV_ORIGIN環境変数、またはREMIX_DEV_ORIGINが設定されていない場合のみwindow.location.originです。

`port`

Live Reload プロトコル用のカスタムポートを指定します。デフォルト値は、REMIX_DEV_ORIGIN環境変数から取得されたポート、またはREMIX_DEV_ORIGINが設定されていない場合のみ8002です。

`timeoutMs`

timeoutMsプロパティを使用すると、Live Reloadプロトコル用のカスタムタイムアウトをミリ秒単位で指定できます。これは、Web Socket接続が失われた場合に再接続を試みるまでの遅延です。デフォルト値は1000です。