规范的 link 没有显示在 page-source react-helmet 上 reactjs 没有 ssr
canonical link doesn't show on page-source react-helmet reactjs no ssr
我在 page-source 上查看规范 URL 时遇到问题,这是 web-app 页面中的代码
const Index = () => {
const airportsQuery = useQuery(ALL_AIRPORTS_QUERY, {
variables: {
keyword: '',
},
skip: true,
notifyOnNetworkStatusChange: false,
});
let timer = null;
function fetchOptions(inputValue, callback) {
clearTimeout(timer);
timer = setTimeout(() => {
const response = airportsQuery.refetch({ keyword: inputValue });
response.then(
({ data }) => callback(data?.allAirports || []),
({ message }) => {
console.error('Server Error:', message);
}
);
}, 100);
}
return (
<Layout>
<Layout.Header />
<Layout.Container width="full">
<Helmet>
<meta charSet="utf-8" />
<title>eeeeee</title>
<link rel="canonical" href="https://www.biletiniz.com/" />
</Helmet>
<HomePage
fetchOptions={fetchOptions}
onSubmit={variables =>
Router.push(`/flight-offers?${qs.stringify(variables)}`)
}
/>
</Layout.Container>
<Layout.Footer />
</Layout>
);
};
export async function getStaticProps() {
const { default: lngDict = {} } = await import(
`@biletiniz/intl/locales/tr.json`
);
return {
props: { lng: 'tr', lngDict },
};
}
export default withApollo({
ssr: false,
})(Index);
当我检查 page-source 时,我找不到 link 或标题
我该如何解决?
而且我们没有 SSR 如何在 client-side
上渲染头盔
React 使用 DOM 渲染。 DOM 通过 JavaScript 进行了 更改,即 与 HTML 源一起发送代码。但是,JS 只能更改 DOM(用户可以看到的内容),不能更改源本身。因此,您应该检查 DOM(在所有主要浏览器中为 F12 或右键单击并检查)而不是页面的源代码。 现代爬虫像Google爬虫检查DOM,而不是源,否则像React这样的单页应用程序不能'看不懂它的内容,因为一切都是通过 JS 渲染的。所以你可以完全保留你的代码。或者在 React 的静态 HTML 文件.
中更改它
我在 page-source 上查看规范 URL 时遇到问题,这是 web-app 页面中的代码
const Index = () => {
const airportsQuery = useQuery(ALL_AIRPORTS_QUERY, {
variables: {
keyword: '',
},
skip: true,
notifyOnNetworkStatusChange: false,
});
let timer = null;
function fetchOptions(inputValue, callback) {
clearTimeout(timer);
timer = setTimeout(() => {
const response = airportsQuery.refetch({ keyword: inputValue });
response.then(
({ data }) => callback(data?.allAirports || []),
({ message }) => {
console.error('Server Error:', message);
}
);
}, 100);
}
return (
<Layout>
<Layout.Header />
<Layout.Container width="full">
<Helmet>
<meta charSet="utf-8" />
<title>eeeeee</title>
<link rel="canonical" href="https://www.biletiniz.com/" />
</Helmet>
<HomePage
fetchOptions={fetchOptions}
onSubmit={variables =>
Router.push(`/flight-offers?${qs.stringify(variables)}`)
}
/>
</Layout.Container>
<Layout.Footer />
</Layout>
);
};
export async function getStaticProps() {
const { default: lngDict = {} } = await import(
`@biletiniz/intl/locales/tr.json`
);
return {
props: { lng: 'tr', lngDict },
};
}
export default withApollo({
ssr: false,
})(Index);
当我检查 page-source 时,我找不到 link 或标题 我该如何解决? 而且我们没有 SSR 如何在 client-side
上渲染头盔React 使用 DOM 渲染。 DOM 通过 JavaScript 进行了 更改,即 与 HTML 源一起发送代码。但是,JS 只能更改 DOM(用户可以看到的内容),不能更改源本身。因此,您应该检查 DOM(在所有主要浏览器中为 F12 或右键单击并检查)而不是页面的源代码。 现代爬虫像Google爬虫检查DOM,而不是源,否则像React这样的单页应用程序不能'看不懂它的内容,因为一切都是通过 JS 渲染的。所以你可以完全保留你的代码。或者在 React 的静态 HTML 文件.
中更改它