問題タブ [react-server]

node.js を使用してリクエストを受け入れ、dynamodb からデータを取得し、既存の JSON テンプレート オブジェクトにフォーマット/マージして返します。

ノードをWebサービスとして使用し、jsonを返すだけの場合、これはうまく機能しましたが、react.jsで新しいクライアント側コードを書いてテストしています。最初は JSON なしでページをロードし、次に react.js で AJAX を使用して JSON をロードしますが、1 回で実行したいと思います。

ノードで「filledTemplate」を埋めています。クライアント側でアクセスできるように、(Jade テンプレート「フォーム」を介して) JSON オブジェクトのfilledTemplate を返したいと思います。オブジェクトを jade に渡すことはできますが、その後の次のステップがわかりません。

簡単に言えば、クライアント側でreact.js（またはバニラjs）でオブジェクトを渡す/アクセスする方法がわかりません。

ヒントや指針をいただければ幸いです。

(また、どうやらreact.jsのタグがなく、追加できません...他の誰かが望む場合)

generator-react-serverから簡単なプロジェクトを作成しました。すべてがうまくいきました。

新しいページと新しいコンポーネントの新しいルートを作成し、hello-world.js (ページとコンポーネント) を home.js に変更しました。

現在、実行中npm startまたはreact-server startサーバーのシャットダウン時に、特定のエラーは返されませんが、次のログが返されます (以前に動作していたときに同じメッセージが既にログに記録されていたことに注意してください)。

私はかなりの間、react.jsフレームワークを研究してきました。私はまだクライアント側とサーバー側のレンダリングの違いを完全には理解していません (明確な違いを探す努力にもかかわらず)。したがって、親切な魂がこのトピックについて明確で鮮明な説明を提供してくれることを非常に感謝します?

ところで、私は .NET のバックグラウンドを持っているため、より JS 指向のプログラミング方法に向けて自分の考えを調整するために最善を尽くしています。

ありがとう！

ReactDOMServer.renderToStaticMarkup誰かが純粋な出力に出くわしたかどうか知りたいHTMLですか？

現在、関数renderToStaticMarkupはReact要素をマージしているため、アプリケーションが少し遅くなります。

クライアント側のレンダリングと比較して、ユーザーの操作がほとんどないアプリケーションにはサーバー側のレンダリングを使用することを好みます。また、サーバー側のコードをコンパイルするには webpack を選択します。

コンポーネントがレンダリングされたら、テーブルのmarginTopを更新したいシナリオがあります。クライアント側のレンダリングの場合、実装は次のようにリストされます

ただし、ssr では、コンポーネントのレンダリング時に componentDidMount が呼び出されることはありません。したがって、これらのコードをcomponentWillMountに配置し、ソース コードを次のように更新します。

その後、他の問題があります。

理由はわかっています。コードがノード環境で実行されているためです。ブラウザ環境のようなドキュメントの多様性はありません。私が考えることができる方法は、React コンポーネントをサーバー側Server Renderingの html 文字列にレンダリングするために使用されるrenderPage 関数にコードを入れることです。しかし、イベント ハンドラーを最上位のコンテキストに配置すると、他のレンダリングされたページが汚染されます。

私は他の解決策も見つけました。グローバル スコープでイベントをバインドするための React コンポーネント。. 私はそれが最善の解決策だとは思わない。

したがって、クライアント側のレンダリングのように、通常componentDidMountまたはcomponentDidUpdateに配置される DOM ノードを操作するより良い方法があるかどうかを尋ねたいと思います。

私のプロジェクトはcreate-react-appに基づいています。npm startまたはyarn start、デフォルトでポート 3000でアプリケーションを実行し、package.json でポートを指定するオプションはありません。

この場合、選択したポートを指定するにはどうすればよいですか? このプロジェクトの 2 つを (テスト用に) 同時に実行したいのですが、1 つはポート3005で、もう 1 つは3006

requireBabelフックなしでサーバー側レンダリングを使用する良い方法はありますか?

現在、サーバーでのコンパイルjsxと ES6 モジュールのインポート/エクスポートに使用しています (これらは .NET ではまだサポートされていないためNode.js)。のインポート/エクスポートをやめることができると思いますがrequire、 にとどまりたいjsxです。私が require フックで遭遇する主な問題は、デバッグとサーバーの起動の遅さです。

デバッグの問題を解決するために gulp を使用してソースマップをロードする人がいることは知っていますが、私にはやり過ぎのように思えます。

そのため、SEO に最適化されたコンテンツ (=== サーバー上でレンダリングされる) が必要な POC アプリに取り組んでいます。ただし、同じルート内に、さまざまなソースからの動的データが存在する可能性があり、そのすべてのデータをキャプチャするのに時間がかかる場合があります。この動的データは SEO には必要ないため、非同期ロードが実装されます。

私がこれまでに持っているのは、次のようなものです (これは単なるサンプルであることに注意してください):

ExpressJS を使用している server.js (その小さなスライス):

// server.js app.get('*', (req, res) => { ReactRouter.match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {

ご覧のとおり、解決された Promise を返す preRenderMiddleware があり、これは私が間違っていると思われる部分です。

したがって、私の問題は、サーバーから期待されるマークアップを取得することです-AboutContainer this.props.data でデータを取得しています。しかし、クライアント側が起動すると、 this.props.data は未定義です。

誰かが私に良い解決策を教えてくれますか? 私はこの問題を抱えた最初の人ではないと確信しています。これに対するいくつかの解決策に出くわしましたが、クライアント上で再要求された同じデータはすべて回避したいものであり、同じことは少し奇妙です。

また、Redux / Fluxを使用したくありません。

何かご意見は？

node.js で ES6 を許可するために require('babel-register') を使用し、反応コンポーネントのサーバー側レンダリングを行っています。

このトークでは (7:14頃から) https://youtu.be/PnpfGy7q96U?t=7m14s

React Server Side Rendering のパフォーマンスを 30% 以上高速化するための主な推奨事項の 1 つは、ReactDOMServer をビルドのクライアント側バージョンにポイントすることです。

例えば ​​var ReactDOMServer = require('react-dom/server') の代わりに var ReactDOMServer = require('react/dist/react.min') を使用します

速度が向上した理由は、クライアント側のバージョンでは、高価な操作であることが判明した process.env.NODE_ENV へのチェックが回避されるためです。

このトリックは以前はうまく機能しているように見えましたが、React 15 では、クライアント側のコードは renderToString と renderToStaticMarkup のメソッドを直接公開しなくなりました。代わりに、恐ろしい外観のプロパティ __SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED の背後に隠されています。

したがって、次のようなことができます var ReactDOMServer = require('react/dist/react.min').__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

しかし、明らかにこれは良い考えではないようです (おそらく、React の将来のバージョンとの前方互換性はありません)。

require('react/dom-server/dist/react-dom-server.min') を試しましたが、これは「未定義」を返します(ラッパーコードはサーバーではなくクライアントで実行されることを意図していると思います)。

このパフォーマンスの向上を達成するための、より認可された他の提案はありますか?

参考までに、元の問題はここに記載されていますが、問題は解決されたようです: https://github.com/facebook/react/issues/812