React（Redux付き）をウェブサイトのコンポーネントとして使用する

Question

私は大規模でグローバリゼーションされたWebサイト（Webアプリケーションではありません）を持っています.50kページのコンテンツは、NodeJS + Nunjucks HTMLを生成する。サイトの90％で、これは完全に受け入れられるものであり、特にJSをよく索引付けしない非Google検索エンジン（Yandex、Baiduなど）では、SEOの可視性を達成するために必要です。

サイトはちょっと不器用です時間が経つにつれて複雑さが増しているので、私は、主に漸進的に拡張されたjQueryを使用して構築されている機能コンポーネントのいくつかを再構築したいと思います。私はFluxパターンのRedux実装でReactを見てきました。

私の質問は以下のとおりです。チュートリアルの100％近くが私がSPAを構築していると仮定しています。 jQueryコンポーネントの代わりにプラグインできる、コンテナ化された再利用可能なコンポーネントのセットを構築したいだけです。ああ、彼らはWCAG AA/508にもアクセス可能でなければならない。

リアクションはウェブサイトに組み込まれているとうまくやっていて、SEO、ブートストラップ、アクセシビリティに関する特別な考慮事項はありますか？実装やチュートリアルの例が分かるでしょう。

Answer 1

ページ上でreact componentを任意のDOM Nodeにマウントすると、静的に生成されたコンテンツにコンポーネントを簡単に挿入できます。

グーグルのような検索エンジンのほとんどは、ページをインデックス化する前にjsファイルが読み込まれるのを待っているので、react componentというページをインデックスすることができます。しかし、すべてのクロールボットによってページが正しくレンダリングされることを100％確信させたい場合、リアクションサーバーのレンダリングを見なければなりません。すでにバックエンドにNodeJSを使用している場合は、大きな問題ではありません。

私はこの種の問題に遭遇したことはありませんでしたが、ReactDOMServer.renderToStringを使用してサーバー上のコンポーネントをレンダリングし、静的なhtmlレイアウトのノードを置き換えてください。実装は、使用するテンプレートlangに依存します。 handlebarsのようなものを使用して、React Componentsから動的に作成することができます。だからあなたの静的なHTMLページでは、あなたは{{my-component}}としてそれらを使用することができるだろうが、それは私の推測だけでは、より洗練されたソリューションがあるかもしれません。

ここにはarticleがあります。

Answer 2

あなたはこれがisomorphic javascriptと呼ばれるものを通してすべて可能であることを知ってうれしいです。基本的にはReactとjsxを使ってサーバー上でHTMLをレンダリングし、ブラウザに完全に構​​築されたWebページとして送信します。これはあなたのアプリがSPAであると想定しているのではなく、あなたが既に持っているように、異なるページをレンダリングするための複数のエンドポイントを持つことになります。

ここ利益あなたが反応/ Reduxのアーキテクチャを使用しますが、あなたのアプリケーションへの要求はそれを動作させるためにJSの多くではなく、単一のページを静的なページを生成しますよう、まだ、あなたはサイトのクローラによってインデックス可能なことを可能にすることができるということです。また、SPAの土地への大きなジャンプではなく、Nunjucksレンダリングされたエンドポイントを一度に1つずつReactに変換することで、徐々にリファクタリングすることができます。 https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

EDIT：

は、ここで私は同型のノードでアプリケーションを反応させることで見つかった良いチュートリアルだ私は、既存のWebページにコンポーネントを反応させるの注入することであるあなたの実際の欲求を読み違えている可能性があります。これも可能です。ReactDOMを使用してコンポーネントを静的なマークアップにレンダリングし、そのマークアップ文字列をテンプレートを使用してNunjucksに挿入することができます。