問題タブ [isomorphic-javascript]

時間を表示する React コンポーネントに同形レンダリングを利用すると、サーバーAが point で時間をレンダリングするという問題にときどき遭遇しますが、クライアントが SPA としてピックアップするまでに、 point からの時間が pointAに変更されB、React がスローします。警告React attempted to reuse markup in a container but the checksum was invalid:

秒などのより細かい時間単位を表示するほど、エラーの発生は明らかに顕著になりますが、分、時間、日などの境界でもこれに遭遇しないようにすることをお勧めします。

クライアント側でReactに効果的に「大丈夫です。DOMのこの小さな部分はサーバー側とは異なる場合があります」と伝える方法はありますか? それとも、私が思いもよらなかった別の方法ですか？

もっと詳しく

React-IntlFormattedRelativeコンポーネントを使用して、アイテムの作成日をわかりやすい方法で表示しています。もちろん、アイテムの作成日はクライアントとサーバー間で同じままです (そして、シリアル化された Flux ストアでクライアントに渡されます) が、サーバーのレンダリング時間とクライアントのレンダリング時間の差は、HTML が頻繁にレンダリングされるのに十分な長さです (常にではありません)。異なります。

Docker コンテナーにPlay 2.3.xを使用する REST API があります。この API はPostgresSQL 9.4データベース (Docker コンテナー上でも) と通信し、JSON を提供します。クライアントは React と同型のアプリです (Docker コンテナーでも)。

クライアントがルートを変更すると、いくつかのリクエストが API に送信されます。問題は、すべてのリクエストが異常に遅いことです。たとえば、次の uri があります。

このリクエストをブラウザから直接送信すると、4 秒後にレスポンスが表示されます。このリクエストが他のリクエストと一緒に送信されると、12 秒長くかかります。

今回は何が原因でしょうか?

もちろん、API のすべてのアクションは非同期です。たとえば、geojson アクション:

各リクエストは別のスレッドで処理する必要がありますか?

編集

したがって、いくつかのテストの後、遅いのは私の開発用コンピューターだけです。実際、他のコンピューターでは、応答時間は正常です。

クライアントとサーバーの両方でいくつかのビジネス ロジックを共有したいと考えています。

ファイル API であるとしましょう。アイテムにフォルダーの種類があるかどうかを知りたいとします。

サーバー上では、次のようになります。

これをクライアントに簡単な方法で公開することは現在可能ですか?

loopback-sdk-angular も使用しています。それと統合することが最終的な目標です。

これを行う最善の方法は何ですか？

同型アプリに最適なテクノロジ/アーキテクチャの選択肢を探しています。すでに開発されているもの、必要なもの、そして私たちが気に入っているもののために、私の制約は次のとおりです。

• レイアウト、子コンポーネントなどを含むReact.jsのすべてのフロントエンド。
• フラックスアーキテクチャ
• 私が言ったように、サーバー側のレンダリング(現在のサーバーは Express.js で構築されているため、変更される可能性がありますが、それを維持できれば、時間を節約できます)
• 反応ルーターや単なるjson route:componentなどの非常にシンプル/柔軟なルーター、わかりません
• 各コンポーネントは、レンダリング前に必要なデータを要求できる必要があります
• 各コンポーネントは、特定のコンテキストを持つことができる必要があります(ページ タイトルの設定、特定の CSS の挿入、メタ タグの設定など)。

明確にするために、ルーターファイルで「このルートは、このレイアウト内でこのコンポーネントをレンダリングする必要があります」と単純に言うことで、アプリにページ/機能を追加できるようにする必要があり、コンポーネントは独立している必要があります。すべて、API からのこれらのデータが必要です。次に、この css ファイルが必要です。私のタイトルは「タイトル」などです。」.

私たちが現在持っているアーキテクチャは混乱しており、保守もスケーラビリティも柔軟性も十分ではありません。

Express.js ルーターを使用して、各ルートでコンテキスト情報を設定し、API 呼び出しを行ってから、jsx コンポーネントを挿入する特定の css と js を含む jade ファイルをレンダリングします。次に例を示します。

router.js

プロフィール.jade

profile.jsx

プロジェクトが成長するにつれて、私たちはそれに満足しなくなります。

私たちが探求しようとしてきた解決策は次のとおりです。

• 非常に複雑で、各コンポーネントのデータを単純に取得する方法を管理していませんでした。ただし、それはまさに各コンポーネントのコンテキストについて必要なことです。

• express.js + react-router: Client Routing (react-router を使用) および Server-Side Routing、http://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/ > データに関する同じ問題、およびコンテキストを設定できませんでした。また、現在とは逆に、サーバー側の最初のレンダー、次にクライアント側のすべてのレンダーにあまり慣れていません。

API からデータを読み書きするためのプラットフォームだけを開発しているわけではありませんが、実際には何も適応していないように感じます。

制約に関して、私たちにとって最適で、シンプルで、柔軟で、明快なアーキテクチャは何でしょうか? どのような選択をする必要がありますか?