問題タブ [server-side-rendering]

私のウェブパックは次のようになります。

「webpack」から webpack をインポートします。「パス」からパスをインポートします。

babelrc:

routes.jsルートの説明があり、react-router を使用する小さなファイルに過ぎないファイルをインポートしたかった

私がそれをしようとしている間、それは言い続けます：

これを修正するにはどうすればよいですか?

私の React アプリケーションでは、windowobject 、documentobject 、およびを使用していますlocalStorage。

エラーを回避するために、次のように設定しました。

しかし、私のアプリケーションでは、上記で設定したものの代わりに、実際のウィンドウ、実際の localStorage 、および実際のドキュメントを使用したいと考えています。

localStorage はこのディレクトリをスクラッチで作成しました。これは、ブラウザの localStorage が現在使用されていないことを意味しますか?

また、コンソール ステートメントは、doc 変数をコンソールしようとすると、問題を引き起こしているドキュメント変数の代わりに使用されている場合に次のようになります。

これは私が持っているスクリプトです:

ここで getElementByTagName は undefined を返し、本来あるべき要素ではありません。これを修正するにはどうすればよいですか?

シンプルなアプリのサーバー側レンダリング中にデータを渡そうとしています。

サーバーとクライアントの両方にこのデータプロバイダーがあり、グローバル変数を使用して初期状態をクライアントに挿入します。

サーバーでは、ウィンドウ。INITIAL_STATEは、prop を介して渡された実際のデータに置き換えられます。

データプロバイダーは、子の代わりにルーターコンテキストをレンダリングします...

問題は、サーバーのレンダリング中にコンテキストが定義されていないことです。それはまったく渡されなかったようなものです。次に、javascript バンドルがクライアントに到着すると、ウィンドウが使用されます。INITIAL_STATE変数を変更し、サーバーが中断したところから再開します。それは機能しますが、サーバー側のレンダリングは行わない方がよいでしょう。足りないものはありますか？それとも renderToString() がコンテキストをサポートしていないのでしょうか?

ユニバーサル 反応アプリケーションを最適化しようとしています。サーバー側のレンダリングがDOM全体をリセットした後に読み込まれるbundle.jsのようです。

私の理解では、React クライアント側の JavaScript は DOM 全体をリセットするのではなく、差分を計算し、追加の DOM とイベントを既存の DOM にアタッチします。

私の bundle.js は 1.3 MB で、これは間違いなくレンダリングが遅い原因ですが、DOM 全体を再レンダリングすることは想定されていませんでした。

私の質問は、ユニバーサルレンダリングに期待される動作ですか? すべてのDOMをリセットしない方法は?

サーバー/index.js

client/index.js

HTML.jsx

Redux やストア コンテナーを使用せずに、自分のページのサーバー側レンダリングを実行し、ルーターに反応するだけでよいでしょうか。私の最初のページは、API からいくつかのデータをフェッチします。これをサーバー上の反応コンポーネントに渡すにはどうすればよいですか。サーバーでウィンドウ変数を使用すると、ウィンドウが未定義であるというエラーが表示されます。どんな助けでもいいでしょう。

使いたくない、還元。初期データ状態を取得しようとしましたが、これをサーバー側のコンポーネントに渡すにはどうすればよいですか。サーバーでウィンドウが定義されていないため、ウィンドウ変数を使用しても役に立ちません。

上記は機能しませんでした

と を介してサーバー側でレンダリングするReactとを使用してユニバーサル アプリを構築しています。ReduxNodeJSExpressJS

すべて正常に動作しており、Express ハンドラが呼び出され{match} from 'react-router'、new store instance毎回作成されます。

私が抱えている問題{renderToString} from 'react-dom/server'は、ストアのバージョンのみをレンダリングすることです。pristineストアが変更された場合 (例: を介してディスパッチされたアクションcomponentWillMount)、ストアは更新されますがgenerated markup、 newrenderToStringが呼び出されるまでは変更されません。

1. レデューサーがどのように (リクエストごとに) 状態を変更するかわからないため、 を呼び出す前に初期状態を提供することはできませんrenderToString。
2. これ以上の電話は避けたいと思いrenderToStringます。

