Reactjs、webpack、page.js (ルーティング) を使用して webapp を構築しています。Webpack は、クライアント側にロードされる bundle.js を提供します。
クライアントにロードしている場合、og メタ タグをクロールできないことがわかったので、サーバー サイド (サーバー サイド レンダリング) に実装する必要があります。それを実装する方法はありますか?
(ネット上でこれに関する適切なドキュメントが見つかりませんでした)。
Reactjs、webpack、page.js (ルーティング) を使用して webapp を構築しています。Webpack は、クライアント側にロードされる bundle.js を提供します。
クライアントにロードしている場合、og メタ タグをクロールできないことがわかったので、サーバー サイド (サーバー サイド レンダリング) に実装する必要があります。それを実装する方法はありますか?
(ネット上でこれに関する適切なドキュメントが見つかりませんでした)。
多くの人が、サーバー上の別のテンプレート言語を使用して html の「シェル」をレンダリングしています (サーバーだけがレンダリングする必要があるため)。React を使用して、通常の API を使用して本体の外側にあるものをレンダリングしないでください (これには既知の問題があります)。ただしrenderToStaticMarkup
、シェルをレンダリングするためだけにサーバーに別のテンプレート言語を導入していないため、これはより良い方法だと思います。
もちろん、これは、メタディスクリプションやdocument.title
通常の React の方法では更新できないことを意味し、単純な古い JavaScript を使用して更新する必要があります。または、 react-helmetをお勧めします (サーバーがレンダリングするときにメタとタイトルを変更できます)。
ここで参考になる例を作成しました - https://github.com/DominicTobias/universal-react/