NextJs Render теги facebook через рендеринг Sever
Я работаю над простым приложением-викториной Facebook, чтобы изучить React и NextJs.
Проблема, с которой я сталкиваюсь, связана с тегами Facebook, когда я делюсь результатами пользователей. Он показывает метатеги страницы вопросов викторины, потому что сканер Facebook отображает html до того, как я добавляю новые метатеги (метатеги с ответами основаны на предоставленных пользователем данных). Как я могу добавить новое описание в метатеги. Потому что описание доступно только после того, как пользователь нажмет кнопку «Найти мои результаты».
Я использую react-share и NextJs Head для добавления метатегов.
Таким образом, если переменная ShareResult имеет данные для загрузки страницы результатов, в противном случае загрузите страницу вопроса.
{ShareResult ? (
<QuizResult response = {ShareResult} />
) : (
<CurrentQuiz id = {props.query.playquiz} />
)}
Внутри CurrentQuiz я загружаю викторину для воспроизведения, а внутри QuizResult я показываю результаты.
На странице QuizResult есть все метатеги, использующие next/head от NextJs.
<Head>
<title>Your Results</title>
<meta property = "og:url" content = "http://testurl.com" />
<meta property = "og:type" content = "article" />
<meta
property = "og:title"
content = "When Great Minds Don’t Think Alike"
/>
<meta
property = "og:description"
content = "How much does culture influence creative thinking?"
/>
<meta
property = "og:image"
content = "http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg"
/>
</Head>
Но этот заголовок не генерируется на стороне сервера, потому что каждый ответ пользователя будет зависеть от данных пользователя. Как я могу добавить эту голову, чтобы поисковый робот Facebook мог ее прочитать?
Второй день изучаю рендеринг на стороне сервера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, после поиска и перепробования многих вещей я перенаправил пользователя на новую страницу, используя
Router.push({
pathname: "/result/quizshare",
query: {
name: ShareResult.name,
imageurl: url,
quizid: props.query.playquiz,
},
На следующей странице я получаю реквизиты от рендеринга на стороне сервера.
export const getServerSideProps = async ({ query }) => {
return { props: { query } };
};
export default QuizShare;
Также добавлены метатеги с NextSeo