問題タブ [server-side-rendering]

ReactJS で構築されたレスポンシブ Web アプリケーションがあり、いつかサーバー側のレンダリングをサポートしたいと考えています。

ビューポートのサイズに応じて、アプリケーションのレイアウト/動作が変わります。しかし、これらすべての変更はプレーンな CSS メディアクエリだけで行うことができるわけではありません。JS の動作と、基礎となる HTML 構造も幅に応じて変更する必要があります。

たとえば、次のことができます。

幅800px未満：

幅800px以上：

ここで、そのアプリケーションにサーバー側レンダリングを使用したいと考えています。しかし、サーバーでは幅がないため、どの HTML 構造をクライアントに返せばよいかわかりません。

静的なデフォルトのサーバー側ブレークポイントを使用するソリューションを探しているわけではなく、クライアントでアプリを修正することに注意してください。デバイスに応じて適切な html 構造をクライアントに返すソリューションを探しています。したがって、ブラウザで JavaScript を無効にすると、問題なく動作するはずです。

両方に必要な html をレンダリングし、プレーンな CSS メディアクエリと で必要な部分を表示/非表示にできると主張する人もいるかもしれませdisplay: noneんが、一般的にユーザーが移動する可能性は低いため、アプリが複雑になり、多くの未使用の html 要素がレンダリングされることになります。ブレークポイントの上/下 (つまり、彼がモバイル デバイスを持っている場合、デスクトップの html 要素は使用されません)

また、インライン スタイルを使用したい場合、これらのインライン スタイルをサーバー上で正しい幅にレンダリングする必要があるため、複雑になります。

ビューポートのサイズを推定するためにブラウザの UA をスニッフィングしようと考えている人を見てきました。しかし、セキュリティで保護されていない画面サイズの検出があったとしても、サーバー側でデバイスの画面の向きを知ることができるかどうかはわかりません。

この問題を解決するために何かできることはありますか?

HTML ファイルでそれらをレンダリングする angular2 コンポーネント用のパーサーを開発しました。これまでのところ、HTMLでそれらを次のようにレンダリングできます

その後、静的 HTML が正しく生成されますが、コンポーネントを次のように使用している場合:

その後、コンポーネントは HTML に正しく読み込まれますが、静的 HTML は正しく生成されません。以下の画像を参照してください: コンポーネントはブラウザに読み込まれます

ただし、静的 HTML が正しく生成されない 静的 HTML のコンソール ウィンドウ

Server.ts

index_new.ng2.html

@alexpods の更新された git Hub リポジトリを試してみました。

React Starter KitのIsomorphic CSS style loader for Webpackでは、クラス名の代わりにスタイル オブジェクトをどのように渡すのでしょうか?

現在、これを行うことができます：

次のようなことができるのではないかと思います。

サーバー側のレンダリング時にも機能するソリューションを探しています。

サーバー側のレンダリングと静的 HTML の生成に angular2-universal を使用しています。

これまでのところ、静的 HTML が生成され、コンポーネントもレンダリングされています。しかし、私のブラウザコンソールにはこのエラーが表示されています。

この目的のために次のコードを使用しました。

1.index.html

2.client.ts

3.server.ts

4.app.component.ts

「react-router」、「redux」、およびサーバー側レンダリングを使用する React アプリ/サイトを構築しようとしていますが、ブラウザーでの初期レンダリングの処理方法がよくわかりません。

サーバー側では、JSON オブジェクトを取得し、それを状態に渡し、状態を props にマップします (すべて同期的に)。最後に、既に初期化された props を使用してコンポーネントをレンダリングします。

ただし、ブラウザが起動したら、AJAX リクエストを介して非同期でデータを取得する必要があります。

その結果、未定義の小道具が原因でレンダリングが失敗します。これを回避する方法はありますか? データが取得されるまでブラウザのレンダリングを延期することはできますか?

大規模なデータベース データがあり、別のテーブルからクエリを実行していて、計算後に別の配列で結果を取得したい場合は、データを結合して 1 つのテーブルに表示したいですか?

そんな感じ;

サーバーサイド処理でデータテーブルに表示???

誰かが助けてくれれば感謝します

「注文」を含むサーバー側のレンダリングされたページと、「親オブジェクト」としてインスタンス化されたルート Vue オブジェクトがあります。その親 Vue オブジェクトの子としてレンダリングされた html 注文を開始することは可能ですか?

Vue js はコンテンツを動的に追加する場合に最適に機能するようですが、この場合、既存のマークアップから子を親に追加できるようにしたいと考えています。それは可能ですか？解決策を見つけようとしましたが、うまくいきません。基本的に、私はこのようなサイトにいくつかのdivを持っています

<div id="order-1">some content</div><div id="order-2">some other content</div>

"new Vue({..."body に要素を設定して開始した Vue コンポーネントに、それらを子として追加したいと考えています。

だから基本的に私はこの構造が欲しい

親アプリ (新しい Vue を使用) --> オーダー 1 (ページ レンダリング後に子として追加) --> オーダー 2 (ページ レンダリング後に子として追加)