0

最新の React Starter Kit (Isomorphic) を使用してアプリケーションを構築していますが、問題が発生しています。アプリの多くには静的データが含まれているため、最初にサーバー側のレンダリングのみを使用していくつかのページを作成しました。

しかし、ボタンに onClick コールバックを追加するページを作成すると、コールバックが呼び出されませんでした。

しばらくして、Html 親コンポーネントに以下を追加することで動作させることができることがわかりました。

<script async src="/assets/main.js"></script>

そして今、ページは正常に機能します。しかし、これは正しい解決策ではないと思います。"—release" でアプリをビルドすると、ハッシュ タグ付きの main.js (例: main.63635afefa6a.js) が生成され、デプロイしても見つからないためです。

ここで何が欠けていますか？

4

1 に答える 1

0

// この回答は、現在動作している RSK について説明しています。質問からは、RSK のHtmlコンポーネントまたはサーバー側のルーティングを変更したかどうかは明確ではありません (これによりアプリが壊れる可能性もあります)。

main.jsとは？

main.js は、すべての JavaScript が WebPack によってバンドルされる場所です。これが、それを参照するスクリプト タグを強制的に追加すると、非リリース ビルドで動作するようになる理由です。

ただし、 --release builds を使用する必要があります...

--release を使用してアプリをビルドすると、ファイル コンテンツのハッシュがファイル名に追加されます。これは、コンテンツが変更されると、ファイル名が変更されることを意味します。

古いバージョン (ISP など) のキャッシュはすべて別の名前のファイル用であるため、更新された名前の更新されたファイルを要求するクライアントは、古いバージョンを取得しないことが保証されます。

では、正しい main.js 名をハッシュで指定するにはどうすればよいでしょうか?

コンポーネントには、次のようなHtmlJSX フラグメントが必要です。<body>

    {script && (
      <script
        id="source"
        src={script}
        data-initial-state={JSON.stringify(state)}
      />
    )}

変数には main.js ファイル名が含まれているため、これは標準の RSK で機能しscriptます (--release ビルドを使用する場合はハッシュが含まれます)。この変数値は、WebPack によって構築された assets.js から供給されます。次にHtml、server.js からのインジェクションを介して、上記のフラグメントで使用するためにコンポーネントで使用できるようになります。

app.get('*', async (req, res, next) => {
  const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };     
  // ...
  const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
于 2016-08-19T19:44:41.060 に答える