NextSeo не обновляется при проверке исходного кода с использованием динамических метаданных и внешнего API

Здравствуйте, я поделюсь своей проблемой и тем, как я нашел решение в моем проекте Next JS, когда я использую динамические мета-данные из внешнего API с помощью GraphQL (Apollo Client).

Когда я использую «useQuery» из клиента apollo, он не работает при использовании SEO или когда я делюсь URL в социальных сетях, таких как Facebook, Linkedin.

Решение заключается в использовании «getInitialProps» с асинхронным методом и Hit API из getInitialProps.

const DetailBlogPage: NextPage = ({ data }: any) => {

    return (
        <SiteLayout>
            <NextSeo
                title={data.articles.title}
                description={data.article..summary}
                canonical={`https://www.nuliscv.com/blog/${data.article.slug}`}
                openGraph={{
                    type: 'website',
                    locale: 'id_ID',
                    url: `https://www.example.com/blog/${data.articles[0].slug}`,
                    site_name: 'Example.com',
                    images: [
                        { url: `https://abcdefg.directus.app/assets/${data.articles[0].image.id}` },
                    ]
                }}
            />
            <div>
                <DetailBlog data={data} />
            </div>
        </SiteLayout>
    )
}

DetailBlogPage.getInitialProps = async ({ query }) => {
    // do the data fetching here
    const { slug } = query;

    const errorLink = onError(({ graphqlErrors, networkError }: any) => {
        if (graphqlErrors) {
            graphqlErrors.map(({ message, location, path }: any) => {

            });
        }
    });

    const portfolioLink = from([
        errorLink,
        new HttpLink({ uri: "https://abcdefg.directus.app"}),
    ]);

    const client = new ApolloClient({
        cache: new InMemoryCache({
            addTypename: false
        }),
        link: portfolioLink,
    });


    const { data } = await client.query({
        query: GET_DETAIL_BLOG,
        variables: {
            slug
        }
    })

    return { data: data };
}

Вход в полноэкранный режим Выход из полноэкранного режима