問題タブ [server-rendering]

headless-gl を使用して Node.js で webGL を実行し、サーバー上で動的にイメージを作成しています。作成された画像は、ユーザーが API を介して再度画像にアクセスする前に、データベース (MongoDB) に保存されます。

以下は、画像が生成される部分です。

その後、ピクセルは base64 に変換されます (これは、クライアント HTML の Image によってロードされる推奨される方法と思われるためです)。

ただし、このバッファーによって生成された文字列をデコードしてイメージを生成することはできません。ピクセルが「バイナリ」タイプではない可能性がありますか? または、ピクセル文字列をデータベースに保存し、キャンバスのピクセルをクライアントでピクセルごとに再描画する必要があります (これが最善の方法だとは思いません)。

反応サーバー側をレンダリングするのに問題があります。私はいつも得る^

ReferenceError:ドキュメントが定義されていません

var root = document.getElementById('root');

ノードがブラウザのドキュメントオブジェクトを理解していないことが起こっていることを私は知っています。しかし、私はそれを修正することはできません。webpack、サーバー、または app.js で何か間違ったことをしていますか?

ここに私のコードがあります

サーバー.js

webpack.config.node.js

そして最後に、ここに私のapp.jsがあります

サーバーでレンダリングされるフレームワーク/ライブラリ ( React のNextjs、Vue の Nuxt など) と非JS REST API バックエンド(つまり、Java、Django、Go など) は相互に排他的ですか、それとも一緒に使用できますか?

具体的には、バックエンドで REST API を構築するために Go を使用していますが、ページをサーバーでレンダリングするために Go をあきらめる必要があるのではないかと考えています。

私のデータベースには、素敵な小さなリストにレンダリングしたい動物の配列があります。ユーザー エクスペリエンスを向上させるために、(新しいserver-renderパッケージを使用して) サーバー上でレンダリングし、 react-meteor-data( withTracker) を使用して変更をサブスクライブしたいと考えています。

現在、これは1つのことを除いて機能しています。サーバーはコンテンツ (データを含む) を期待どおりにレンダリングし、クライアントに送信します。問題はクライアントにあります。

ページが読み込まれると、meteor はデータ接続をセットアップし、ページをレンダリングします。この最初のレンダリングは、データ接続がデータを返す前に発生するため、動物の空のリストがレンダリングされます (サーバーでレンダリングされたリストが上書きされ、警告が発生します)。次に、データが到着すると、リストは完全に (再) レンダリングされます。

これにより、リストが点滅してから戻るため、ユーザー エクスペリエンスがかなり低下します。データが利用可能になるまで、クライアント レンダリングを延期したいと考えています。これは可能ですか？

私のコードは本当にシンプルで、次のようになります。

リスト コンポーネント:

サーバ：

クライアント：

データベース:

何が起こるか (Animals.jsx の console.log):

1. サーバー上でレンダリング [動物データ]
2. データが到着する前にクライアントでレンダリングします。これにより、サーバーでレンダリングされたリストが削除されます []
3. データ到着時にクライアント上でレンダリング [動物データ]