問題タブ [server-side-rendering]

私は scala-js フロントエンド フレームワークを書いています。その主な機能はサーバー側のレンダリングです。document.createElementなどでdom を操作するコンポーネントがあるという考えでしたelement.appendChild。HTMLDocumentサーバーでは、などをサブクラス化し、Elementそれらのメソッドをプレーン文字列 html に変換できるサーバー dom 実装でオーバーライドします。そこでscalajs-dom_sjs、サーバーモジュールに依存関係を追加して、それをやろうとしました。しかしHTMLDocument、Elementおそらく他のクラスには呼び出しがありますjs.native「ライブラリのJVMバージョンを使用する」という例外をスローするコンストラクター内。これは明らかに存在しません。別の方法を使用して独自の dom ライブラリを実装することもできますが、サーバーとクライアントに実装する必要があるため、2 倍の作業が必要になりますが、最初のアプローチではサーバーに 1 回だけ実装します。

だから私の質問は: サーバーで scala-js ライブラリのバージョンを使用することが非常に厳密に禁止されているのはなぜですか?それを回避する方法はありますか?

Enzyme を使用して反応コンポーネントをテストしていますが、次のエラーが発生します。

不変違反: 危険なRenderMarkup(...): ワーカー スレッドでマークアップをレンダリングできません。単体テスト時に React を要求する前にグローバルに使用できることを確認するかwindow、サーバー レンダリングに ReactDOMServer.renderToString を使用します。document

「酵素」を必要とする前に、jsdomに次のセットアップを追加しました（いくつかの場所で読んだように）：

ここで何が間違っていますか？

編集

サーバー側のレンダリングには関係ないと思います。メッセージは、単体テストとサーバー側のレンダリングに関する一般的なものです。

、などdocumentのサーバー側のレンダリングでクライアント側のテクノロジを参照することによって発生するエラーを軽減する方法は?document.cookielocalStorage

たとえば、React.js とサーバー サイド レンダリングを使用します。サーバー上でクライアント側の GUI コンポーネントをレンダリングし、同じコンポーネントをクライアント側にも個別に送信します。サーバー側とクライアント側のコンポーネントでレンダリングされた出力とそれに提供される小道具 (React 小道具) は、サーバー側のレンダリングの利点を失わないように同じにする必要があります。クライアント側では、React.js がこの 2 つの条件でどちらをレンダリングするかを調べて決定します。レンダリングされた出力と React コンポーネントに提供される小道具。これらのコンポーネントでは、クライアント側のバージョンでクライアント側のテクニカル リファレンスを持つことができますが、サーバー側のバージョンでそれらを参照するとエラーが発生します。

この 2 つのバージョンの GUI コンポーネントの JavaScript コードは異なる可能性があるため、それらを異なるものにすることができることはわかっていますdocument.cookie。たとえば、サーバー側のバージョンは参照しません。しかし、開発を単純化し、これによるエラーを回避するために、これはあまり簡単ではありません。また、このような場合、ブラウザはコンポーネントのクライアント側バージョンを実行してdocument.cookieまたはに到達localStorageします。そうでない場合、この軽減策はまったく機能しません。

Vue 2 が公開され、SSR 機能が含まれているため、次の質問があります。

Prerender.io と同様のボットの prerender を実行することは可能ですが、独自のサーバーで PHP (Laravel) を使用しますか? もしそうなら、方向を教えていただけますか？

どうもありがとう。

私はreactJsを初めて使用し、reactJSの機能を学び始めたばかりです。サーバー側のレンダリングの概念を介して nodeJS から reactJS に値を渡す方法を見つけようとしています。

以下の例では、react コンポーネントを定義してサーバーに追加し、UI でレンダリングすることができましたが、コンポーネント レンダリング関数内で使用できるコンポーネントにデータを渡す方法がわかりません。

client.js

コンポーネント.jsx

サーバー.js

更新 1:

以下のように、サーバー側のレンダリングされたコンポーネントに値を渡すことができるようになりました

これで、サーバー側のセットアップは正常に機能します。

{object:...}クライアント側の機能が機能するためにも、これを client.js で利用できるようにする必要があります。client.js でこの値を取得する方法はありますか?