Question

我在查看页面源上的规范URL时遇到问题，这是网络应用页面中的代码


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，如何在客户端渲染头盔

Answer 1

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

页面源上没有显示规范链接react-helmet reactjs no ssr

1 个答案: