SSR Next.js <Head> tag is not rendering at the server side

import { getMeta } from '@/helpers/globalHelpers';
import Head from 'next/head';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, selectValue, bulkUpdate, reset } from '@/slicers/propertySlice';
import Link from 'next/link';

export default function Home({ meta }) {

  const data = useSelector(selectValue);
  const dispatch = useDispatch();

  console.log(meta);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="og:title" content={meta.title} />
        <meta name="og:description" content={meta.metadescription} />
        <meta name="description" content={meta.metadescription} />
        <meta name="keywords" content={meta.keywords} />
        <title>{meta.title}</title>
      </Head>

      Hello world!
    </>
  )
}

export async function getServerSideProps({ resolvedUrl }) {

  const pageData = await getMeta(resolvedUrl);

  return {
    props: { meta: pageData[0] }
  }
}

I am working with next.js yarn and redux. I am trying to get my SEO data from my api and render is wit ssr. But it is rendering at the client side and SEO crawler tools (i am using screaming frog) can't see my title and description

Here is my code. I couldn't understand why my Head tag is rendering at the client side. Anyone can help?

Extra info, i checked _document.js, tag is correctly used and defined.

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script src="assets/js/jquery.min.js"></Script>
        <Script src="assets/bootstrap/js/bootstrap.min.js"></Script>
        <Script src="assets/js/aos.min.js"></Script>
        <Script src="assets/js/bs-init.js"></Script>
        <Script src="assets/js/checkbox-show-hide.js"></Script>
        <Script src="assets/js/dropdown-saver.js"></Script>
        <Script src="assets/js/floatsearch.js"></Script>
        <Script src="assets/js/heroclean.js"></Script>
        <Script src="assets/js/location-list.js"></Script>
        <Script src="assets/js/mobilemenu.js"></Script>
      </body>
    </Html>
  )
}

Solution

Where do you use your declared Home component that contains your Head and the title tag inside it?

Here are some official examples how it can be implemented.

I also had the issue with the title and for me it finally worked like that:

I have a HeadSEO component:

import Head from "next/head";

interface Props {
    title: string
}

function HeadSEO(props: Props) {
    return <Head>
        <title>{props.title}</title>
        // ... other meta-tags
    </Head>
}

export default HeadSEO

I reuse this component like that:

function Page(props: Props) {
    return <>
        <HeadSEO title={"some title or a variable here will work"}/>
        <OtherLayoutComponentsHere/>
    </>
   
}

What made it work for me is 1) using import Head from "next/head"; im my HeadSEO 2) in HeadSEO removing the empty tag <></> wrapping the Head tag in my HeadSEO component (you also have it in your example code).