データを表示するためにAJAXリクエスト(関連する場合はgraphQL APIのPOSTリクエスト)に依存するreactjs Webサイトを公開しました。
Google コンソールのフェッチ & レンダリング サービスを使用すると、API を呼び出す必要のないコンポーネントのみがレンダリングされていることがわかります。AJAX ベースのコンポーネントはまったくレンダリングされません。
Google fetch & render は、私のウェブサイトの 2 つのレンダリング画像 (Google と訪問者) を表示しますが、どちらにも AJAX コンテンツがありません。
この場合、サーバー レンダリングは必須ですか?
robots.txt ファイルがありません。
私は次のようなことをしています:
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { observable, runInAction } from 'mobx';
import axios from 'axios';
import ContributorList from '~/components/global/ContributorList';
import type { User } from '~/types';
import CSSModules from 'react-css-modules';
import styles from './style.less';
@observer
@CSSModules(styles)
export default class Footer extends Component {
@observable contributors: Array<User> = [];
async loadContributors () {
const { data: {
data: data
} } = await axios.post('/', {
query: `
{
users {
id,
name,
slug,
avatar {
secure_url
}
}
}
`
});
runInAction( () => {
this.contributors = data.users;
});
}
componentDidMount () {
this.loadContributors();
}
render () {
return (
<div styleName='contributors'>
{ 'Static content' }
<ContributorList
contributors={ this.contributors }
/>
</div>
);
}
};
私のブラウザでは、すべて正常に表示されます (「静的コンテンツ」 + 非同期でフェッチされることはめったにない寄稿者)。しかし、Google fetch と render を使用すると、「静的コンテンツ」のみが表示された 2 つのスクリーンショットが表示されます。
その結果、動的コンテンツが Google 検索結果に表示されません。