問題タブ [react-dom-server]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

60 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
0 に答える
190 参照

javascript - React を使用したサーバー側レンダリング - テンプレートがまだ必要かどうかについて混乱している

私はこのプロジェクトを見ていました https://github.com/DavidWells/isomorphic-react-example

この問題を開いた https://github.com/DavidWells/isomorphic-react-example/issues/25

HTML テンプレート ファイルを引き続き使用する必要がありますか? ... または、バックエンドで React コンポーネントを使用して、次のようにレンダリングすることもできます。

React は<html> <body> and <head>タグを許可しますか?

その場合、次のように、テンプレートとして機能する親 React コンポーネントを作成できます。

これを行う正しい方法は何ですか？

0 投票する
2 に答える
460 参照

node.js - React を使用したサーバー側レンダリング - コンポーザビリティ => 子コンポーネントを親に渡す

これが可能かどうかは疑問です。

次のような親コンポーネントがあります。

私がやりたいのは、小道具を使用して子コンポーネントを親コンポーネントに「渡す」ことです。

このようなもの：

通常、親コンポーネントには、その子への「ハードコーディングされた」参照があります。しかし、私が探しているのは、親 React コンポーネントが必要に応じてさまざまな子を「採用」できるようにするためのパターンです。

これは可能ですか？

おそらく、これを行う正しい方法は次のようなものです。

0 投票する
1 に答える
1374 参照

javascript - ランダムに生成された文字列を使用した React によるサーバー側レンダリング?

React/Redux アプリで初めてサーバー側のレンダリングを試みています。私が今抱えている問題は、初期状態でランダムに生成された文字列を作成し、それを小道具としてメインAppコンポーネントに渡す必要があることです。クライアントとサーバーに異なる文字列を生成しているため、これは明らかに問題を引き起こしています。この問題の発生を防ぐためにできることはありますか?

理解に役立つ基本構造:

App.js

そして私のレデューサー：

reducer.js

ご覧のとおりrandomStr、redux ストアから を取得してレンダリングしていますが、クライアントとサーバーでは異なります。どんな助けでも大歓迎です！

0 投票する
2 に答える
844 参照

javascript - クライアント側とサーバー側の両方のレンダリングを備えた React 同形コンポーネント

クライアント側とサーバー側の両方のレンダリングで反応アプリを作成したいと考えています。

次に例を示します。

このコンポーネントMainでは、クライアント側でレンダリングする必要があります。<Record />

成分Record

これが私の質問です：

と を使用して、サーバー側のレンダリングの例をいくつか検索しましReactDom.renderToStringたreact-router。ただし、クライアント側とサーバー側の両方のレンダリングに関するチュートリアルはありません。

私が達成したいのは、クライアントが最初にコンポーネント<Main />をロードしてレンダリングし、次に<Record />サーバー側からロードすることです。

別の質問は、スタイル モジュール Record.css を renderToString でロードする方法です。これは、この renderToString では css ではなく html のものをロードできると思うためです。

0 投票する
1 に答える
252 参照

react-dom - Maquette を HTML にレンダリングする

Maquette ビューの HTML 文字列表現を取得して、静的 html ファイルにプリレンダリングしたいと考えています。React には ReactDOMServer.renderToString があります。Maquette VNode に同様の方法はありますか?

0 投票する
0 に答える
342 参照

node.js - NODE_ENV チェックを回避して React Server Side Rendering を改善する最良の方法

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


12345678910