SEOに対応したReact-Reduxアプリ

Question

リアクションアプリケーションは、動的にコンポーネントをレンダリングするため、検索エンジンでインデックスページを作成できなくなり、ソーシャル共有が複雑になります。このような問題を処理し、React-ReduxアプリをSEOに対応させるベストプラクティスは何ですか？

Answer 1

リアクションアプリケーション用にSEOを行うには、サーバー側のレンダリングが必要です！

アプリケーションのアーキテクチャを、データを提供するAPIサーバーと、クライアント側とコードを共有し、HTMLをレンダリングするクライアントと、最後にクライアント、つまり実行されるコードの3つに分割しましょう。ブラウザ。

基本的に、サーバーサイドレンダリングでは、コードの一部をサーバー上で最初に実行できます。つまり、サーバーは、最初のページのHTMLでレンダリングするために必要なデータをAPIから取得してから、このデータをパッケージ化してクライアントに送信します。

クライアントは最初のページのHTMLと必要なデータを取得した後、JavaScriptレンダリングビジネス全体を継続しますが、すでにすべての必要なデータがあります。したがって、上記の小さな例を使用すると、クライアント側のレンダリングSPAはゼロから開始する必要がありますが、サーバー側のレンダリングSPAはすべてのデータを既に持っている出発点になります。したがって、これによりSEOが解決され、SPAが共有する初期ローディングの問題が遅くなります。

これはやや直感的なアイデアのようですが、Reactはあなたがエレガントな方法でサーバー側のレンダリングを行うことができるので、Reactが出たときだけもっと真剣に取られました。 、サーバー側のレンダリングをまとめると

は3つの段階に分けることができます。

（1）初期負荷のページをレンダリングするために必要なデータを取得します。

（2）このデータを使用してHTMLをレンダリングします。

（3）HTMLをパッケージ化してクライアント側に送信します。

https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app

：もっとこのリンクをたどるために