2016-05-16 26 views
2

アプリケーションを配備する通常のプロセスは、コードトランスジェレーションを処理するためにwebpackを使用すると簡単です。最後の結果は、すべてのcss/js/htmlを含む1つの.jsアプリです。しかし、私はクライアントの要求からサーバーを表現するデータが必要なアプリケーションを持っています。例えば動的トランスペアレントおよびサービングexpressjsのリアクションアプリケーション

私がリクエストからuseridを取得し、それに基づいて、その後App構成要素とするいくつかのデータを提供し、アプリケーションやユーザー固有のデータが含まれている.jsファイルを(のようなものをWebPACKの提供)を提供します。

私は、ユーザーbabel-core/registerreact-dom/server.renderToStringに、試してみたが、それは単にアプリを動作させるために必要であるjsコードをhtmlcssに提供しません。私はこれらのコードを別々にロードしなければなりません!

答えて

2

これはかなり一般的な問題です。 すべてのユーザーに対して1つのユニバーサルビルド・バンドルがあり

、あなたは(あなたが〜彼のためにバンドルを構築するために10秒を待つようにユーザーを強制的にしたくない)試してみました少し違う、それを解決するために
  1. 優れている(または少数 - 通常のユーザーと管理者のユーザーのための第二)
  2. サーバーには、例えば特別なパラメータを使用して、ユーザーからの要求を取得するための一例についてuserid
  3. サーバーにこの要求に対する応答としてスタート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__

+1

ロード時間はボトルネックになり、提案した方法に近いアプローチを選択する必要がありました。私はそのユーザーIDを 'fetch()'呼び出しで使用してユーザーデータを取得します。ありがとうございました... – Shahinism

関連する問題