これは私のサンプルコードです:

vue.js アプリがあり、webpack にバンドルされています。を使用しvue-server-rendererて、サーバー側でレンダリングします。そこではすべてがうまく機能します。私のwebpack構成では、次を使用して使用していExtractTextPluginます：

私が使用するallChunks: trueと、すべてが機能する単一のcssファイルを取得します。しかし、理想的ではない大きなアプリケーションでは。現在、読み込まれていてページで使用されていない一連の CSS があります。

設定allChunks: falseすると、初期ファイルが小さくなり、現在のコンポーネントの css がページの読み込み時にヘッドに挿入されます。これはほとんど私が欲しいものです。しかし、ここでの問題は、SSR を使用している場合、CSS のないページで最初の HTML を取得し、CSS が読み込まれるとすべてが正しくレンダリングされることです。

私が望むのは、SSR レンダリング関数の実行中に、現在のページの CSS にアクセスして、ブラウザーに戻る前に自分で CSS を挿入できることです。

webpack ローダーを構築しようとしましたが、これは正しくないと思いますcss-loader。

vue-loaderまたはのいずれかの問題であると思いますvue-server-renderer。ここからどこへ行くべきかよくわかりません。だから私はいくつかのガイダンスを探していると思います.

VueJS サーバー側のレンダリングをテストするために、いくつかのことを理解しようとしています。このプロジェクトのボイラープレートとして、最新のVueJS Hackernews 2.0を使用しました。

現在、私はこれにこだわっています：

サーバーは を使用してデータをプリフェッチしますpreFetch。すべて良い。ユーザーがこのコンポーネントにルーティングすると、beforeRouteEnter関数内で同じ関数が呼び出されます。すべて良い。

ただし、ユーザーが初めてロードすると、preFetchData関数は 2 回呼び出されます。何度preFetchも何度もbeforeRouteEnter。

これは、Vue Router がまさにそのように機能するため、理にかなっています。preFetchサーバー上で実行され、クライアントで Vue がレンダリングされるとすぐに、beforeRouteEnterが呼び出されます。

しかし、データはサーバー側のレンダリング機能から既にストアにあるため、最初のロードで Vue にこれを 2 回実行させたくありませんpreFetch。

そのコンポーネントが常に で API 呼び出しを行うようにしたいので、データが既にストアにあるかどうかを確認できませんbeforeRouteEnter。サーバーからの最初のレンダリング時だけではありません。

このコンテキストで一度だけデータを取得する方法は?

上記では、API 呼び出しはstore.dispatch('GET_ITEMS')

vuejs アプリを SSR で適切に機能させることに取り組んできましたが、すべての試行が失敗しました。これには本当に助けが必要です。

es6 では .vue ファイルではなく通常の js ファイルを使用しており、webpack の require 関数を使用して html テンプレートが必要であることに注意してください。

アプリは開発モードで正常に動作しますが、「vue-server-renderer」を使用して実行を開始し、任意のルートに移動すると、次のエラーがスローされます。

エラー: render 関数またはテンプレートがコンポーネントで定義されていません: normalizeRender で匿名 (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6015:13) で renderComponent (/Users/salaahassi/) でdev/vue/magicum/node_modules/vue-server-renderer/build.js:6081:3) renderNode で (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6065: 7) render (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6257:5) で RenderStream.render (/Users/salaahassi/dev/vue/magicum/node_modules/) でvue-server-renderer/build.js:6312:9) で RenderStream.tryRender (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:96:12) で RenderStream._read (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:125:12) RenderStream.Readable.read (_stream_readable.js:348:10) で resume_ (_stream_readable.js:737:12) で _combinedTickCallback (internal/process/next_tick.js:74:11) で

また、ブラウザの JavaScript を無効にすると、ホームページも表示されなくなります (もちろん、SSR からは機能していないためです)。

ここに私のウェブパックがあります：

そして、ここに私のサーバーエントリファイルがあります:

ここに私のserver.jsがあります：