Динамическая маршрутизация с Next JS и рендерингом на стороне сервера

Question

Я разрабатываю динамические маршруты для каждого паевого инвестиционного фонда в NEXT JS. URL для страницы фонда: domain.in/mutual-funds/[fund]. Я хочу, чтобы заголовок страницы был названием фонда (ничего, кроме заголовка URL-адреса). Но когда я перехожу на URL-адрес фонда, getServerSideProps не получает параметр запроса мгновенно. Таким образом, тег заголовка не загружается вместе с названием фонда.

      import { NextSeo } from "next-seo";

const fund = props.query.fund;
const [title, setTitle] = useState("");

const titleCase = (str) => {
    var str1 = str.replaceAll("-", " ");
    var splitStr = str1.toLowerCase().split(" ");
    for (var i = 0; i < splitStr.length; i++) {
      splitStr[i] =
        splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
    }

    return splitStr.join(" ");
  };

useEffect(async () => {
setTitle(titleCase(fund));
},[])


export async function getServerSideProps(context) {
  return {
    props: { query: context.query },
  };
}

в заявлении о возврате

      <NextSeo title={title} />