1

データを表示するために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 検索結果に表示されません。

4

1 に答える 1