Remix ドキュメント 日本語版

English

<LiveReload />

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

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

Props

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です。