問題タブ [server-side-rendering]

バックエンドに Laravel、フロントエンドに React.JS + Redux を使用したアプリを設定しています。サーバー側レンダリング（SEO用）のソリューションを探しています。

この解決策を見つけました: https://github.com/tz5514/Laravel-Redux-Isomorphicしかし、バックエンドでは Express.js を使用してレンダリングしているようです。

そのため、より優れたサーバー側レンダリング ソリューションを探しています。

したがって、ここで概説されているように、サーバー側レンダリングのいくつかの非正統的な方法に従うプロジェクトの完全な混乱を継承しました:クライアントルーティング (react-router を使用) およびサーバー側ルーティング

今、私は先週それをアップグレードしようとしてきましたが、この混乱を適切かつ現在の状態にしようとしている間、おそらく40時間以上無駄にしました. これはreact 0.13.3を使用しており、少なくとも0.14.7とreact-router 2にアップグレードしたいのですが、これにどのようにアプローチしようとしても、構造が非常に脆く、何度も何度も失敗し続けています. これは私が持っているものです:

クライアント：

サーバ：

serverModules(???)「インデックス」の1 つ:

ルート:

AppRouter:

AppHandler:

LoginHandler は次のようになります。

これをどのようにアップグレードしますか、できれば最新バージョンにアップグレードします。可能であれば、段階的な解決策を示してください。1 週間以上アップグレードに失敗した後、私はかなり愚かだと感じているからです。私は以前にクレイジーで壊れやすいセットアップを見たことがありますが、これははるかに簡単です. 本当に困っています、助けてください！

自動再生ビデオタグを表示するユニバーサル React アプリがあります。JavaScript が読み込まれると、React はそれを取り込みますが、それによってビデオが最初から再開されます。

これを防ぐ方法はありますか？

これは、DOM も更新するため、ホット リロードでも再現できます。

ssr を使用した meteor+react は、ssr を使用しない同じパックとどのように異なりますか? 違いはなんですか ？
たとえば、Meteor はサーバー上のすべての Web ページをレンダリングしますか? それとも、サーバーなどで最初のページをレンダリングするだけですか? ssr を使用する理由

これが反応固有の質問であるかどうかは正確にはわかりませんが:

サーバー側レンダリングでreact / reduxスタックを使用してアプリケーションを開発しています。ユーザーがログインすると、1 つは ID 用、もう 1 つはブラウザーでのセッション用 (有効期限付き) の 2 つの Cookie を受け取ります。問題は、ユーザーがページを更新すると状態がリセットされ、セッション情報が失われることです (基本的に、状態にいくつかの変数を設定して、ユーザーがログインしていることを示します)。

問題は、この状況を管理し、ページが更新されてもユーザーがログインしたままにする方法です。サーバー側のレンダリングを完全に外に出し、ページが最初にレンダリングされるときにクライアント側で有効期限が切れていないセッション ID Cookie をチェックし、セッションがまだ生きている場合はその状態にいくつかの変数を設定することを考えています。 -それ以外の場合はその逆。

これは安全なアプローチのように見えますか? それを行うより良い方法はありますか？

Webpack を使用して同形のサーバー側レンダリング React アプリをセットアップしようとしていますが、renderToString を使用して React コードを文字列に変換しようとすると、次のエラーが発生します。

renderToString 関数を使用して行をコメントアウトすると、このエラーが発生しなくなります (もちろん、アプリはまだ機能しません。エラー メッセージは表示されなくなりました)。

ファクトリを作成する代わりにrenderToString を渡そうとしまし<RootApp />たが、どちらも機能しませんでした。React.createElement(RoutingContextを使用React.createElementすると同じエラーが発生し、使用<RootApp />するとunexpected token < error.

そして、何が起こっているのかについてのアイデアはありますか?

私のアプリは次のようになります。

app.js

app.jsx

index.ejs

Node.js ベースの同形 React/Redux アプリの作成を開始しました。プロジェクトの要件の 1 つは、「モバイル」および「デスクトップ」ビューに基づく特定のコンポーネントの「適応」レンダリングです。ユーザーのビューに関する画面情報 (「小」、「中」、「大」のメディア クエリに基づく) を状態に格納する Redux アクションとリデューサーを実装しました。サイズを変更すると、状態/ストアが更新されます。デフォルトの状態は「小」です。

画面サイズに基づいて 2 つの異なるバージョンで「適応」する必要があるコンポーネントでは、次のことを行うだけです。

if (small) return バリエーション1

if (medium) return バリエーション2

すべての作業。

今、私は2つの問題に直面しています:

1. 私のアプリは同形です。つまり、マークアップはサーバー側でもレンダリングされます。サーバーは、ユーザーのブラウザとメディア クエリについて何も知りません。したがって、私のデフォルトの状態は「小さい」ため、サーバーは常に「variation1」をレンダリングします。node-server は、サイトのエントリ ポイントです。React アプリが「配信」される前に、レンダリングを「遅延」(ミドルウェア?) する必要があり、サーバーはブラウザーの幅に関する情報をクライアントから取得する必要があるようです。この問題をどのように解決できるか考えていますか?

2. レンダリングは状態に基づいているため、ブラウザのサイズが「デスクトップ」の場合でも、ロード後に必ず「バリエーション 1」が最初に数ミリ秒間 (ちらつき) 表示されます。これは、状態が現在の画面幅で更新されるまでに JS 検出に数ミリ秒かかるためです。これは、上記の問題とデフォルトの状態と一緒に機能すると思います。

1の解決策は見つかりませんでしたが、同形で応答性/適応性のあるものがあるに違いないと思います。

ReactとFlowRouter（SSRバージョン）でMeteor 1.3を使用しています。SSR を実現したいのですが、routes ファイルをサーバーの にインポートすると、main.js基本的に、npm パッケージの 1 つが呼び出され、サーバーに存在しないというエラーが表示windowさwindowれます。

パッケージを使用しながら、この問題を回避する方法はありますか? 問題のパッケージはWallop

コンポーネントをクライアント側とサーバー側の両方で動作させるのに苦労しています。

これは私のコンポーネントのコードです:

それは正常に動作します。クライアント側を介してレンダリングされると、両方が表示され、h2空h3になり、ajax 呼び出しが返されると埋められます。

サーバーを介してレンダリングされると、これらの小道具は既に満たされ、クライアントに送信された html はすでに完了しており、余分なものは必要ありません。

問題は、サーバーでレンダリングされると、クライアントでエラー メッセージが表示されることです。

次に、ajax メソッドを再度呼び出して、すべてを再レンダリングします。

では、このような場合はどのように処理すればよいでしょうか。このコンポーネントがサーバー上でレンダリングされたことを React に伝える方法はありますcomponentDidMountか?