next.js - Next JS 和服务器端渲染的动态路由

Question

我正在为 NEXT JS 中的每个共同基金开发动态路线。基金页面的 URL 是 domain.in/mutual-funds/[fund]。我希望页面的标题作为基金名称（除了 url 的 slug 之外什么都没有）。但是当我转到基金网址时，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} />