これはかなり一般的な問題です。 すべてのユーザーに対して1つのユニバーサルビルド・バンドルがあり
、あなたは(あなたが〜彼のためにバンドルを構築するために10秒を待つようにユーザーを強制的にしたくない)試してみました少し違う、それを解決するために
- 優れている(または少数 - 通常のユーザーと管理者のユーザーのための第二)
- サーバーには、例えば特別なパラメータを使用して、ユーザーからの要求を取得するための一例について
userid
- サーバーにこの要求に対する応答としてスタートHTMLページをレンダリングする - たとえば、index.htmlを用。このファイルには、ユーザーのjsをバンドルするには
<script src
が必要です。ソースパスは、正確にjsバンドルを指すようにサーバーによって動的に構築される必要があります(複数ある場合)。また、コンポーネントから見えるはずの、サーバーからのパラメータを持つjavascriptグローバルオブジェクトも必要です。 たとえば、index.htmlは次のようになります(グローバルオブジェクトを作成せずに別の方法で行うこともできます)。 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
__CONFIG__ = {
someObject1: '<!-- @echo someObject1 -->',
someObject2: '<!-- @echo someObject2 -->',
userid: '<!-- @echo userid -->',
}
</script>
<script src="<!-- @echo SOME_PATH -->/static/bundle.js"></script>
</body>
</html>
今、あなたのコンポーネントは、グローバル変数CONFIGをチェックすることができます。 しかし、私はあなたの通常のコンポーネントでそれを使用しないことをお勧めします! 通常の反応アプリを読み込むブートストラップコンポーネントを作成します。これは、アプリと環境の間のブリッジのようなものです。 このブートストラップコンポーネント内のグローバルコンフィグレーションを読み取り、それをアプリにpropsとして渡します。
このブートストラップコンポーネントは次のようになります。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
const config = window.__CONFIG__;
ReactDOM.render(
<App
config={config}
/>, document.getElementById('root'));
編集: をあなたはデシベルに基づいて初期状態を設定したり、何かを反応お伝えしている場合にも良い方法です。 これにグローバル変数を追加します__INIT__
ロード時間はボトルネックになり、提案した方法に近いアプローチを選択する必要がありました。私はそのユーザーIDを 'fetch()'呼び出しで使用してユーザーデータを取得します。ありがとうございました... – Shahinism