問題タブ [isomorphic-javascript]

私は ReactJS を初めて使用し、NodeJS と Express を使用して小さな SPA アプリケーションを構築しています。私の要件は、最初のページの読み込みで mysql からデータを読み込むことです。スクリプトは次のようになります。

このスクリプトは機能しますが、ページの読み込み後に問題が発生し、リクエストがサーバーに送信され、UI がレスポンスで更新されます。これはSEOには役立たないと思います。代わりに、最初にデータを利用できるようにしてから、UI をレンダリングします。

次に、node-mysqlも使用しようとしましたが、同形の JavaScript アプリを作成しているため、資格情報が表示されます。それだけでなく、ブラウザは TCP/IP を使用できないため、それでも動作しません。それで、それは学んだ教訓でした。

ブログ アプリケーションを作成する必要がある場合、非常に動的になります。このような場合、SEOはどのように機能しますか？または、同形の JavaScript は静的コンテンツのみを意味するのでしょうか?

私は概念と少し混同されています。誰か私を案内してもらえますか？

react、flux (redux)、react-router を使用して基本的なアプリを構築したいと考えています。同型（ユニバーサル）アプリになります。どのバージョンの react-router を使用すればよいか混乱していますか?

0.13.3 または 1.0.0-beta3。

1.0 はクールで、同形アプリのサポートが向上し、他のことも簡素化されているため、質問していますが、まだベータ版です。

1.0がいつ完成するか誰か知ってる？

ここで Isomoprhic React スターター キット プロジェクトを使用して、Isomorphic 反応アプリを構築しています: https://github.com/kriasoft/react-starter-kit

ただし、トラブルシューティングの方法がわからないという不思議な警告が表示されます。

React は私のブラウザでは問題なくコードをレンダリングしているように見えますが、サーバーでのレンダリングに問題があるようです。

これが私が得る警告です：

warning.js:45警告: React はコンテナー内のマークアップを再利用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください。

問題の原因であるコンポーネントのコードは次のとおりです。

同形の JavaScript 構成で webpack 構成に問題があります。実行すると、次のようになります。

スローされたエラー:

これは私のwebpack構成です:

そして、私はrequireを呼び出しています

React と webpack を使用して同形アプリを実行していますが、すべてうまく機能します。ただし、コンポーネントをレンダリングする前にcssをプリロードするのに苦労しています。

私は自分のsassファイルをインポートしようとしていました（webpackがsass => cssできるように）

ただし、これはクライアントがロードされた後にのみ適用されます。

これを回避できるように見える唯一の方法は、 にリンクされている古き良きスタイルシートを使用することです。

Isomorphic react アプリケーションでは、クライアントとサーバーに同じコードベースを使用します。ただし、サーバー (ノード js) 呼び出し内から window.function() を呼び出す方法。

サードパーティのライブラリで関数を呼び出そうとすると、ウィンドウが未定義であるためエラーがスローされます