canonical link doesn't show on page-source react-helmet reactjs no ssr

Question

I'm having an issue on viewing canonical URL on page-source and here is the code in the web-app page

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);

when I inspect the page-source I can't find the link or the title How can I solve it? And we don't have SSR how can I render the helmet on client-side

Answer 1

React renders this using the DOM. The DOM is changed via JavaScript that is sent with the HTML source code. However, JS can only change the DOM (what the user can see), not the source itself. So you should inspect the DOM (F12 in all major browsers or right click and inspect) and not the page's source. Modern crawlers like the Google Crawler inspect the DOM, not the source, otherwise Single Page Applications like React couldn't understand its content because everything is rendered through JS. So you can totally leave your code as it is. Or change it in React's static HTML file.