問題タブ [server-side-rendering]

React/Redux アプリで初めてサーバー側のレンダリングを試みています。私が今抱えている問題は、初期状態でランダムに生成された文字列を作成し、それを小道具としてメインAppコンポーネントに渡す必要があることです。クライアントとサーバーに異なる文字列を生成しているため、これは明らかに問題を引き起こしています。この問題の発生を防ぐためにできることはありますか?

理解に役立つ基本構造:

App.js

そして私のレデューサー：

reducer.js

ご覧のとおりrandomStr、redux ストアから を取得してレンダリングしていますが、クライアントとサーバーでは異なります。どんな助けでも大歓迎です！

SSR とオフライン ファーストの両方の機能をどのように活用し、2 つのテクノロジを統合するにはどうすればよいでしょうか?

SSR は、私の JavaScript テンプレートをレンダリングして、アプリケーションの高速でちらつきのない読み込みを実現します。最も重要なことは、検索エンジン、サイトをクロールするソーシャル ネットワークにとって重要な SEO および Javascript フレンドリーでないページを有効にし、ページのアクセシビリティを向上させることです。

オフラインのファースト サービス ワーカーを使用すると、アプリケーションのシェルと、場合によっては一部のページ コンテンツも保存できます。

アプリ シェル アーキテクチャでは、サービス ワーカーが一度簡単にキャッシュできる単純な index.html ファイルをサーバーで提供する必要があると思います。ただし、SSR を使用すると、動的にレンダリングされたページを提供しているため、ルートがたまたま変化するため、すべてのページをキャッシュすることになります!

私は ASP.NET Web サイトを持っており、いくつかの Angular 2 コンテンツをそれに取り込もうとしています。Web サイトにはさまざまなページがあり、多くの静的コンテンツが含まれています。特定のページでは、Angular 2 アプリケーションとしてレンダリングされる動的コンテンツをレンダリングする必要があります。

これは、クライアント側では問題ではありません。既にプレースホルダー要素 (data-dynamic-appそれらの属性によって識別される) を反復処理し、それぞれに適切な Angular アプリケーションをブートストラップすることができたからです。簡単です。

ただし、SEO の理由から、クライアント側のコードに到達する前にページの Angular 部分がレンダリングされるように、サーバー側のレンダリングを追加する必要があります。課題は、IIS を介して提供される ASP.NET Web サイト用の既存の Visual Studio ソリューションにこれを構築しようとしていることですが、それを行う方法がわかりません。

私は頭の中でアイデアを実行してきましたが、Angular Universal の経験がないフロントエンドに焦点を当てた開発者として、どのアイデアがクレイジーで、実際にどこかに行き着く可能性があるかどうかを判断できません。ここに私の頭をよぎったいくつかのことがあります：

• Angular Universal を介して ASP.NET アプリケーションの HTML 出力全体をプロキシし、動的部分を事前にレンダリングします。
• ASP.NET Core で実行され、AngularUniversal が組み込まれているAngular2Spaアプリケーションを使用して、何らかの形で既存の ASP.NET サイトからコンテンツを取得します。

上記はまったく意味をなさないかもしれませんし、それらの「もし」または「どのように」もわかりません。私は、ASP.NET、IIS、さらには Angular Universal についてもほとんど知りません。したがって、上記を明確化/改善するためのアイデア、またはまったく異なるより良いアイデアをいただければ幸いです。

わかりました、この質問は、古典的な HTML と JavaScript の組み合わせの基本についての誤解を明らかにするかもしれませんが、ここでは...

同形の Javascript の概念を利用する (比較的) シンプルなアプリがあり、最初にサーバー側でレンダリングされ、次にブラウザーでレンダリングされるとします。たとえば、これは次のとおりです。

https://github.com/jesstelford/react-isomorphic-boilerplate

アプリは最初に次のサーバー側をレンダリングします (res.send() 経由)。

コンテンツの口ひげには、いくつかの React コードが含まれています。

次にブラウザは、スクリプト タグ内のブラウザ化されたバンドルを取得します (まったく同じ React コードが含まれています)。React は明らかに状態に変化がないことを認識しているため、DOM を再レンダリングしません。ページはすばやく読み込まれ、ユーザーには変化が見られません (フラッシュなし)。

ただし、私の質問は次のとおりです。レンダリングされた DOM 要素が 1 回しか表示されないのはなぜですか?

上記の HTML で 2 回 (div 行と script 行で) 表示されていることを考えると、2 回表示されると思います。代わりに、ブラウザのバージョンは、サーバーでレンダリングされたバージョンを単に置き換えます。これは明らかに非常に便利な効果ですが、なぜこのように動作するのかを誰かが説明してくれれば幸いです。

ありがとうございました

サーバー側のレンダリングを使用するソーシャル Web サイトを作成しています。

たとえば、ユーザーが投稿を作成したときに、レンダリングされた投稿 (HTML) をサーバーから受け取りました。

HTML を Dom に追加します。

--

ここで問題が発生します。

サーバーですべてをレンダリングすることを選択すると、

「小さなもの」をどこにレンダリングすればよいですか?

たとえば、ユーザーが写真をアップロードする前に写真のプレビューを生成したい場合、

サイレント側でタグを作成する必要がありますか?

それをJavaScriptで修正し、

または、サーバーからプレビューをリクエストして、y Web サイトを「完全に」サーバー側でレンダリングしますか?

前者の方法を選択すると、Web サイトの管理が難しくなります (cilent-side render と server-side render のようなもので、テンプレートの管理が難しくなるため)

サーバーですべてのテンプレートを管理できるように、後者のソリューションを好みます。

しかし、それはインターネットの速度に依存し、ユーザーがオフラインになると何もできません。

私は何をすべきか？

私が遭遇するほとんどの例は、常に URL からデータを取得しているようです。

しかし、サーバー側では、データベースから直接データをフェッチするのは意味がありませんか?

したがって、アクション作成者では次のようになります。

他のデータ取得方法と比較して、この方法の長所と短所は何ですか?

こんにちは、reactJS プロジェクトで react-rte を使用しようとしています。サーバー側のレンダリングがあり、このパッケージを使用するたびに次のようになります。

問題は isomorphic-tools にあると思いますが、ウィンドウが既に定義されているクライアントへのパッケージのインポートを延期する方法がわかりません。