时间戳

首页 > 解决方案 > 规范链接未显示在页面源 react-helmet reactjs no ssr

reactjs - 规范链接未显示在页面源 react-helmet reactjs no ssr

问题描述

我在查看页面源上的规范 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);

当我检查页面源时，我找不到链接或标题我该如何解决？而且我们没有 SSR 我如何在客户端渲染头盔

标签： reactjscanonical-linkreact-helmet

解决方案

React使用DOM渲染它。DOM通过与 HTML 源代码一起发送的JavaScript进行更改。但是，JS 只能更改 DOM（用户可以看到的），而不是源本身。因此，您应该检查 DOM（所有主要浏览器中的 F12 或右键单击并检查）而不是页面的源代码。像 Google Crawler 这样的现代爬虫检查的是 DOM，而不是 source，否则像 React 这样的单页应用程序无法理解它的内容，因为一切都是通过 JS 呈现的。所以你可以完全保留你的代码。或者在React 的静态 HTML 文件中更改它。

推荐阅读