I have a component that displays the title of the page from a CMS. I can make this a server component and fetch the data, but then when the page changes the component isn't updated to the new title. However, using a client component means I can't fetch the data for SSR directly in the component and so I need to pass in an 'initial title' prop which can be used for SSR. Is there a better pattern than this?

"use client";
import { getContent } from "#utils/queries.ts";
import { usePathname } from "next/navigation";

export async function PageTitle({ ssrTitle }) {
  const pathname = usePathname();
  const content = await getContent(pathname);

  return (
    <h1 id="page-title">
      {content.title}
    </h1>
  );
}